CSS: 정의, 적용, 박스모델
florent의 개발 적응기
이 글의 주요 내용
[CSS란?]
[CSS를 작성하는 법: 인라인(inline), 인터널(internal), 외부 파일 호출(External)]
[CSS 선택자(selector)]
[CSS 속성에 관한 TMI]
[박스 모델 (Box Model)]
[CSS란?]
Cascading Style Sheets의 약자
Cascading이란, 폭포수가 위에서 아래로 흐르듯이 위부터 아래의 순서로 흐르는 것을 의미함 → 따라서 Cascading Style Sheets란, 웹페이지의 스타일 코드가 위에서 아래 방향의 계단식 순서로 적용됨을 의미
[CSS를 작성하는 법: 인라인(inline), (internal), 외부 파일 호출(External)]
(1) 인라인 CSS(inline CSS): HTML 태그 내 CSS
인라인 CSS 코드는 **HTML 태그 내 ‘style 속성(attribute)’을 사용
인라인 CSS 코드는 HTML 내 특정 요소(element)를 대상으로 스타일을 적용할 때 유용하지만, 일반적으로 권장되지 않음 ⇒ 실제로 프론트엔드 작업을 할 때, 공통의 스타일을 갖춰 클래스(class)를 기준으로 스타일을 적용하기 때문
(2) 인터널 CSS (internal CSS): HTML 태그형 CSS
인터널 CSS는 HTML ‘style 태그’를 사용하며, 스타일을 적용하고자 하는 선택자(selector)를 지정한 후 스타일을 작성해야 함
인터널 CSS 또한 인라인 CSS처럼 다중 페이지 웹사이트에 활용하기에는 적합하지 않으나, 단일 페이지를 만드는 경우엔 유용하게 사용할 수 있음
(3) 익스터널 CSS (external CSS): 외부 파일형 CSS
익스터널 CSS는 별도의 CSS 파일(ex. style.css)에 스타일 코드를 작성한 것으로, HTML 파일에서 <link> 태그를 통해 파일을 연결시킴
[CSS 선택자(selector)]
요소(element) 선택자: 특정 요소를 대상으로 스타일을 적용하며, ‘요소명 { 스타일 }’로 작성
클래스(class) 선택자: 클래스는 HTML 요소에 할당된 클래스 속성이며, 스타일을 적용하기 위해서는 ‘.클래스명 {스타일}’형태로 작성
ID 선택자: 클래스 선택자와 비슷하게 작동하지만, ID의 값은 중복될 수 없기 때문에 단 하나의 요소에만 적용할 수 있으며, ‘#ID {스타일}’ 형태로 작성
속성(attribute) 선택자: 특정 속성을 포함하는 모든 요소에 스타일을 적용하며, ‘요소명[속성명] {스타일}’ 형태로 작성
전체 선택자: 모든 요소에 스타일을 적용하며 ‘* {스타일} 형태로 작성
[CSS 속성에 관한 TMI]
색상
기본적으로 제공되는 텍스트값(ex. blue)으로 적용할 수도 있지만, rgb(r, g, b)나 #hexcode로도 적용 가능
background-color: HTML의 배경 색상
color: 요소의 텍스트 색상
크기, 글꼴 관련 속성과 단위
font-weight: 텍스트값(ex. normal, bold)나 숫자값(ex. 100~900)으로 글꼴의 굵기 설정
font-family: 특정 글꼴로 설정
text-align: center, left, right과 같은 텍스트 값으로 HTML 내 텍스트를 정렬
1px = 1/96 inch = 0.26mm
1pt = 1/72 inch = 0.35mm
1em = 상위 요소(=부모)의 100% → 부모의 값을 비율에 따라 따름
1rem = 루트(HTML 글꼴 크기를 기준으로 삼음)의 100%
[박스 모델 (Box Model)]
HTML 요소는 기본적으로 ‘박스’ 형태로, 컨텐츠(content), 패딩(padding), 테두리(border), 마진(margin)이라는 공간으로 구성
Content (콘텐츠): 요소의 실제 내용이 들어가는 부분, 텍스트나 이미지가 이 영역에 포함
Padding (패딩): 콘텐츠와 테두리 사이의 공간, 패딩은 요소의 배경 색상과 함께 표시 = ‘요소의 내부 여백’
Border (테두리): 콘텐츠와 패딩을 둘러싼 테두리 → 테두리의 두께, 스타일, 색상을 설정 가능
Margin (마진): 요소와 다른 요소 사이의 ‘외부 여백’ → 마진은 투명하며, 요소 주위에 공간을 추가하여 ‘다른 요소와의 간격을 조정’
콘텐츠 구분 요소 <div>: 콘텐츠를 구분하기 위해 사용되며, 여러 요소를 원하는 만큼 포함 가능 → 컨테이너 역할
