-
Part 01 웹 프로그램 언어의 기초_13Study/Naver Boost Course Web 2018. 8. 26. 03:12반응형
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>
반응형'Study > 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