CSS의 기본 정리 모음 (style sheet)

 

* 연관

- html 기본 구조: http://infos.tistory.com/1591
- CSS태그의 문단 구분: http://infos.tistory.com/1593;

2021.01.09 - HTML속 CSS 적용 간단 예제

2018.01.29 - CSS Selector 선택자

2018.02.03 - CSS태그의 문단 구분 - block-level과 inline-level

2018.02.03 - css예제 - style type text css

Css, Style 적용 방식 (내부, 외부, 직결, external, internal, inline)

 

 

* HTML에 CSS연결 방식

외부 스타일 시트(External Style Sheet)
내부 스타일 시트(Internal Style Sheet)
HTML태그 속성으로 스타일 지정(Inline Styles)

Css, Style 적용 방식 (내부, 외부, 직결, external, internal, inline)

 

* CSS구조

 - 선택자(selector)

 - 속성(property)

 - 속성값(value)

 

 

* CSS예제1

 p {color:red ; width:300}

 p, td {color:red ; width:300}

 

 

* 선택자(selector)

 적용될 요소를 지정, 위 예제에서 태그 문단(p), 셀(td)의 요소에 해당.

 공통 선택자(Universal Selector)

 타입 선택자(Type Selector)

 ID 선택자(ID Selector)

 Class 선택자(Class Selector)

 

* 속성(property)

 위 예제에서 color, width에 해당.

 속성의 상속(inherit)과 겹침(cascade)관계가 있다.

 ex: p {color:red ; width:200}

 

* 속성값(value)

 위 예제에서 red, 300에 해당.

 

* 선택자 - 클래스(class)

 <style type="text/css">

 <!--

 .red {color:red}

 //-->

 </style>

<h1 class="red"> test red </h1>

<p class="red"> test red</p>

 

* 선택자 - 아이디(id)

 클래스와 달리 한 문서에 한번만 사용할 수 있는 고유성 가짐.

 <style type="text/css">

 <!--

 #red {color:red}

 //-->

 </style>

<p id="red"> test red</p>

<p> test normal </p>

 

* 선택자 - 공용(Universal Selector)

 ex: * { color: green; }

 모든 element 에 color: green; 라는 스타일을 지정.

 

* 선택자 - 타입(Type Selector)

 ex: p { color: green; }

 p요소에 color: green; 라는 스타일을 지정.

 

* 박스모델(Box Model)

 박스의 밖에서 안으로 가는 단계: margin -> border -> padding -> content

 content : 순수한 콘텐츠 내용

 ex: <span style="background: green">content</span>

 padding : 콘텐츠와 경계선 사이의 여백, 외부 크기로 width와height에서 추가된 크기.

 ex: <span style="background: green; padding: 10px;">content</span>

 border : 테두리, 외부 크기로 width와height에서 추가된 크기.

 ex: <span style="background: green; border: 5px solid black">border</span>

 margin : 경계선 밖에서 박스모델의 최종 경계선까지의 여백, 다른 태그와의 거리

 <span style="background: yellow; margin: 10px">left</span>

 <span style="background: green">right</span>