※ CSS(Cascading Style Sheets)
- HTML 문서를 시각적으로 꾸며 주는 역할을 하는 언어이다. 요소가 구체적으로 어떤 스타일로 표현되는지를 정의하는 규격이다. HTML 내부적으로 요소의 디자인을 할 수 있지만, 가독성이 떨어지고 유지보수가 좋지 않으므로 이를 해결하기 위해 CSS를 사용한다. 구조, 내용과 스타일을 분리하여 분업을 한다.
CSS 문법
선택자 {
속성명: 속성값;
속성명: 속성값;
...
}
p {color: blue; text-align: center;}
-- ---------------------------------
선택자 선언부
→ p 태그를 선택하여 가운데 정렬하고 파란색 글씨로 설정
- 작성 방법
1. HTMl 문서 중 디자인을 적용시킬 태그 안에 style 속성에 작성한다.
2. HTML 문서 <head> 태그 안에 <style> 태그 안에 CSS 문법을 작성한다.
3. .css 파일을 만들어서 그 안에 css 문법을 작성한다.
- 적용 방법
1. 인라인 스타일
- HTML 요소 내부에 style 속성을 사용해서 적용하는 방법이다. 해당 요소에만 스타일을 적용한다. 선택자가 필요없다.
<head>
<title>인라인 스타일</title>
</head>
<body>
<h2 style="text-align: center; color: deepskyblue; font-size: 50px;">
인라인 스타일
</h2>
<p style="text-align: center; color: deeppink;">
HTML 요소 내부에 style 속성을 사용해서 적용하는 방법
</p>
</body>
인라인 스타일
HTML 요소 내부에 style 속성을 사용해서 적용하는 방법
2. 내부 스타일 시트
- HTML 문서의 <head> 태그 안에 <style> 태그를 사용해서 적용하는 방법이다. 해당 문서에만 스타일을 적용한다. 선택자가 반드시 필요하다.
<head>
<title>내부 스타일</title>
<style>
h2 { font-size: 50px; }
p { font-size: 20px; }
ul { list-style-type: none; }
li {
font-weight: bold;
margin-right: 20px;
display: inline;
}
</style>
</head>
<body>
<h2>내부 스타일</h2>
<p>CSS를 적용하는 방법</p>
<ul>
<li>인라인 스타일</li>
<li>내부 스타일</li>
<li>외부 스타일</li>
</ul>
</body>
내부 스타일
CSS를 적용하는 방법
- 인라인 스타일
- 내부 스타일
- 외부 스타일
3. 외부 스타일 시트
- 웹 사이트 전체의 스타일을 하나의 파일에서 변경, 관리한다. .css 파일을 만들어서 CSS 문법을 작성하고 디자인을 적용할 곳마다 <head> 태그 안에 <link> 태그를 사용해서 연결, 적용하는 방법이다.
<link href="css파일경로" rel="stylesheet">rel 속성은 현재 파일과 링크된 파일 사이의 연관관계를 명시하는 것이다.
h2 {
font-size: 50px;
}
p {
font-size: 20px;
}
ul {
list-style-type: none;
}
li {
display: inline;
margin-right: 20px;
font-weight: bold;
}
<head>
<title>외부 스타일</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h2>외부 스타일</h2>
<p>CSS를 적용하는 방법</p>
<ul>
<li>인라인 스타일</li>
<li>내부 스타일</li>
<li>외부 스타일</li>
</ul>
</body>
'CSS' 카테고리의 다른 글
| 국비 수업 28일 차(22.11.10.) - CSS position (0) | 2022.11.11 |
|---|---|
| 국비 수업 27일 차(22.11.09.) - 박스 모델 (0) | 2022.11.11 |
| 국비 수업 26일 차(22.11.08.) - CSS 텍스트 (0) | 2022.11.10 |
| 국비 수업 26일 차(22.11.08.) - CSS 컬러 (0) | 2022.11.09 |
| 국비 수업 25일 차(22.11.07.) - CSS 선택자 (0) | 2022.11.08 |
