[CSS] 6장: CSS 필수 속성 다루기 (1)

개요

지난 장에서 배운 선택자를 활용하려면 선언부에서 사용할 수 있는 스타일 관련 속성과 속성애서 사용할 수 있는 속성값을 알아야 한다. 그래서 이번에는 두 편에 걸쳐 CSS의 기본적인 특징과 여러 속성을 통해 웹 페이지의 스타일을 효과적으로 제어하는 방법을 살펴본다. 먼저, CSS의 전반적인 특징을 살펴본 후, 텍스트를 꾸미기 위한 다양한 텍스트 속성을 배우게 된다. 이어서, 웹 요소의 레이아웃을 구성하는 핵심 개념인 박스 모델을 이해하고, 이를 활용해 요소의 크기와 배치를 제어하는 방법을 다룬다. 마지막으로, 배경 속성을 통해 웹 요소의 배경을 설정하고, 디자인을 더 다채롭게 만드는 방법을 알아볼 예정이다.

CSS의 특징 살펴보기

기본 스타일 시트 : 웹 브라우저 자체에 내장되어 있는 스타일이 미리 정의된 파일 또는 문서 양식.

적용 우선순위 

사용자 우선 : 사용자가 별도로 정의한 스타일 속성 > 기본 스타일 시트
        ex) 정의되지 않은 것은 기본을 따르되 정의된 것은 사용자 속성을 따름.

    CSS 개별성 규칙 : 아래 표의 점수에 따라 점수가 클수록 우선순위가 높아진다.

CSS 개별성 규칙 점수표

선택자	예	점수
전체 선택자	*	0
태그 선택자	div, p, h1	1
가상 요소 선택자	::before, ::after	1
클래스 선택자	.box, .title	10
가상 클래스 선택자	:hover, :visited, :link	10
아이디 선택자	#title, #main	100
인라인 스타일	style="color:red"	1,000
!important	-	10,000

상속

부모 요소에 적용된 스타일을 자식요소가 그대로 물려받아 적용되는 현상.

단, 모든 속성이 상속되지는 않는다. 

단위

절대 단위 : 어떤 환경이라도 동일한 크기로 보이는 단위(px)

상대 단위 : 부모 요소 또는 웹 브라우저의 창 크기에 따라 상대적으로 결정되는 단위

상대 단위

단위	설명
%	해당 속성의 상위 요소 속성값에 상대적인 크기를 가진다
em	부모 요소의 텍스트 크기에 상대적인 크기를 가진다
rem	html 태그의 텍스트 크기에 상대적인 크기를 가진다
vw	뷰포트의 너비를 기준으로 상대적인 크기를 가진다
vh	뷰포트의 높이를 기준으로 상대적인 크기를 가진다

색상 표기법

• 키워드 표기법 : 색상의 영문명 사용. vs code의 자동완성 기능을 사용하면 유용함.
• RGB 색상 표기법 : rgb(255, 255, 255) 로 코드 입력.
• HEX 색생 표기법 : #ffffff 사용.

텍스트 속성으로 텍스트 꾸미기

font-family 속성

글꼴을 지정할 수 있다. 쉼표로 구분하여 1개 이상의 글꼴을 나열해 지정할 수 있다.
한글이거나 공백이 있는 글꼴명은 큰따옴표로 감싸야 한다.

font-family:BatangChe, "Times New Roman", "궁서체", serif;

마지막에는 글꼴 유형(generic family)를 작성하도록 권장한다. 순차적으로 모든 글꼴을 불러오지 못할 때 마지막에 가장 유사한, 반드시 불러올 수 있는 글꼴을 추가하는 것이 안정적이기 때문이다.

글꼴 유형	설명
serif	삐침이 있는 명조 계열의 글꼴
sans-serif	삐침이 없고 굵기가 일정한 고딕 계열의 글꼴
monospace	텍스트 폭과 간격이 일정한 글꼴
fantasy	화려한 글꼴
cursive	손으로 쓴 것 같은 필기체 계열의 글꼴

font-size 속성

텍스트 크기를 변경할 수 있는 속성.

font-weight 속성

텍스트 굵기를 지정하는 속성. 숫자 표기법과 키워드 표기법을 사용할 수 있다.

font-weight:100; /*100 ~ 900*/
font-weight:lighter /*normal=400, bold=700. lighter,bolder=상대값*/

font-style 속성

글꼴의 스타일을 지정할 때 사용한다.

속성값	설명
normal	기본 형태
italic	이탤릭체
oblique	기울임꼴

italic과 oblique는 적용 방식이 다르지만, 웹 브라우저 상에서는 큰 차이가 나지 않는다.

font-variant 속성

영문 텍스트를 크기가 작은 대문자로 변경할 때 사용한다.

small-caps 속성값을 적용하면 소문자 텍스트가 작은 크기의 대문자로 표시된다.

color 속성

텍스트의 색상을 지정할 때 사용한다. 위에서 배운 색상 표기법을 사용해 원하는 색을 적용할 수 있다.

text-align 속성

텍스트를 정렬할 때 사용한다. 

left, center, right, justify가 있다. 

justify : 양쪽으로 정렬한다. 웹 브라우저 크기에 맞춰 텍스트 간격을 임의로 늘린다.

text-decoration 속성

텍스트에 선을 그을 때 사용한다.

속성값	설명
none	텍스트 장식 없음
line-through	중간을 관통하는 선
overline	텍스트 위에 선
underline	텍스트 아래 선

letter-spacing 속성

자간을 조절할 때 사용한다. normal을 사용하면 기본값이 적용된다.

line-height 속성

텍스트 한 줄의 높이를 지정할 때 사용한다. 역시나 normal이 기본값이고 숫자, 퍼센트, 크기 등을 넣을 수 있다.

박스 모델을 구성하는 속성 다루기

박스 모델 : HTML 요소가 사각형의 박스로 둘러쌓여 있다는 개념.

구성 요소	설명
margin	요소의 외부 여백
border	요소의 테두리
padding	요소의 내부 여백
content	요소의 내용

margin 영역

margin-top: 20px; /*사방으로 각각 설정.*/
margin: 1px 2px 3px 4px; /*상, 우, 하, 좌 서순*/
margin: 1px 2px 3px; /*상, 우, 하*/
margin: 1px 2px; /*상하, 좌우*/
margin: 1px; /*사방 동시적용*/

박스 모델에서 가장 외부에 있는 영역. 외부 여백 담당. 기본은 16px이다.

같은 레벨(형제 관계)에 있는 요소들의 margin 영역이 중첩되면 더 큰 값을 가진 margin 영역으로 병합되어 출력된다.

border 영역

margin보다 안쪽에 있으며, 요소의 테두리(경계선)을 담당한다.

border:<border-width> <border-style> <color>;

내부 속성들을 별도로 작성하면 따로 속성을 적용할 수도 있다.

# border-style 속성

padding 영역

padding-top: 20px; /*사방으로 각각 설정.*/
padding: 1px 2px 3px 4px; /*상, 우, 하, 좌 서순*/
padding: 1px 2px 3px; /*상, 우, 하*/
padding: 1px 2px; /*상하, 좌우*/
padding: 1px; /*사방 동시적용*/

요소의 내부 여백. 속성은 margin과 형식이 거의 같다.

content 영역

텍스트 관련 스타일 속성 = content 영역 제어 속성.

width 와 height 속성 : content 영역의 너비와 높이를 정해준다.

하지만, 이 속성은 "요소"의 너비와 높이는 아니다. 그 이유는 요소의 너비와 높이는 content, padding, border를 모두 포함하기 때문이다. 따라서 요소의 크기를 쉽게 정의하려면 box-sizing 속성이 필요하다.

속성값	설명
content-box	width, height의 속성 적용 범위를 content 영역으로 제한
border-box	width, height의 속성 적용 범위를 border 영역으로 제한

 

박스 모델의 성격과 display 속성

• 블록 성격 : 요소의 너비가 항상 가로 한줄을 다 차지한다.
• 인라인 성격 : 요소의 너비를 콘텐츠 크기만큼만 차지한다.
• 인라인 블록 성격 : 요소의 너비는 인라인 성격을 따르되 그 외는 블록 성격을 따른다.
• 비교 :
  블록과 인라인블록 성격은 width, height, margin,padding 속성이 모두 적용.
  인라인 성격은 width, height이 적용되지 않음.
• display 속성 : 위에서 설명한 박스모델을 사용자 정의로 변경 가능.

배경 속성으로 요소의 배경 설정하기

background-color 속성

배경세 색상을 넣을 수 있는 속성. 텍스트 때 배운 색상값을 사용하면 된다.

background-image 속성

요소의 배경에 image를 넣을 수 있다. 속성값은 이미지의 경로를 url 함수로 지정한다.

주의 사항 : 
    1. 요소의 배경 크기가 존재해야 한다. (width, height.)
    2. 이미지의 크기가 요소의 배경 크기와 맞지 않으면 어색하게 보인다. (이미지가 잘리거나, 남는 만큼 반복됨.)

background-repeat 속성

위에서 이미지가 자동으로 반복되는 설정을 바꿀 때 사용한다.

속성값	설명
no-repeat	이미지를 반복하지 않는다
repeat-x	가로방향으로 반복한다
repeat-y	세로 방향으로 반복한다
repeat	이미지가 가로세로 방향으로 반복한다
round	이미지를 반복하되 요소에 딱 맞도록 크기를 자동 조절한다
space	이미지가 잘리지 않도록 반복한다

background-size 속성

배경이 이미지보다 작을 때 잘리는 문제를 해결할 수 있다.

형식 : background-size:auto|cover|contain|<너비 높이>;

속성값	설명
auto	이미지 크기 유지
cover	이미지 비율을 유지하면서 영역을 꽉 채운다
contain	이미지 비율을 유지하면서 이미지가 요소 안에 완전히 들어가도록 한다
<너비 높이>	이미지의 크기를 직접 지정한다

 

background-position 속성

삽입하려는 이미지의 위치를 정할 수 있다. 단위를 활용해 직접 지정하거나 상하좌우 중앙 밀착이 가능하다.

값을 1개만 사용하면 이 값은 x축 값이 되고 y축은 기본 center가 된다. 

값을 2개 사용하면 각각 x, y축으로 지정된다.

background-attachment 속성

요소에 삽입된 이미지를 스크롤할 때 작동방식을 결정한다.

속성값	설명
local	삽입된 이미지가 요소와 웹 브라우저에서 모두 스크롤된다
scroll	삽입된 이미지가 요소에서는 고정되지만, 웹에서는 스크롤된다
fixed	삽입된 이미지가 요소와 웹 브라우저에서 모두 고정된다

background 속성으로 한 번에 지정하기

이 모든 속성은 한 번에 지정될 수 있다. size만 position뒤에 슬래시와 함께 지정해야 하는 것 제외하고 순서는 무관하다.

background:<color> <image> <repeat> <position/size> <attachment>

마무리

이번 글을 통해 CSS의 기본적인 특징과 다양한 스타일 속성을 공부하면서 웹 페이지 디자인의 기초를 다질 수 있었다. 특히 텍스트 속성과 박스 모델은 요소의 크기와 배치를 효과적으로 제어할 수 있는 중요한 개념임을 다시 한번 느꼈다. 또한, 배경 속성을 통해 웹 요소에 생동감을 더할 수 있는 방법을 배우며, 작은 스타일 변화가 전체 디자인에 큰 영향을 미칠 수 있음을 깨달았다. 앞으로 더 심화된 내용을 학습해 CSS 활용 능력을 발전시켜 나갈 계획이다.