HTML & CSS
[edwith] 초보 HTML&CSS 7강 - CSS를 HTML에서 사용하는 방법
펜네임
2019. 6. 3. 22:52
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 순서.