CSS의 기초
HTML 문서 안에서는 디자인을 입힐 수 있는 방식이 여러 개 있다.
- <head> 안에 <style> 태그 만들기
- body 구역의 h, p 등 태그들 안에 직접적으로 스타일 넣기
- <link> 태그로 css 파일을 불러오기
1. <head> 안에 <style> 태그 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1 style="background-color: pink;">Hello World</h1>
</body>
</html>Hello World
2. <body> 구역 안의 <h>, <p> 등의 태그에 직접적으로 스타일 넣기
이 방식은 코드가 조금만 길어져도 비효율적이고 헷갈릴 수 있다.
3. <link> 태그로 작성해 둔 CSS 파일 불러오기
새로운 파일인 style.css를 같은 폴더 내에 생성하고 <link> 태그로 이 파일을 불러오는 방식이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1 {
color: red;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>여기서 rel은 링크 태그로 연동되는 파일의 타입을 말해준다.
type은 연동되는 파일의 글자는 css라는 것을 설명해 준다.
href는 연동된 파일의 경로를 말해준다.
[참고 사항]
CSS의 주석 처리
/* */ 입력하면 그 안의 내용은 주석 처리 된다.
HTML
부모 자식 관계의 태그
<header>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</header>
</body>HTML에서는 태그 내에 다른 태그들이 위치하게 되는데 이때 다른 태그를 품는 태그가 부모 태그다.
위의 코드에서는 <header>가 <ul>의 부모 태그이며, 반대로 <ul>은 <header>의 자식 태그가 되는 것이다.
그리고 ul 안의 <li> 태그들은 서로 같은 위치선상에 있기 때문에 이들끼리는 형제 태그라고 칭한다.
CSS
이제 CSS 파일로 돌아와서 각각의 태그에 스타일을 지정할 수 있다.
<header> 태그 스타일을 지정하면 그 밑의 <h1>과 <p>에 스타일이 적용되지만 만약에 따로 <h1>과 <p>에 각각 스타일을 지정하게 되면 그 스타일을 따르게 된다.
즉 본인 태그에 스타일을 지정하면 부모 자식 관계 태그와는 관련 없이 자기 스타일을 갖게 되는 것이다.
또한 내가 <footer>의 <h1>이나 <p>에게는 스타일 적용하고 싶지 않으면 <h1>과 <p> 앞에 소속 태그를 명시해 줌으로써 내가 원하는 부분의 <h1>, <p> 태그에만 스타일을 적용할 수 있다.
HTML 코드 작성:
<header>
<h1>header h1</h1>
<p>header p</p>
<a href="#">다음</a>
</header>
<footer>
<h1>footer h1</h1>
<p>footer p</p>
</footer>
CSS 코드 작성:
header {
color: red;
}
header h1 {
color: blue;
}
header p {
color: green;
}CSS : 여러 개의 태그에 스타일을 한 번에 적용하기
✏️ 선택자 1, 선택자 2 { 스타일 규칙 } ← 그룹 선택자
CSS 코드 작성:
header h1,
footer h1 {
color: blue;
}
header p,
footer p {
color: green;
}
/*
footer h1 {
color: blue;
}
footer p {
color: green;
}
*/
선택자는 다음 글에서 설명하겠다.