4회차 수업 고생한 보람이 있군!

정상희·2025년 3월 6일

CSS 오즈코딩스쿨

코딩공부

목록 보기

14/60

CSS 이어서..

현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

1. 배경

박스에 배경 추가

콘텐츠와 어울리는 적절한 배경을 추가함으로써 콘텐츠를 더욱 돋보이게 만들 수 있다.
박스 모델에 배경으로 추가된 색상이나 이미지 등은 박스 모델의 바깥쪽 여백을 제외한 나머지 영역 안에서 요소의 콘텐츠를 뒷받침한다.

실습

2. 색상 바꾸기

글자 색을 지정할 때는 color 속성을 사용하며, 색 지정 방법은 글자 색, 테두리 색, 배경 색 모두에 대해 동일하다

키워드 : 색상을 나타내는 키워드(영단어)를 입력한다.
rgb 함수 : rgb 함수에 수치를 입력해 색상을 결정한다.
hsl 함수 : hsl 함수에 수치를 입력해 색상을 결정한다.
16진수 값 : 빨강, 초록, 파랑의 비율을 16진수로 표현해 색상을 결정한다.

rgb 함수 사용하는 방법

rgb란 빛의 3원색인 Red, Green, Blue의 줄임말이다. CSS는 빨강, 초록, 파랑 각 색상의 비율을 지정해 색상을 결정할 수 있는 rgb 함수와, 투명도를 추가로 지정할 수 있는 rgba 함수를 각각 지원한다.

hsl 함수 사용하는 방법

hsl 함수는 색조(hue)와 채도(saturation), 그리고 조도(lightness)를 각각 지정해 색상을 결정하는 함수다. 투명도를 추가로 지정하고자 할 때는 hsla 함수를 사용한다.

16진수 값 사용하는 방법

색상을 지정할 때는 해시(#) 기호로 시작하는 여섯 자리 16진수 값을 입력하는 방법을
사용하기도 한다. 이때 입력하는 16진수 값을 ‘RGB 색상 코드’라 부르기도 한다.

실습!

3. 텍스트

글꼴 바꾸기

font-family 속성은 요소에 포함된 텍스트의 글꼴을 정의할 때 사용하는 속성이다.

font-family 속성에는 한 개 이상의 글꼴을 지정할 수 있다. 입력한 글꼴 뒤에 쉼표를 입력한 후에 새로운 글꼴을 이어서 입력하는 방식으로 속성값을 지정하는데, 이 경우 가장 먼저 쓰여진 글꼴부터 우선적으로 요소에 적용된다.

웹 폰트 사용하기

웹 폰트란 컴퓨터 시스템에 해당 폰트가 설치되어 있지 않은 경우에도 웹 서버로부터 이를 제공받아 사용할 수 있는 ‘웹 전용 글꼴’을 뜻한다.

앞서 font-family를 이용한 글꼴 적용 시 잘못 입력된 글꼴이거나 시스템에 설치되어 있지 않은 글꼴인 경우에는 요소에 적용되지 않는다고 설명했는데, 웹 폰트를 사용하면 그러한 문제가 발생하는 것을 방지할 수 있다.

텍스트 꾸미기

루트 요소란 문서의 시작 부분을 뜻하는 것으로, < html > 태그를 의미한다.

실습!

4. 요소의 유형

블록 레벨 요소

자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다.
(ex. div, p, h1 등)

인라인 요소

자기에게 필요한 만큼의 공간만 차지한다.
(ex. span, a 등)

display

display 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의한다.
즉, 요소의 유형을 변경할 수 있다.

5. 문서의 흐름

웹 요소들이 화면에 표시되는 순서는 기본적으로 HTML 문서 내에서 태그가 쓰여진 순서를 따른다.

종이 위에 글을 쓸 때 왼쪽에서부터 오른쪽 방향으로 한 글자 한 글자 써 나가고, 또 글자 수가 채워지면 위에서부터 아래로 줄을 바꿔가며 써 내려가는 자연스러운 흐름에 따라 글을 쓰는 것처럼, 웹 브라우저가 화면 위에 요소를 표시할 때에도 마찬가지로 이를 처리하는 기본적인 흐름이 있다.

요소를 띄우자, float!

CSS의 float 속성은 요소를 문서의 흐름에서 제외시킨 채 부모 요소 또는 루트 요소를 기준으로 위치를 변경한다.

선택된 요소가 문서의 흐름에서 제외되어 상위 요소의 왼쪽 또는 오른쪽 면에 붙는 형태로 배치되도록 하는 특징을 가지고 있다.

사용 가능한 속성값으로는 왼쪽을 뜻하는 left, 오른쪽을 뜻하는 right, 그리고 float을 적용하지 않음을 뜻하는 none이 있다.

실습!

6. 위치 지정하기

position

position은 문서상에 요소를 배치하는 방법을 정의한다.
position이 요소의 배치 방법을 결정하면, top, bottom, right, left가 최종 위치를 결정하는 방식이다.

실습!

z-index ✍️

z-index 속성은 요소의 쌓임 순서(stack order)를 정의할 수 있다.
정수 값을 지정하여 쌓임 맥락(stacking context)에서의 레벨을 정의하는 방식으로 적용되며, 위치 지정 요소에 대해 적용할 수 있는 속성이다.

=> 위치 지정 요소(positioned element)란, position 속성이 정의되어 있는 요소를 말한다.

동일한 위치에 요소들이 배치되면, 요소들은 z축에서 쌓이게 된다.

z-index의 기본값은 auto이며, 정수 값으로 각 요소의 쌓임 순서를 결정한다.
auto는 새로운 쌓임 맥락이 형성되지 않은 자연스러운 상태이다.

콘텐츠가 속 썩일 때 ✍️

요소는 텍스트 또는 다른 요소를 자신의 콘텐츠로 가질 수 있고, 요소 내부의 콘텐츠 양이 많아질수록, 요소는 콘텐츠에 맞게 크기를 조절한다. 그러나 요소의 크기가 정해져 있는 상태에서 내부 콘텐츠의 크기가 요소보다 커지는 상황이 발생하면, 콘텐츠가 요소의 영역 밖으로 벗어나 버리는 ‘넘침 현상’이 발생하기도 한다. 이러한 문제를 해결하기 위해서는 overflow 속성을 사용해야 한다.