멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 9 (CSS 기초, 선택자, 상속과 겹침, 우선순위 규칙)

 

 

목차

• CSS 기초
• CSS 문법
• CSS 선택자
• CSS의 세 가지 개념
• 오늘 하루를 돌아보며

 

CSS 기초

CSS란?

CSS(Cascading Style Sheet)는 마크업 언어가 실제로 표시되는 방법을 기술하는 언어다. 글꼴, 여백, 배경 이미지 등 HTML 문서의 레이아웃과 스타일을 정의한다.
Cascading: 겹쳐서 사용. 마지막 정의한 게 적용된다.

Style Sheet: 스타일을 정의함. 워드프로세서 등에 사용했던 개념이다.

CSS를 사용하면서 문서의 구조와 표현을 분리할 수 있게 됐다. 구조를 바꾸지 않고도 CSS를 어떻게 적용하느냐에 따라 콘텐츠가 다르게 보일 수 있다.

CSS Zen Garden: The Beauty of CSS Design

 

 

CSS의 과거와 현재

• 1996년 W3C의 주도 하에 첫 CSS 버전인 CSS Level 1을 발표했다. (HTML은 93년 발표)
• 1998년 CSS Level2가 등장하면서 대부분의 웹 브라우저들이 CSS Level2를 지원하기 시작했다. CSS1보다 훨씬 풍부해졌다.
• 2006년 CSS Level2의 버그를 수정한 CSS Level2.1을 발표하고, 현재까지 표준으로 사용되고 있다.
• CSS Level3는 CSS Level 2.1과 달리 모든 명세가 포함된 버전이 아닌 모듈 단위로 개발되고 있다.

 

웹표준 개발 단계

Draft(초안 FPWD) > Working Draft(작업 초안 WD) > Candidate Recommendation(권고 후보 CR) > Proposed Recommendation(최종 권고안 PR) > Recommendation(권고안 REC)

W3C 홈페이지에서 확인할 수 있다.

CSS current work & how to participate

 

웹 브라우저마다 지원하는 CSS가 다르기 때문에 호환성 체크를 해야 한다.

The CSS3 Test

 

CSS 문법

CSS의 기본 문법은 크게 선택자(selector)와 선언부(declaration block)로 이루어지며, 선언부는 속성(property)과 속성 값(value)으로 구성되어 있다. html은 선언부를 공백으로 구분했다면, css는 ;(새미콜론)으로 구분한다.

sesector{property: value; property: value;}

 

html에서 말하는 속성인 attribute는 태그가 가질 수 있는 특성을 의미하고, css에서 말하는 속성인 property는 추가적인 정보를 줄 수 있는 속성을 의미한다.

@로 시작하는 선언문을 at sign rule이라고 한다. 규칙을 선언할 때 사용한다.

 

 

CSS를 적용하는 3가지 방법

• External Style Sheet - CSS 파일을 따로 만들어서 HTML 파일에 연결하는 방법. HTML 파일에서는 link 요소를 사용하고, CSS 파일에서는 @import 명령을 사용한다.
• Embedded Style Sheet - 별도로 CSS 파일을 따로 만들지 않고, HTML 파일 안에 CSS 코드를 직접 포함하는 방법. style 요소 안에 CSS 코드를 선언한다.
• Inline Style Sheet - 특정 HTML 요소에 style 속성을 사용하여 CSS 코드를 선언하는 방법. 선택자의 우선순위가 가장 높기 때문에 스타일 재정의가 어렵거나 불가능한 경우가 발생할 수 있어서 사용에 주의해야 한다.

 

CSS 주석 및 단위

CSS에서 주석은 /*로 시작해서 */로 끝난다.

 

CSS의 단위는 문자열 타입, 숫자 타입, 길이 단위 타입 등 다양한 유형이 있다.

• 문자열 타입: 미리 정의된 키워드, 제작자가 정의한 저작자 키워드 등 텍스트로 입력하는 속성 값. 예) font-size: small;
• 숫자 타입: 개수, 비율 등을 나타낼 수 있는 정수, 실수, 퍼센트 값
• 길이 단위 타입: 상대 길이에 비율로 정해지는 상대 길이 단위 값과 절대적으로 정해진 절대 길이 단위 값이 있다.
  • 상대 단위: em(폰트의 기본 크기 값에 비례한 단위), rem(최상위 요소의 폰트 크기에 비례한 단위), vw(뷰포트 너비에 비례한 단위), vh(뷰포트 높이에 비례한 단위)
  • 절대 단위: cm, mm, in, px, pt 등

CSS에서 사용할 수 있는 색상 값도 다양하다.

• 색상명: yellow, red 등 색상의 이름
• transparent: 색상을 투명하게한다. 영역은 존재하지만 색상만 투명하다.
• currentcolor: 상속받은 색깔을 적용한다.
  • DOM(Document Object Model) Tree에 따라 부모, 형제 요소들이 있고, 부모 요소의 속성이 자식 요소에 상속(inherit)된다.
• 16진수 RGB 색상 값: #fc10ab, #333
• 256 단계 색상 값: rgb(255, 0, 0)
  • 요즘 쓰는 방법: rgb(0 0 255 /0.5) - 마지막 / 뒤에 오는 숫자는 투명도
• 백분율(%) RGB 생상 값: rgb(100%, 0%, 0%)
• RGBA, HSLA 색상 값: 마지막 A(alpha)는 투명도를 나타낸다.

 

CSS 선택자

CSS는 HTML 요소를 선택하는 다양한 방법을 제공한다. 여러 선택자에 동일한 스타일을 적용하고 싶다면 쉼표로 구분한다.

전체 선택자(universal selector)

*(asterisc, 와일드 카드)를 선택자에 입력하면 모든 요소를 선택하여 스타일을 적용한다.

/* font-family는 폰트의 우선순위를 정해준다.
첫 번째 폰트가 없으면 그 다음, 없으면 그 다음, 없으면 그 다음...
마지막에 sans-serif는 잊지 말고 넣어줘야 한다.
브라우저의 기본 글꼴이 serif기 때문이다. */
* {
  font-family: ..., sans-serif;
}

 

 

요소 선택자(Type Selector)

HTML 요소 이름(태그명)을 사용하여 스타일을 적용한다.

p {
  color: hsla(110, 50%, 50%, 0.5);
}

 

클래스 선택자(Class Selector)

class 속성을 가진 요소의 스타일을 정의한다. class 이름 앞에 '.'을 붙인다.

.class {
  font-size: red;
}

 

 

아이디 선택자(ID Selector)

id 속성을 가진 요소의 스타일을 정의한다. id 값 앞에 #을 붙인다.

#id {
  background-color: yellow;
}

 

속성 선택자(Attribute Selector)

해당 속성을 가진 모든 요소에 스타일을 적용한다. 정의할 때 속성은 []로 감싼다. 속성 앞에 요소를 명시하면 해당 속성을 가진 특정 요소에 적용할 수 있다.

/* title 속성을 가진 모든 요소에 적용 */
[title] {
  border: 1px solid black;
}

/* title 속성을 가진 모든 p 요소에 적용 */
p[title] {
  color: green;
}

 

 

자손 결합자(Descendant Combinator)

두 개(또는 그 이상)의 선택자를 조합하여, 가장 마지막 선택자의 조상으로 앞쪽 선택자가 존재할 경우 마지막 선택자에 스타일을 적용한다. 선택자 사이는 공백으로 구분한다. 요소 외에 class나 id, 전체 선택자도 넣을 수 있다.

/* div 요소를 조상으로 둔 p 요소에 적용 */
div p {
  padding: 10px;
}

 

자식 결합자(Child Combinator)

두 개(또는 그 이상)의 선택자를 조합하여, 가장 마지막 선택자의 부모 요소로 앞쪽 선택자가 존재할 경우 마지막 선택자에 스타일을 적용한다. 범위가 부모와 직계 자식만으로 한정된다. 부모 요소와 자식 요소 사이는 > 기호로 구분한다.

/* ul 요소를 부모로 둔 모든 li 요소에 적용 */
ul > li {
  border: 1px solid green;
}

 

 

인접 형제 결합자(Next-sibling combinator)

두 개(또는 그 이상)의 선택자를 조합하여, 가장 마지막 선택자의 인접한 요소로 앞쪽 선택자가 존재할 경우 마지막 선택자에 스타일을 적용한다. 선택자는 + 기호로 구분한다.

/* h2와 형제이면서 바로 붙어 있는 p 요소에 적용 */
h2 + p {
  font-style: italic;
}

 

일반 형제 결합자(Subsequent-sibling combinator)

두 개의 선택자를 조합하여, 뒤쪽 선택자의 형제 요소로 앞쪽 선택자가 존재할 경우 해당하는 모든 선택자에 스타일을 적용할 수 있다. 선택자는 ~ 기호로 구분한다.

/* div 요소를 형제로 가진 모든 p 요소에 적용 */
div ~ p {
  font-weight: 700;
}

 

 

가상 요소(Pseudo Elements)

가상 요소는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 적용한다. 예를 들어 ::first-line, ::first-letter 등의 가상 요소 선택자를 이용하면 첫번째 줄이나 첫번째 글자 등에만 스타일을 적용한다.

실제 DOM에는 존재하지 않지만, CSS를 통해 가상으로 생성된 요소다. 가상 요소는 반드시 content 속성을 써야 한다.

/* section 요소의 첫 자식으로 삼는 요소를 가상으로 만든다. */
section::before {
  content: '멋쟁이 사자처럼';
  clolor: red;
}

 

CSS의 세 가지 개념

상속(Inheritance)

자식 요소는 부모 요소에게 스타일을 상속받을 수 있다. 부모 요소에 스타일이 적용되면 자식 요소도 같은 스타일이 적용된다.

<div>
  <h2>제목</h2>
  <p>내용</p>
</div>

예를 들어, 위와 같은 구조에서 div 요소에만 스타일을 정의해도 div, h2, p 요소 모두에 스타일이 적용된다.

다만, 모든 스타일이 상속되는 것은 아니다. 대부분의 꾸미는 요소는 상속이 되고, 배치나 박스에 영향을 주는 것들은 상속이 안 된다.

inherit: 부모 요소의 스타일을 상속받는 속성 값이다.

 

겹침(Cascade)

원래 갖고 있는 기본 스타일과 상속된 스타일이 겹칠 수 있다. 또는, 조상들로부터 겹쳐서 상속받을 수도 있다. 원래 갖고 있는 기본 스타일이 우선이고, 만약 없다면 가장 가까운 조상의 스타일이 최종 적용된다.

 

 

우선순위(Specificity)

같은 요소에 스타일을 두 번 정의해서 겹친다면 더 나중에 선언한 것을 우선한다. 선택자마다 가중치(누가 더 구체적인지)가 있다. 구체적일수록 우선순위가 높다. 가중치를 계산하는 방법이 따로 있지만, 간단히 보자면 다음과 같다.

인라인 스타일 시트(가중치: 1,000) > id(가중치: 100) > class(가중치: 10) > type(가중치: 1)

!important가 있는 선언은 일반 선언을 무시하고 항상 우선한다.

 

 

오늘 하루를 돌아보며

CSS의 기초를 배우고 나니, 왜 html 구조를 짤 때 디자인에서는 보이지 않던 h1을 만들었는지 이해가 됐다. CSS에서 폰트 사이즈를 변경할 수 있기 때문에 디자인에 따라 글씨가 크다고 h1을 주는 게 아니라 문맥을 보고 문맥상 제목에 h1을 줘야 한다. 디자인에 제목이 없다면, 제목을 만들어 줘야 한다.

 

상속, 겹침, 우선순위도 옷을 껴입는 식으로 이해하면 편하다. 상속은 엄마나 할머니가 물려주신 옷이다. 조상이 입는 옷을 나도 입는 거다. 겹침은 상속받은 옷이 있어도 내가 내 스타일의 옷을 갖고 있다면 내 옷이 우선한다. 우선순위는 내가 더 나중에 입는 옷이 최종 결정한 옷일 거고, 가중치를 따지자면... 인라인 스타일 시트는 내가 직접 고른 옷, id는 하나만 있는 옷, class는 비슷한 분위기의 옷, type은 그냥 옷?으로 봐도 되지 않을까? 물론, 옷으로 비유하기에 완벽하진 않지만, 개념을 이해하는 데 도움이 된다.