뉴 렉쳐 [웹 표준 기반의 웹 퍼블리싱 HTML5, CSS] 강의 (6) - 스타일과 선택자

HTML5, CSS 강의 27강 ~ 31강 학습 중 메모

 

 27강 스타일 기초 개념

• CSS(Cascading Style Sheet)
• 컨텐트에 스타일 입히는 매우 기본적인 예시.

• 스타일의 종류는 굉장히 많지만, 특정 기준으로 색 변경, 위치 변경 등으로 트리구조로 뻗어나갑니다.
• 모질라 CSS 레퍼런스에서 종류 참고 가능!

 

 28강 선택자

• 특정 태그에 스타일을 부여할 때, 태그 속 style을 직접 정의하는 방식도 있지만,
• 그렇게 한다면 중복 코드가 발생하기 때문에 선택자를 활용합니다.

• Selector
  • 태그명 : 점이나 #이 없을 경우 태그명으로 인식해서 태그를 찾게 됩니다.
  • 아이디 : 태그에 이름이라는 녀석을 부여하여 특정 스타일을 부여하는 방식. #name1 { color:red } 이런 방식!
  • 클래스 : 스타일에서 정의한 .@@라는 클래스 명을 태그 내 그룹명/클래스명을 부여하여 스타일 적용하는 방식
• 클래스보다 아이디가 더 강한 부여권을 가짐!

29강 콤비네이션 연산자 & 30강 Sibling 연산자

• 스타일을 할당하기 전에 먼저 레이아웃에 대한 구상이 우선시됩니다.

• Combination 연산자 & Sibling 연산자

31강 속성 선택자

• <style>
   #main-menu a[href="a.html"] {
          ....
   }
   a 태그의 href 속성 값이 a=html 인 태그에 스타일 부여.
• <#main-menu a[href] { ... }
   a 태그의 href 속성 값을 사용하고 있는 녀석에게 스타일 부여.
• 모질라 MDN 사이트 내 CSS 레퍼런스 를 통해 다양한 스타일 부여 방식을 확인 가능.