Today Hailie Learned

구체성이란? 선택자를 얼마나 명시적으로 선언했느냐를 수치화한 것이다. 구체성의 값이 높을수록 우선되어 적용된다. 구체성은 4개의 숫자 값으로 이루어져 있습니다. 값을 비교할 때는 좌측에 있는 값부터 비교하며, 좌측 부분의 숫자가 클수록 높은 구체성을 갖습니다. 구체성은 아래의 규칙대로 계산됩니다. 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값 (각 자리는 서로 독립적이기 때문에 영일영영으로 읽는다. ) 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소 전체 선택자는 0, 0, 0, 0을 가진다. 조합자는 구체성에 영향을 주지 않는다. (>, + 등) h1 { ... } /* 0,0,0,1 */ bo..

.hidden { display: none; } 공간 자체가 없어진다. .not-visible { visibility: hidden; } 있던 공간은 그대로 둔다.

가상 요소는 가상 클래스와 비슷하다. 가상 요소(pseudo element) 가상 요소는 HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여할 수가 있습니다. 가상 요소도 가상 클래스처럼 문서 내에 보이지 않지만, 미리 정의한 위치에 삽입되도록 약속이 되어있습니다. 선언 방법은 가상 클래스와 같게 콜론을 사용하며, CSS3부터는 가상 클래스와 가상 요소를 구분하기 위해 가상 요소에는 ::(더블 콜론) 기호를 사용하기로 했습니다. 하지만 하위 브라우저에서 :: 문법을 지원하지 않는 문제가 있으므로 상황에 따라 : 기호를 사용해야 한다. :before : 가장 앞에 요소를 삽입 / 요소 내에 가장 첫 번째 자식으로 삽입이 되는 것. :after : 가장 뒤에 요소를 삽입 / 요소 내에서 가장 마지막 자..

가상 선택자 (pseudo selector) = 문서에 존재하지 않는 요소에 스타일을 부여할 수도 있고, 특정 요소의 상태를 미리 추정해서 가상의 클래스로 스타일을 적용시킬 수도 있는 선택자이다. * 가상 클래스 (pseudo class) * 가상 요소 (pseudo element) 가상 클래스(pseudo class) 가상 클래스는 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스입니다. 우리가 직접 요소에 클래스를 선언하는 것은 아니고, 약속된 상황이 되면 브라우저 스스로 클래스를 적용해줍니다. 예를 들어, 가 있다고 가정하겠습니다. 이 에 마우스 커서를 올렸을 때만 특정 스타일을 주고 싶다고 한다면 어떻게 해야 할까요? 가상 클래스가 없다면 이런 과정을 거치게 됩니다. 임의의 클래스 선택..

선택자 중에는 문서의 구조를 이용하여 요소를 선택하는 선택자도 있습니다. 문맥이나 요소의 구조를 기반으로 하여 선택자를 조합하는 것을 "조합자" 또는 "결정자" 라고 부릅니다. 이 조합자를 이용하면 문서 구조를 이용해 좀 더 유연하게 요소를 선택하고 스타일을 적용할 수 있습니다. 문서 구조의 이해 선택자와 문서의 관계를 이해하기 위해 먼저 어떻게 문서가 구조화되는지를 다시 한 번 살펴보겠습니다 부모와 자식 조상과 자손 형제 - 같은 부모를 가지고 있는 요소들은 서로 형제 관계에 있습니다. 문서 구조 관련 선택자 문서 구조를 이용한 선택자는 3가지 있습니다. 자손 선택자와 자식 선택자 그리고 인접 선택자입니다. 문서 구조를 잘 이해하셨다면 쉽게 예측할 수 있습니다. 자손 선택자 Hello, everyone..

선택자의 조합 /* 요소와 class의 조합 */ p.bar { ... } /* 다중 class */ .foo.bar { ... } /* id와 class의 조합 */ #foo.bar { ... } 첫 번째는 이면서 class 속성에 bar가 있어야 적용. 두 번째는 class 속성에 foo와 bar가 모두 있어야 적용. 마지막은 id가 foo이며 class가 bar인 요소에 적용. 속성 선택자 단순 속성으로 선택 css p[class] { color: silver; } p[class][id] { text-decoration: underline; } html Hello CSS HTML 속성 선택자는 대괄호를 이용해서 선언하며 대괄호 안에 속성 이름이 들어갑니다. 요소에 해당 이름의 속성이 있다면 해당 사..

class 선택자 요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법은 class 선택자를 활용하는 것입니다. class 선택자를 사용하기 위해서는 HTML을 수정해 class 속성을 추가해야 합니다. class 속성은 글로벌 속성이므로 어느 태그에서도 사용할 수 있습니다. css .smile { font-size: 30px; } html ... 위 코드처럼 의 class 속성의 값으로 "smile"라는 값을 넣었다면, CSS에서 그 값("smile")을 선택자로 지정하면 됩니다. 클래스 선택자를 쓸 때는, 맨 앞에 .(마침표)를 찍어야한다. 이렇게 되면 어느 요소든지 class 속성값이 "smile"로 선언된 요소가 있다면 해당 스타일 규칙을 적용받게 됩니다. 다중 class cla..

선택자는 복잡하고 다양한 요소들 사이에서 내가 원하는 요소만을 선택할 수 있도록 도와준다. 완성도 있는 디자인을 표현하기 위해서는 반드시 내가 원하는 요소를 선택할 수 있어야 하기 때문에 선택자는 매우 중요!! 요소 선택자 선택자 중에 가장 기본이 되는 선택자이며, 태그 선택자라고도 합니다. h1 { color: yellow; } h2 { color: yellow; } h3 { color: yellow; } h4 { color: yellow; } h5 { color: yellow; } h6 { color: yellow; } 요소 선택자는 위 코드처럼 선택자 부분에 태그 이름이 들어갑니다. 문서 내에 선택자에 해당하는 모든 요소에 스타일 규칙이 적용됩니다. 선택자는 그룹화가 가능하다! (쉼표 사용) h1,..

css란 Cascading Style Sheets(CSS) 웹 페이지를 사람에 비유해보자면, 마크업 언어(HTML)는 몸의 구조(뼈, 근육)를 담당하고 CSS는 옷과 신발과 같이 외적으로 꾸며주는 역할을 한다고 생각하면 이해하기 쉽습니다. CSS와 HTML CSS는 간단히 이야기하면 HTML(마크업 언어)을 꾸며주는 표현용 언어입니다. HTML이 문서의 정보, 구조를 설계한다면 CSS는 문서를 보기 좋게 디자인합니다. CSS는 분명히 HTML과는 독립된 다른 언어지만 마크업 문서 자체가 존재하지 않으면 CSS는 무용지물이나 마찬가지입니다. 왜냐하면, CSS는 표현을 위한 언어인데 마크업 문서가 없다면 표현할 대상이 없기 때문입니다. 그래서 CSS는 보통 마크업 언어인 HTML과 같이 묶어서 이야기합니다...

검색 엔진 최적화란? HTML 코드에서 정보를 모아 검색 키워드에 맞는 적절한 웹사이트 구성하여, 검색 결과의 상위에 나올 수 있도록 하는 작업입니다. 해당 웹페이지의 내용을 파악하고 검색엔진에 노출이 잘되도록 하기 위해서는 HTML 요소를 적절하게 사용한 시멘틱한 마크업이 필요합니다. 시멘틱 마크업 이란? 시멘틱 마크업은 종종 POSH(Plain Old Semantic HTML)라고도 불리는데, 단어 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻입니다. 시멘틱은 즉, 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻합니다. 애초에 프로그래밍 언어는 사람과 기계와의 정해진 약속이며 HTML 역시 마찬가지입니다. 시멘틱 마크업은 적절한 HTML 요소를 올바르게 사용하는 것에서 시작합니다...