Gwni Lab GwniLab

const searchBox = document.querySelector("#search-box"); // input 서치 박스를 지정. const cssList = document.querySelectorAll(".list ul li"); // 모든 li를 지정. searchBox.addEventListener("keyup", ()=>{ // input 서치박스를 key up 했을 때를 지정. const searchWord = searchBox.value;//사용자가 입력한 데이터 저장소 cssList.forEach(el=>{ console.log(el.dataset.name); // 입력한 데이터 저장소가 올바르게 되었는지 콘솔로그로 확인. const cssName = el.dataset.name; ..

1. 고대 철학 1부. 소크라테스 이전 1. 그리스 문명의 발전 우리가 문명.이라고 부를 수 있는 요소들은 수천 년 동안 이집트와 메소포타미아에 이미 존재했었는데요. 그리스인들은 순수한 지성의 영역에서 독특한 업적을 많이 남겼어요. 수학과 과학 그리고 철학을 처음 만들어 냈다고 해요. 대단하네요.. 당시에 이뤄낸 업적들은 경이롭다는 찬사를 보냈지만 최근까지도 그리스의 정신과 분위기에 경탄하거나 신비롭다고 말하는 수준에 머물러 있어요. 그럼 바로, 고대 그리스 철학의 첫 번째 주자인 밀레토스 학파에 대해서 알아봅시다. 1. 밀레토스 학파 1. 탈레스 철학은 탈레스(Thales/기원전 624~545)라는 학자와 함께 시작되었는데요. 그 당시 철학은 과학과 분리되지 않고 존재했었습니다. 그래서 오히려 철학자보..

30분 53초 10단계 통과! https://css-speedrun.netlify.app/

DOM 이란 무엇일까? DOM(Document Object Model)은 웹 페이지에 대한 인터페이스입니다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공합니다. 말이 좀 어렵죠? 저도 이해하는데 시간이 오래걸렸습니다만, 제 나름대로 알기쉽게 설명을 해보자면! DOM은 HTML 문서에 대한 인터페이스. 눈에 보여지는 형태를 말하는데요. 좀 더 쉽게 풀어보자면 태그를 써서 작성하는 HTML 문서가 아니라 Javascript를 이용해서 언제든 수정될 수 있는 동적인 문서 모델을 의미 합니다. 제가 제대로 이해한건지 모르겠네요ㅎㅎ.. 이런 식으로 스크립트로 HTML 태그를 만들어서 문서를 작성한다! 이게 DOM이다. 라고 이해를 했어요. 기본적인 ..

/*본 컨텐츠는 버트런드 러셀의 '러셀 서양 철학사'를 토대로 쓰여집니다.*/ 두꺼운 철학 책을 사놓고 도통 읽을 생각이 없길래 글로 남기면 쓰면서 공부도 할 수 있겠다 싶어 시작합니다. 그럼! 바로 시작합니다. 글을 시작하며. 러셀 서양 철학사는 고대와 중세, 근대와 현대까지 각 시대를 대표한 철학자를 꼽아서 주제별로 간단하게 설명한 다음 분석적으로 비판합니다. 어려운 철학도 알기쉽게 설명해주는 아주 고마운 책! 이라고 할 수 있습니다만... 그래도 어렵더라구요. 핵심은 생각하는 능력을 기르는 것 이라고 생각합니다. 러셀이 주장하는게 모두 다 옳은게 아니라 이 책을 읽고 자신만의 철학을 가지게 되는 계기가 되었으면 좋겠습니다. 철학이란 무엇일까? 너무 거창하게 생각하는 사람들이 많은데요. 사실 그렇게 ..

Prompt 를 이용하여 구구단의 원하는 단을 출력하는 예제입니다. 순서대로 확인해봅시다. { let num, result; document.querySelector(".btn03").addEventListener("click", ()=>{ num = prompt("출력할 구구단 숫자를 입력해주세요!", "2"); // console.log(num); for(let i=1; i

연산자 연산자란 덧셈, 뺄셈, 곱셈, 나눗셈과 같은 연산을 할 때 사용하는 기호입니다. 자바스크립트에서도 이와 같은 연산자를 이용해서 연산 작업을 수행합니다. 산술연산자 산술연산자에는 더하기, 빼기, 곱하기, 나누기, 나머지(%)가 있습니다. 산술 연산자로 연산을 하기 위해서는 연산 대상 데이터가 반드시 2개가 있어야합니다. 종류 기본형 설명 + A+B 더하기 - A-B 빼기 * A*B 곱하기 / A/B 나누기 % A%B 나머지 예제를 통해 산술연산자를 어떻게 사용하는지 확인합니다. 문자 결합 연산자 문자 결합 연산자는 문자형 데이터를 결합할 때 사용합니다. ex) "do it" + "javascript" = "do it javascript"; 처럼 나타냅니다. 대입 연산자 대입 연산자는 연산된 데이터를..

Flexbox는 모던 웹을 위하여 제안된 기존 레이아웃보다 더 세련된 방식의 니즈를 부합하기 위한 CSS3의 새로운 레이아웃 방식입니다. flexbox에서 사용하는 속성은 부모요소와 자식요소를 나누어집니다. 전체적인 정렬이나 흐름에 관한 속성은 flex container에서 정의하고 자식 요소의 크기나 순서와 관련된 속성은 flex item에서 정의합니다. 이를 분리해서 적용하는 것이 flex-box에서 가장 중요합니다. flex container 속성 : flex-direction, flex-wrap, justify-content, align-items, align-content flex item 속성 : flex, flex-grow, flex-shrink, flex-basis, order 속성 설명 ..