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로 삼각형을 만들 수 있다면 마름모는 쉽게 만들 수 있습니다. 삼각형을 두 개 붙이면 마름모가 되기 때문입니다. 마름모는 네 변의 길이가 같은 사각형이므로, 이등변삼각형 두 개를 붙이며 됩니다.
CSS / Tutorial / 원 또는 타원 만드는 방법
CSS의 border-radius 속성으로 원 또는 타원을 만들 수 있습니다. HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만듭니다. 적절히 크기를 정하여 정사각형을 만들고, 배경색을 넣습니다. border-radius 속성을 추가하고, 값에 50%를 넣으면 원이 만들어집니다.
CSS / Tutorial / 세로 가운데 정렬하는 방법
CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다. 요소의 가로 가운데 정렬은 margin 속성을 이용합니다. 세로 정렬을 가운데로 하려면 어떻게 해야 할까요? 네 가지 방법을 소개합니다.
웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다. 하지만, 어떤 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다. CSS를 이용하여 문자열의 일부만 보여주는 방법을 소개해드립니다.
CSS / Tutorial / 마우스 호버 효과 / 이미지 확대하는 방법
이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다.
CSS에서 !important는 특정 스타일 규칙이 다른 모든 스타일 규칙보다 우선 적용되도록 강제하는 데 사용됩니다. 이 키워드는 일반적인 스타일 우선 순위를 무시하고, 해당 스타일이 다른 어떤 스타일보다도 높은 우선순위를 가지도록 합니다.
CSS / Tutorial / 마우스 호버 효과 / 다른 이미지 보여주는 방법
이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 CSS로 만들어보겠습니다. 다음과 같이 이미지 두 개를 넣고 div로 감쌉니다.
CSS / Tutorial / 선택자(Selector)
CSS의 요소·클래스·ID·속성 선택자가 어떤 HTML 요소를 고르는지 예제로 설명합니다. 여러 클래스를 가진 요소, 선택자가 일치하지 않을 때, ID와 클래스의 사용 기준도 다룹니다.
글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많습니다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 합니다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제입니다.
CSS / Tutorial / 양쪽 배분(균등 분할) 정렬 방법
문단 정렬을 양끝으로 꽉차게 하는 경우가 있습니다. 한글에서는 배분 정렬, 워드에서는 균등 분할이라고 합니다. 일반적인 문단에서는 거의 사용하지 않고, 표에서 제목을 넣을 때 많이 사용합니다.