CSS (1)

수경, Sugyeong·2021년 9월 13일

CSS TIL

HTML/CSS

목록 보기

3/6

의미, 정의

선택자

박스 모델

🥝 의미, 정의

CSS(Cascading Style Sheets)는 HTML 또는 XML(SVG, MathML 또는 XHTML과 같은 XML 방언 포함)로 작성된 문서의 표현을 설명하는 데 사용되는 스타일시트 언어다.

웹사이트 스타일링 시 크게 Author style, User style 그리고 Browser의 3가지로 나누어볼 수 있다.

Author style
우리가 작성하는 style sheet이며 우리가 웹사이트를 만들 때 제공하는 CSS 파일을 의미한다.
User style
사용자가 스타일링을 할 수 있다는 의미이다. 가령 브라우저 상에서 Dark mode를 설정하거나 글자 크기 등을 조정하여 스타일링을 바꿀 수 있다.
Browser
브라우저 상에서 기본적으로 지정된 스타일이 있다는 의미이다.

Cascading은 우리가 정의한 Author style이 최고의 우선 순위를 가진다. 우리가 정의한 스타일링이 없다면 바로 User style로 넘어간다. 사용자가 지정한 스타일링이 없다면 바로 Browser 상에서 기본적으로 지정된 스타일로 넘어가게 된다.

Author style > User style > Browser

Cascading 의 사전적 의미가 to flow downwards in large amounts이다. 즉 폭포처럼 많은 양이 아래로 향해 흐르다 임을 연결시켜 생각해본다면 이해하기 수월할 것이다.

🥝 선택자

HTML의 <body> 내부에서 여러 섹션들로 나누어서 잘 정리를 해두는 이유는 레이블링을 쉽게 하기 위해서이다. 레이블링이 잘 되어 있다면 CSS로 꾸밀 때 고르기 쉽다. HTML의 태그를 고를 때 함께 사용하는 것이 선택자(Selectors)이다.

선택자에는 6가지 종류가 있다.

* Universal(전체)
Tag type
#id ID
.class Class
: State
[ ] Attribute

CSS 선택자 입력 방법

selector {
  property: value;
}

아래는 위 6가지 선택자 종류의 예시이다.

참고) <a> 태그의 속성 값인 [href]를 조정하는 여러 방법이 있다.
1)

a[href="www.naver.com"] {
  color: grey;
}	// 위 링크를 가진 <a> 태그의 컬러만 회색으로 변한다.

a[href^="www"] {
  color: grey;
}	// 링크가 www 로 시작하는 <a> 태그의 컬러만 회색으로 변한다.

a[href$=".com"] {
  color: grey;
}	// 링크가 .com 으로 끝나는 <a> 태그의 컬러만 회색으로 변한다.

🥝 박스 모델

CSS에 있는 모든 것은 박스 형태로 둘러싸여 있으며, 이러한 박스 모델을 이해하는 것은 CSS로 레이아웃을 만들거나 항목을 다른 항목과 정렬하는데 있어 중요한 핵심이다.

아래는 박스 모델 예시이다. 박스 모델을 이해하기 위해서는 개발자 도구 F12 혹은 Ctrl+Shift+I 로 확인할 수 있다.

content
너비(width) 및 높이(height)와 같은 속성을 사용하여 크기를 조정할 수 있는 content가 표시되는 영역이다.
padding
padding은 content 주위에 공백으로 표시된다. content 안에 들어가는 주위 여백 공간이라고 생각하면 된다. 크기는 padding 및 관련 속성을 사용하여 제어할 수 있다.
border
content와 padding을 감싼다. 테두리 및 관련 속성을 사용하여 크기와 스타일을 제어할 수 있다.
margin
margin은 이 박스 형태와 다른 요소 사이의 공백을 의미하며 content, padding 및 border를 감싸는 가장 바깥쪽 층이다. 크기는 여백 및 관련 속성을 사용하여 제어할 수 있다.

아래 예시와 같이 콘텐츠의 높이와 너비, 패딩, 마진, 보더값을 구성할 수 있다.

.red {
  width: 100px;
  height: 100px;
  padding: 20px;
  padding-top: 100px;
  padding-right: 100px;
  padding-bottom: 100px;
  padding-left: 100px;
  margin: 20px;
  border-width: 2px;
  border-style: solid;
  border-color: blue;
  background: yellow;
}

위의 코드는 아래와 같이 한 번에 작성하여 코드의 양을 줄일 수 있다.

.red {
  width: 100px;
  height: 100px;
  padding: 20px 20px 20px 20px;
  // 시계방향으로 top-right-bottom-left
  // 혹은 padding: 20px(top-bottom) 0px(right-left); 으로 표현 가능하다.
  margin: 20px;
  // margin 도 padding 과 동일하게 작성할 수 있다.
  border: 2px solid blue;
  background: yellow;
}