CSS / Tutorial / CSS를 HTML에 적용시키는 방법
HTML에 CSS를 적용하는 방법은 별도 파일을 연결하는 외부 스타일시트, 문서의 head에 쓰는 내부 스타일시트, 요소의 style 속성에 쓰는 인라인 스타일 세 가지가 기본입니다. 여러 페이지에서 같은 규칙을 쓰면 외부 파일이 관리하기 쉽고, 한 문서에서만 필요한 규칙은 내부 스타일시트로 작성할 수 있습니다. 인라인 스타일은 적용 범위가 한 요소로 좁아 일반적인 페이지 디자인의 기본 방식으로 삼기 어렵습니다.
외부 CSS 파일 연결하기
HTML과 CSS를 나누어 저장하면 여러 페이지가 같은 디자인을 공유할 수 있습니다. 다음 두 파일을 같은 폴더에 만드세요.
site/ index.html style.css
index.html의 head에는 link 요소로 CSS 파일을 연결합니다. href="style.css"는 현재 HTML 파일과 같은 폴더의 style.css를 가리킵니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>외부 CSS 연결 연습</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>작은 정원</h1> <p>외부 CSS 파일로 이 문서를 꾸몄습니다.</p> </body> </html>
style.css에는 CSS 규칙만 넣습니다. <style> 태그나 HTML 문서 전체를 CSS 파일에 다시 쓰지 마세요.
body {
font-family: sans-serif;
line-height: 1.6;
}
h1 {
color: #176b54;
}
브라우저에서 index.html을 열면 제목이 초록색으로 보입니다. 다른 HTML 파일에서도 같은 link를 넣으면 이 규칙을 다시 사용할 수 있습니다. CSS를 수정한 뒤 두 페이지에서 결과를 확인하면 됩니다.
한 문서 안에 CSS 작성하기
내부 스타일시트는 HTML 문서의 head에 style 요소를 넣는 방법입니다. 아래 코드는 다른 CSS 파일 없이 해당 문서의 모든 h1에 적용됩니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>내부 CSS 연습</title>
<style>
h1 {
color: #176b54;
}
</style>
</head>
<body>
<h1>작은 정원</h1>
</body>
</html>
하나의 실습 파일을 빠르게 만들 때는 편리하지만, 여러 페이지에서 같은 규칙을 수정하려면 파일마다 고쳐야 합니다. 실무에서도 특정 페이지에만 필요한 소량의 CSS라면 사용할 수 있습니다. 다만 style 요소를 본문 아무 곳에나 넣는 방식으로 구조를 혼란스럽게 만들지 말고, 일반적인 문서에서는 head에 두세요.
한 요소에 인라인 스타일 쓰기
인라인 스타일은 HTML 요소의 style 속성에 선언을 직접 넣습니다. 다음 예제에서는 첫 문단만 초록색입니다.
<p style="color: #176b54;">초록색 문단</p> <p>기본 색상의 문단</p>
여기에는 p { ... }처럼 선택자와 중괄호를 쓰지 않습니다. 어느 요소에 적용할지 이미 style 속성의 위치가 정하기 때문입니다. 대신 같은 디자인을 열 개의 요소에 적용하려면 선언을 열 번 반복하게 됩니다. 이런 경우 클래스를 만들어 외부 또는 내부 CSS에서 한 번 정의하는 편이 수정하기 쉽습니다.
어떤 방법을 선택할까요?
| 방법 | 적합한 경우 | 주의할 점 |
|---|---|---|
| 외부 파일 | 여러 문서에서 같은 스타일을 공유할 때 | 파일 경로와 로딩 여부를 확인해야 합니다. |
| 내부 스타일시트 | 한 문서의 실습이나 페이지 전용 규칙일 때 | 다른 문서로 규칙을 재사용하기 어렵습니다. |
| 인라인 스타일 | 한 요소에 한정된 예외적 스타일이 필요할 때 | 반복과 수정 비용이 커지므로 남용하지 않습니다. |
여러 방법을 함께 쓸 수도 있습니다. 이때 동일한 요소의 동일한 속성에 서로 다른 값이 있으면 단순히 ‘나중에 쓴 파일이 무조건 이긴다’고 판단하지 마세요. 규칙의 출처, 중요도, 캐스케이드 레이어, 선택자 우선순위, 작성 순서 등이 최종 값을 정합니다. 어떤 값이 적용됐는지 헷갈리면 브라우저 개발자 도구에서 해당 요소의 규칙을 확인하세요.
CSS가 적용되지 않을 때
- 외부 파일이라면
href가 실제 위치를 가리키는지 확인합니다. CSS 파일이css/폴더 안에 있다면href="css/style.css"처럼 경로를 바꿔야 합니다. - HTML의
link에는rel="stylesheet"가 있는지, CSS 파일에는 유효한 규칙이 들어 있는지 확인합니다. - 수정 후 파일을 저장하고 페이지를 다시 불러옵니다. 서버에서 제공하는 경우 캐시 때문에 이전 파일이 보일 수도 있습니다.
- 선택자가 실제 요소에 맞는지, 다른 규칙이 같은 속성을 덮었는지 개발자 도구에서 확인합니다.
외부 파일을 연결하는 link의 사용법은 MDN link 요소 문서에서, CSS의 적용 방식은 MDN CSS 시작 안내에서 더 자세히 확인할 수 있습니다.
CSS / Tutorial / 인용문(Blockquote) 꾸미는 방법
blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다. 그대로 사용하기보다는 여러 가지 모양으로 꾸미는 것이 일반적입니다. 다음은 아래와 같은 인용문을 꾸미는 몇 가지 예제입니다.
CSS의 border 속성으로 삼각형을 만들 수 있습니다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아봅니다.
CSS 규칙의 선택자, 속성, 값과 선언을 예제로 설명합니다. 여러 선언과 주석을 쓰는 방법, 문법 오류를 확인하는 순서도 배울 수 있습니다.
CSS / Tutorial / 선택자(Selector)
CSS의 요소·클래스·ID·속성 선택자가 어떤 HTML 요소를 고르는지 예제로 설명합니다. 여러 클래스를 가진 요소, 선택자가 일치하지 않을 때, ID와 클래스의 사용 기준도 다룹니다.
CSS로 삼각형을 만들 수 있다면 마름모는 쉽게 만들 수 있습니다. 삼각형을 두 개 붙이면 마름모가 되기 때문입니다. 마름모는 네 변의 길이가 같은 사각형이므로, 이등변삼각형 두 개를 붙이며 됩니다.
웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다. 하지만, 어떤 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다. CSS를 이용하여 문자열의 일부만 보여주는 방법을 소개해드립니다.
배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다.
CSS / Tutorial / ul, ol 가운데 정렬하는 방법
목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. 목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. 만약 요소의 내용에 맞게 자동으로 크기가 정해지게 하고 싶으면 display 속성을 사용합니다.
CSS / Tutorial / 세로 가운데 정렬하는 방법
CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다. 요소의 가로 가운데 정렬은 margin 속성을 이용합니다. 세로 정렬을 가운데로 하려면 어떻게 해야 할까요? 네 가지 방법을 소개합니다.
CSS / Tutorial / 원 또는 타원 만드는 방법
CSS의 border-radius 속성으로 원 또는 타원을 만들 수 있습니다. HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만듭니다. 적절히 크기를 정하여 정사각형을 만들고, 배경색을 넣습니다. border-radius 속성을 추가하고, 값에 50%를 넣으면 원이 만들어집니다.