빨간색코딩

CSS 선언방식, 선택자 본문

Web

CSS 선언방식, 선택자

빨간색소년 2017. 3. 7. 17:33

CSS를 배워보자


1. CSS란?


Cascading Style Sheets 라고하며, HTML과 같은 마크업 언어들이 실제 표시되는 방법을 기술하는 언어이다. W3C의 표준이며 레이아웃과 스타일을 정의할 때 주로 쓴다. 마크업 언어가 몸체를 이룬다면 CSS는 그것을 꾸며주는 역할을 하는 것이다.


2. 선언방식


공백은 W3C 표준에서 들여쓰기는 스페이스 2칸을 권장하고 있다. 각 선택자간에는 한줄의 여백을 권장한다.


선언방식으로는

①. in-line: 태그안에서 속성으로 추가.


<p style="color:gray;">


②. internal: head안에 넣어서 선언


<head>

  <style type="text/css">

    body {font-size:9pt;}

  </style>

</head>


③. external: head안에 링크넣어서 선언


<head>

  <link rel="stylesheet" type="text/css" href="redboy.css">

</head>


3. 선택자


보기 쉽게 표로 만들어보았다


 선택자

선택자명 

설명 

 *

전체 선택자 

 모든 요소를 선택한다

 #id

ID 선택자 

 id값이 같은 요소를 선택한다

 .class

Class 선택자 

 class값이 같은 모든 요소를 선택한다

 element

 요소 선택자

 지정된 요소를 선택한다

 element,element

 복수 선택자

 선택할 요소들을 여러개 지정한다

 element element

 후손 선택자

 지정된 상위 요소 아래의 지정된 모든 하위 요소를 선택한다

 element>element

 자식 선택자

 지정된 상위 요소 바로 아래지정된 하위 요소만 선택한다


'Web' 카테고리의 다른 글

자바스크립트(JavaScript) 공부하자  (0) 2017.03.16
코드카데미 Learn HTML & CSS: Part I  (0) 2017.03.15
마크다운(markdown)  (0) 2017.03.12
CSS 선택자의 우선순위, 명시도 계산법, 박스 모델링  (0) 2017.03.11
프론트엔드, 백엔드, 풀스택, html  (0) 2017.02.04
'Web' Related Articles more
Comments