[CSS] Style 속성

1. 선택자

#id-name ... id명이 id-name인 요소

.class-name ... class명이 class-name인 요소

div.class-name ... div 요소이면서, class명이 class-name인 요소 (붙혀쓰기)

div .class-name ... div 요소의 자손이면서, class명이 class-name인 요소 (빈칸)

div>.class-name ... div 요소의 자식이면서, class명이 class-name인 요소 (Greater-than sign)

 

CSS Combinator

.parent p ... 모든 자손 p요소

.parent>p ... 모든 자식 p요소

.sibling+p ... 첫번째 동생 p요소

.sibling~p ... 모든 동생 p요소

 

CSS Attribute Selector

[속성] ... 속성있음

[속성=값] ... 속성에 특정값만 있음

[속성~=값] ... 속성에 특정값 있음

[속성|=값] ... 속성에 특정단어('-'구분)로 시작하는 값 있음

[속성^=값] ... 속성에 특정문자로 시작하는 값 있음

[속성$=값] ... 속성에 특정문자로 끝나는 값 있음

[속성$*=값] ... 속성에 특정문자를 포함하는 값 있음

 

스타일 적용 우선순위

!important > inline style > id style > class style > tag style > default CSS browser style

 

부모 스타일의 모든 속성이 자식으로 상속되지는 않는다.

(font는 상속되지만, background-color는 상속되지 않는다.)

 

속성명이나 속성값에 단어 구분시 '-'를 사용할 수 있다.

JavaScript에서는 '-'를 연산자로 사용하고 있어서 바로 사용할 수 없고,

따옴표로 묶어서 문자열을 만들던지, 대문자로 고쳐서 사용한다.

ex) text-align => 'text-align' or textAlign

 

2. 주요 스타일 속성

모든 요소 마진, 패딩 초기화 및 테두리 적용

* { border: 1px solid red; margin: 0; padding: 0; }

 

좌우 중앙배치

div { margin: 0 auto; } /* method 1 */

div.parent { text-align: center; } /* method 2, 부모요소 */

p.child { display: inline-block; } /* method 2, 자식요소 */

 

리스트 불릿제거

ul { list-style-type: none; }

 

리스트 아이템을 한줄로 배열함

li { display: inline-block; }

 

표 테두리를 한줄로 표기

table, th, td { border-collapse: collapse; }

 

텍스트 링크 기본 글자색 및 밑줄 제거

a { text-decoration: none; color: black; }

 

float 속성을 적용한 요소에 영향을 제거 (더이상 겹치지 않음)

div { clear: both; }

 

문단 좌우/상하 가운데 정렬

p { text-align: center; line-height: <height와 같게 설정> } /* 한줄일 경우 */

div.parent { display: table; } /* 여러줄일 경우, 부모요소 */

p.child { display: table-cell; vertical-align: middle; text-align: center; } /* 여러줄일 경우, 자식요소 */

 

넘치는 텍스트 표시

p { overflow: hidden; text-overflow: clip | ellipsis; }

p { word-break: break-all; } /* 한 단어도 줄넘김 */

 

요소 숨기기

p { visibility: hidden; } /*차지했던 공간은 유지*/

p { display: none; } /*차지했던 공간도 없어짐*/