🎨 Stylesheet
HTML에 스타일을 입히고 싶으면 CSS로 스타일시트를 작성해서 해당 HTML에 적용하면 된다. 스타일시트 구성은 아래와 같다.
h1(선택자) { color(스타일 속성) : red(스타일 값); }제일 먼저 스타일을 적용할 대상을 설정해야 하는데, 이때 선택자(Selector)를 이용하면 된다.
<!doctype html>
<html lang="ko">
<head>
<title>TITLE</title>
</head>
<style>
h1 {
color: white;
background: black;
}
</style>
<body>
<h1>Hello World..!</h1>
</body>
</html><style> 태그 안에 스타일시트를 작성해서 HTML에 배치하면 되는데 어디에 배치하든 상관없지만, 보통 <head> 태그 안에 두는 것이 관례이다. 그리고 원활한 작업을 위해 스타일시트를 변경할 때마다 실제 적용된 스타일을 보는 습관을 가지도록 하자.
🔍 CSS3 선택자 종류
-
전체 선택자(
*): HTML 페이지 내부 태그 모두를 선택한다. 보통 모든 요소에 공통으로 입히고 싶은 초기 스타일이 있을 경우 사용하면 좋을 듯하다. -
태그 선택자(
태그): 특정 태그들을 모두 선택한다. -
아이디 선택자(
#아이디): 특정 아이디를 가진 태그를 선택한다. 아이디는 웹 페이지 내부에서 중복되면 안 되기 때문에 특정 태그 하나에 스타일을 입히고 싶을 때 사용하자. -
클래스 선택자(
.클래스): 가장 유용하고, 가장 많이 사용되는 선택자다. 특정 클래스가 붙어 있는 모든 태그들에 적용된다. -
속성 선택자(
선택자[속성],선택자[속성=값]): 특정한 속성을 가진 태그나 그 속성이 특정 값을 가지고 있는 태그들을 선택할 수 있다. -
자손 선택자(
선택자A > 선택자B): 지정한 태그를 기준으로 바로 아래 단계에 위치한 태그들에 적용된다. 여기서 기준이 중요하다. 기준이 누구냐에 따라 해석이 달라질 수 있다. -
후손 선택자(
선택자A 선택자B): 지정한 태그 아래에 있는 모든 태그들에 적용된다. -
반응 선택자: 사용자의 실제 반응으로 생성되는 특정한 상태를 선택한다. 마우스로 클릭한다든지(
active), 마우스를 올려 놓는다든지(hover), 여러가지가 있을 수 있다. -
상태 선택자: 입력 양식의 상태를 선택할 수도 있다.
🧩 CSS 배치 속성
CSS 배치 속성은 HTML 요소를 화면에 어떻게 보여주고, 어떤 방식으로 배치할지를 결정하는 속성이다. 대표적으로 알아야 할 개념이 display 속성인데, 이 속성은 요소를 Block으로 배치할지, Inline으로 배치할지 결정한다.
- Block 요소 : 한 줄을 통째로 독차지하는 형태로 배치된다. 즉, 요소 하나가 배치되면 자동으로 줄바꿈이 일어나고, 다음 요소는 그 아래 줄에 위치하게 된다. 대표적으로
div,p,h1같은 태그가 이에 해당된다. - Inline 요소: 줄바꿈 없이 한 줄 안에서 물 흐르듯이 배치된다. 마치 글자처럼 옆으로 이어지기 때문에, 여러 요소가 같은 줄에 나란히 놓일 수 있다. 대표적으로
span,a태그가 있다.
블록과 인라인 개념이 왜 필요한가? 웹 페이지에서 요소를 원하는 위치에 배치하려면, 각 태그가 어떤 방식으로 공간을 차지하는지 알아야 한다. 즉, block과 inline의 차이를 이해해야 화면을 더 보기 좋고 의도한 형태로 구성할 수 있다.
CSS에서 모든 HTML 요소는 기본적으로 하나의 박스(Box)로 생각할 수 있다. 이를 박스 모델이라고 하는데, 아래와 같은 구조로 이루어진다.
- content(요소 내용) : 실제 텍스트나 이미지가 들어가는 영역
- padding : 내용과 테두리 사이의 여백
- border(테두리) : 요소의 경계선
- margin : 요소 바깥쪽의 여백
이처럼 HTML 요소를 배치할 때는 단순히 내용만 보는 것이 아니라 내용 테두리 기준, 안쪽 영역, 바깥쪽 영역까지 함께 고려해야 한다.
🔧 CSS 레이아웃
레이아웃이란 이미지, 텍스트 같은 요소들을 화면에서 원하는 위치에 배치하는 것을 의미한다. 웹 페이지를 만들 때는 요소를 단순히 나열하는 것이 아니라, 보기 좋고 사용하기 편하도록 정렬하는 과정이 필요하다. 이때 많이 사용하는 개념이 Flexbox와 position 속성이다.
🎏 Flexbox란?
요소들을 한 줄 또는 한 칸에 딱딱하게 배치하는 것이 아니라, 공간에 맞게 유연하게 정렬할 수 있도록 도와준다. Flexbox를 사용할 때 주의해야 할 점은 부모 요소에 적용해야 한다는 것이다. 자식 요소를 정렬하고 싶다면 먼저 부모와 자식의 관계를 먼저 파악한 뒤에 부모에게 display: flex를 적용해야 자식 요소들이 그 영향을 받아서 정렬된다.
display: flex를 적용하면 자식 요소들을 원하는 방향으로 유연하게 배치할 수 있다. 이때 자주 사용하는 속성은 아래와 같다.
- justify-content : 주축(가로) 방향으로 정렬
- align-items : 교차축(세로) 방향으로 정렬
- flex-direction : 축의 방향 변경
플렉스박스는 주축(main-axis)과 교차축(cross axis)을 기준으로 요소를 움직인다. 기본적으로 주축은 가로 방향이고, 교차축은 세로 방향이다. 원한다면 flex-direction 속성을 사용해서 요소들이 정렬되는 방향을 바꿀 수도 있다. 축의 기본값은 row이며 세로 방향으로 축을 바꾸고 싶다면 column으로 설정하면 된다. row-reverse 등으로 역순 배치 또한 가능하다.
주로 사용하는 속성은 justify-content와 align-items가 있다. 하나씩 살펴보자.
justify-content: flex item들의 주축 상 위치/여백을 결정한다.flex-start: 주축의 시작 지점부터 flex item이 시작된다.center: flex item이 주축 중앙으로 정렬된다.flex-end: flex item이 주축 끝 지점부터 정렬된다.space-around: flex item이 동일한 여백으로 정렬된다. 이때 flex container의 시작과 끝 지점에는 flex item 사이 여백의 1/2에 해당하는 여백이 들어간다.space-between: flex item이 동일한 여백으로 정렬된다. 하지만space-around와는 다르게 flex container의 시작과 끝에는 여백이 존재하지 않는다.
align-items: flex item들의 교차 축 상 위치/여백을 결정한다. 설정값은 바라보는 축만 다를 뿐,justify-content와 동일하다.stretch만 flex item의 높이를 교차 축의 길이와 동일하게 세팅한다는 것만 알아두자.
