Naver BoostCourse Full-Stack Developer Course
Part 01 웹 프로그래밍 기초
12. CSS 선언 방법
※ Intro
- CSS를 HTML 안에 선언하는 방식은 크게 3가지가 있음
※ 학습 목표
1. CSS 선언 방식을 이해하고 활용
※ 핵심 개념
- inline
- internal
- external
※ CSS의 구성
span { color: red; } |
- span : selector (선택자)
- color : property
- red : value
※ style 을 HTML 페이지에 적용하는 3가지 방법
1. inline
- HTML 태그 안에다가 적용함
- 다른 CSS 파일에 적용한 것보다 가장 먼저 적용함
<p style="border: 1px solid gray; color:red; font-size:2em;"> |
2. internal
- style 태그로 지정함
- 구조와 스타일이 섞이게 되므로 유지보수가 어려움
- 별도의 CSS 파일을 관리하지 않아도 되며 서버에 CSS 파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없음
<head> <style> p { font-size: 2em; border: 1px solid gray; color: red; } </style> </head> <body> <div>...<div> </body> |
3. external
- 외부 파일(.css)로 지정하는 방식
- CSS 코드가 아주 짧지 않다면 가급적 이 방법으로 구현하는 것이 가장 좋음
- 현업에서는 여러개의 CSS 파일로 분리하고 이를 합쳐서 서비스에서 사용함
- internal 코드와 같은 CSS 코드를 구현하고 style.css 와 같은 별도 파일로 만듬
- 이후 아래와 같이 link 태그로 추가
<html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div> <p> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </p> </div> </body> </html> |
4. 우선순위
- inline 은 별도의 우선순위를 갖음
- internal 과 external은 우선순위가 동등함. 따라서 겹치는 선언이 있을 경우 나중에 선언된 속성이 반영됨.
※ style 지정
- html 태그 안에다가 <inline>
- style 태그로 지정하기 <internal>
- 외부파일(.css)로 지정하기 <external>
'Etc > Naver Boost Course Web' 카테고리의 다른 글
| Part 01 웹 프로그램 언어의 기초_15 (0) | 2018.09.04 |
|---|---|
| Part 01 웹 프로그램 언어의 기초_14 (0) | 2018.08.26 |
| Part 01 웹 프로그램 언어의 기초_12 (0) | 2018.08.22 |
| Part01 웹 프로그램 언어의 기초_11 (0) | 2018.08.17 |
| Part 01 웹 프로그램 언어의 기초_10 (0) | 2018.08.16 |
댓글