CSS의 구조
p {
color : red;
}1. 선택자(selector) : p
2. 속성(property) : color
3. 값(value) : red
웹페이지에 스타일을 적용하는 3가지 방법
1. inline
- 스타일을 바꾸고 싶은 태그에 직접 적용
<p style="color:blue;">Hello world</p>
2. internal
- html 안에 있는 head 태그 안에 스타일 태그를 만들어 적용
- 장점 : CSS파일을 별도로 관리하지 않아도 됨, 브라우저가 서버에 CSS파일을 요청하지 않아도 됨
<html>
<head>
<style>
p {
color:blue;
{
</style>
</head>
<body>
<p>Hello world</p>
</body>
</html>
3. external
- 가장 흔한 방법
- html파일과 별도로 css파일을 따로 만들어 두고 link 태그로 연결
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<p>Hello world</p>
</body>
</html>
*메모 : 스타일 적용 시 우선순위는 inline > internal > external 순서.
'HTML & CSS' 카테고리의 다른 글
| [HTML&CSS&JS] 자연스럽게 슬라이딩되는 아코디언 메뉴 (0) | 2019.10.18 |
|---|---|
| [생활코딩] HTML - img 태그의 주요속성 (0) | 2019.06.03 |
| [edwith] 초보 HTML&CSS 6강 - 개발자도구(Elements tab)을 활용한 HTML CSS 디버깅 (0) | 2019.06.03 |
| [edwith] 초보 HTML&CSS 5강 - ID와 Class (0) | 2019.06.02 |
| [edwith] 초보 HTML&CSS 4강 - HTML 구조화 설계 (0) | 2019.06.02 |
댓글