whatisthis?

CSS 이론 - SYNTAX / How to use? 본문

WEB STUDY/HTML,CSS

CSS 이론 - SYNTAX / How to use?

thisisyjin 2021. 12. 4. 13:52

CSS 

= Cascading Style Sheet

 

스타일을 분리해서 관리하기 위한 것.

- Document + Style

 

 

스타일 없이 html로만 웹페이지를 만든다면?

 - 정보를 주기 위한 HTML의 본질을 잃게 됨

 

  • 웹사이트의 스타일을 일관적으로 적용
  • 유지보수도 용이함

 

 

 

CSS SYNTAX

 

1) 선택자 selector

스타일을 적용할 대상 지목.

 

전체/클래스/아이디/요소 선택자 등 다양한 선택자가 있다.

 

 

2) 선언부

property : value; 의 형태로 이루어짐.

(속성과 속성값)

 

세미콜론(;)은 한 문장이 끝날때마다 꼭 써줘야함.

문장의 종결을 알리는 콤마와 같은 역할.

 

 

 

How to use CSS?

 

1. link:css 이용

 

- emmet 기능으로  link:css라고 입력하면 다음과 같이 코드가 나옴.

- html 문서의 <head>내에 입력해줘야 함.

 

<link rel="stylesheet" href="style.css">

 

REL = relation , 즉 연결 관계

HREF = hypertext reference

cf. SRC = source

 

- 가장 권장되는 방법임.

 

 

2. <style>태그 이용

 

-html 문서 head 내에 <style>태그 안에 작성하기.

 

 

3. inline-style 적용

 

요소(element)에 직접 속성으로 스타일을 적용.

 

예> <p style="color: red"> 내용 </p>

 

 

- 가장 유지보수도 어렵고 좋지 않은 방식임.

- 아주 특별한 몇가지 방법 제외하고는 절대 쓰지 말기.

 

 

 

 

'WEB STUDY > HTML,CSS' 카테고리의 다른 글

CSS part 1 - (2) Box Sizing  (0) 2021.12.07
CSS part 1 - (1) 박스 모델(Box Model)  (0) 2021.12.07
HTML 훈련 - (14) Video Player  (0) 2021.11.10
HTML 훈련 - (13) Music Player  (0) 2021.11.10
HTML 훈련 - (12) Gmail Inbox  (0) 2021.11.10
'WEB STUDY/HTML,CSS' Related Articles more