남하준의 웹스토리 웹스토리

selector CSS에서는 스타일을 적용할 대상을 선택하기 위해서 선택자(selector)를 사용합니다. 지금까지 살펴본 대표적인 선택자는 다음과 같습니다. 전체 선택자 HTML 요소 선택자 아이디(id) 선택자 클래스(class) 선택자 그룹(group) 선택자 전체 선택자 CSS를 적용할 대상으로 HTML 문서 내부의 모든 요소를 선택합니다. HTML 요소 선택자 CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있습니다. 아이디(id) 선택자 아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용합니다. 이 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택해 줍니다. 이 부분에 스타일을 적용합니다. HTML과 CSS에서는 ..

const searchBox = document.querySelector("#search-box"); //search-box 변수에 저장 const cssList = document.querySelectorAll(".list ul li"); //다수의 li를 변수에 저장 const cssCount = document.querySelector(".count em"); //전체 li갯수를 표시 cssList.forEach((element, index) => { element.classList.add("show"); cssCount.innerHTML = index + 1; }); searchBox.addEventListener("keyup", () => { //input을 클릭했을 때 이벤트 설정 const ..

const searchBox = document.querySelector("#search-box"); //search-box 변수에 저장 const cssList = document.querySelectorAll(".list ul li"); //다수의 li를 변수에 저장 const cssCount = document.querySelector(".count em"); cssList.forEach((element, index) => { element.classList.add("show"); cssCount.innerHTML = index + 1; }); searchBox.addEventListener("keyup", () => { //input를 클릭했을 때 이벤트 설정 const searchWord = s..

Float float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 줍니다. 이 속성은 본래 위와 같은 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용됩니다. clear 속성 clear 속성은 float 속성이 적용된 이후 나타나는 요소들의 동작을 조절해 줍니다. 컨테이너 요소에 float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들어집니다. 따라서 float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear 속성을 사용하여, 이후에 등장하는 요소들이 더는 flaot 속성에 영향을 받지 않도록 설정해줘야 합니다. overflow loat 속성이 적용된 HTML 요소가 자신을 감싸..

마진(Margin) margin 속성은 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정합니다. 이러한 마진 영역은 패딩 영역과는 달리 background-color 속성으로 설정하는 배경색의 영향을 받지 않습니다. CSS를 사용하면 마진 영역의 크기를 방향별로 따로 설정할 수 있습니다. 마진(margin) 속성 CSS에서는 HTML 요소의 마진 영역을 설정하기 위해 다음과 같은 속성을 제공합니다. 1. margin-top 2. margin-right 3. margin-bottom 4. margin-left 마진 축약 표현(margin shorthand) 모든 margin 속성을 이용한 스타일을 한 줄에 설정할 수 있습니다. (1)4개의 margin 속성값을 가질 때는 top,..

position position 속성은 HTML 요소가 위치를 결정하는 방식을 설정합니다. CSS에서 요소의 위치를 결정하는 방식에는 다음과 같이 4가지 방식이 있습니다. 1. 정적 위치(static position) 지정 방식 2. 상대 위치(relative position) 지정 방식 3. 고정 위치(fixed position) 지정 방식 4. 절대 위치(absolute position) 지정 방식 static HTML 요소의 위치를 결정하는 가장 기본적인 방식은 정적 위치(static position) 지정 방식입니다. position 속성값이 static으로 설정된 요소는 top, right, bottom, left 속성값에 영향을 받지 않습니다. 정적 위치(static position) 지정 방..

레이아웃(Layout) 레이아웃(layout)이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미합니다. 웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소입니다. HTML에서는 다음과 같은 방법으로 레이아웃을 작성할 수 있습니다. 1. div 요소를 이용한 레이아웃 2. HTML5 레이아웃 3. table 요소를 이용한 레이아웃 div 요소를 이용한 레이아웃 div 요소는 CSS 스타일을 손쉽게 적용할 수 있으므로, 레이아웃을 작성하는데 자주 사용됩니다. Header 영역 Nav 영역 Section 영역 Footer 영역 HTML5 레이아웃 HTML5에서는 웹 페이지의 레이아웃만을 위한 별도의 새로운 요소들을 제공합니다. 이러한 요소들을 의미(semantic)..

기본 타입 타입(data type)이란 프로그램에서 다룰 수 있는 값의 종류를 의미합니다. 자바스크립트에서는 여러 가지 형태의 타입을 미리 정의하여 제공하고 있으며, 이것을 기본 타입이라고 합니다. 자바스크립트의 기본 타입은 크게 원시 타입과 객체 타입으로 구분할 수 있습니다. 원시 타입(primitive type)은 다음과 같습니다. 1. 숫자(number) 2. 문자열(string) 3. 불리언(boolean) 4. 심볼(symbol) : ECMAScript 6부터 제공됨 5. undefined 객체 타입(object type)은 다음과 같습니다. 객체(object) 문자열(string) 자바스크립트에서 문자열은 큰따옴표("")나 작은따옴표('')로 둘러싸인 문자의 집합을 의미합니다. 큰따옴표는 작은..