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 요소의 기본 모양은 양쪽에 여백이 있는 것입니다. 그대로 사용하기보다는 여러 가지 모양으로 꾸미는 것이 일반적입니다. 다음은 아래와 같은 인용문을 꾸미는 몇 가지 예제입니다.
테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다.
표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은 다음과 같습니다. 표(table) : 왼쪽 정렬 제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬 내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬 셀 안의 내용 세로 정렬 : 가운데 정렬
CSS / Tutorial / position의 값이 fixed일 때 가운데 정렬하는 방법
position의 fixed를 이용하여 요소의 위치를 고정시킬 수 있습니다. 예를 들어 상단에 고정되는 메뉴바를 만들 때 사용합니다. 그런데, fixed를 하면 요소가 한쪽으로 치우칩니다. 만약 가운데에 위치시키고 싶다면 어떻게 할까요? transform 속성으로 해결할 수 있습니다.
CSS / Tutorial / 상속(inheritance)
CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다.
CSS / Tutorial / 유튜브 동영상을 반응형으로 삽입하는 방법
유튜브 영상을 블로그나 홈페이지에 넣을 때 보통 iframe을 사용합니다. 코드는 유튜브 영상 공유에서 를 클릭하여 구할 수 있습니다. 아래와 같은 코드인데, 고정폭입니다. 즉 웹브라우저의 가로폭이 커지든 작아지든 가로폭이 일정합니다. 이를 반응형으로 만들고 싶다면 아래처럼 합니다.
CSS / Tutorial / 마우스 호버 효과 / 이미지 확대하는 방법
이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다.
CSS 사용자 지정 속성을 :root와 특정 구성 요소에 선언하고 var()로 색과 간격을 재사용하는 방법을 설명합니다. 상속 범위, 값이 없을 때의 대체값, 유효하지 않은 값의 처리도 예제로 확인합니다.
CSS / Tutorial / 마우스 호버 효과 / 다른 이미지 보여주는 방법
이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 CSS로 만들어보겠습니다. 다음과 같이 이미지 두 개를 넣고 div로 감쌉니다.
CSS에서 표 전체 너비와 열 너비, 셀의 안쪽 여백을 조절하는 방법을 설명합니다. 내용이 길거나 화면이 좁을 때 표가 넘치는 이유와 가로 스크롤 처리 방법도 보여줍니다.