Cascading Style Sheets
웹사이트가 실제 표현되는 방법을 기술하기 위한 스타일 언어(style sheet language)이다. HTML 문서 내에 HTML 태그를 선택해서 디자인하고 배치하는 역할.
요소의 브라우저 스타일링인 가장 위에서부터 순차적으로 스타일링이 적용되는 모습을 따서 Cascading Style Sheets라고 지었다.
0. CSS 기본 문법
selector(선택자) : { property(속성): value(값); }
css 속성과 값은 영어 단어 뜻 속에 모두 담겨있다 예를들면
overflow : hidden;
(넘치다) : (감춰진,숨은);
= 내용이 요소의 크기를 벗어났을 때 : 감추기background-attchment:fixed;
(배경 - 부착,첨부) : (고정된);
= 스크롤할 때 배경이미지 부착 여부 지정 : 고정1. Selector 선택자
1-1. selector specificity, CSS적용 우선순위
css는 얼마나 구체적인지에 대한 우선순위를 정하여 해당 속성에 우선순위가 가장 높은 선택자가 적용된다. 즉, 동일한 CSS 속성이 중복 사용 되는 경우 우선 순위에 따라 적용된다.
① !important
② inline 선택자< div style = "">태그에 바로 스타일 적용하는 경우
③ id 선택자#idName
④ class 선택자.class-name
⑤ type 선택자div,p,ul...
⑥ 전체 선택자*
1-2. 복합 선택자
자신의 1 level 상위에 속하는 요소를 부모 요소, 1 level 하위에 속하는 요소를 자손 요소(자식 요소)라고 한다. 자신보다 n level 하위에 속하는 요소는 후손 요소(하위 요소)라 한다.
- 조상-자손 선택자 :
띄어쓰기/* div 요소의 후손요소 중 p 요소 */ div p { color: red; } }
- 부모-자식 선택자(직계) :
좌괄호(>)/* div 요소의 자식요소 중 p 요소 */ div > p { color: red; }
- 동등 선택자(여러개 선택할 때) :
콤마(,)h2 , span { color:red; }
- 인접 형제 선택자 :
플러스(+)<style> /* p 요소의 형제 요소 중에 p 요소 바로 뒤에 위치하는 ul 요소를 선택한다. */ p + ul { color: red; } </style> <p>The first paragraph.</p> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
- 일반 형제 선택자 :
물결(~)<style> /* p 요소의 형제 요소 중에 p 요소 뒤에 위치하는 ul 요소를 모두 선택한다.*/ p ~ ul { color: red; } </style>
1-3. 가상 클래스 선택자
가상 클래스 셀렉터는 원래 클래스가 존재하지 않지만 가상 클래스를 임의로 지정하여 선택하는 방법이다. 마우스가 들어왔을때 등의 특정 상태에만 적용되는 가상의 클래스를 지정해주는 것.
마침표(.) 대신 콜론(:)을 사용하고, CSS 표준에 의해 미리 정의된 이름이 있기 때문에 임의의 이름을 사용할 수 없다는 특징이 있다.
동적 셀렉터
:link셀렉터가 방문하지 않은 링크일 때
:visited셀렉터가 방문한 링크일 때
:hover셀렉터에 마우스가 올라와 있을 때
:active셀렉터가 클릭된 상태일 때
:focus셀렉터에 포커스가 들어와 있을 때
구조 가상 클래스
:first-child셀렉터에 해당하는 모든 요소 중 첫번째 자식인 요소를 선택
:last-child셀렉터에 해당하는 모든 요소 중 마지막 자식인 요소를 선택
:nth-child(n)셀렉터에 해당하는 모든 요소 중 앞에서 n번째 자식인 요소를 선택
:nth-last-child(n)셀렉터에 해당하는 모든 요소 중 뒤에서 n번째 자식인 요소를 선택
:nth-child(odd)셀렉터에 해당하는 모든 요소 중 홀수번째 자식인 요소 선택
nth-child(even)셀렉터에 해당하는 모든 요소 중 짝수번째 자식인 요소 선택
가상 요소 셀렉터
::first-letter콘텐츠의 첫글자를 선택
::first-line콘텐츠의 첫줄을 선택. 블록 요소에만 적용할 수 있다.
::after콘텐츠의 뒤에 위치하는 공간을 선택. 일반적으로 content 어트리뷰트와 함께 사용.
::before콘텐츠의 앞에 위치하는 공간을 선택. 일반적으로 content 어트리뷰트와 함께 사용.
::selection드래그한 콘텐츠를 선택. iOS Safari 등 일부 브라우저에서 동작하지 않는다.
<style>
/* p 요소 콘텐츠의 첫글자를 선택 */
p::first-letter { font-size: 3em; }
/* p 요소 콘텐츠의 첫줄을 선택 */
p::first-line { color: red; }
/* h1 요소 콘텐츠의 앞 공간에 content 어트리뷰트 값을 삽입한다 */
h1::before {
content: " HTML!!! ";
color: blue;
}
/* h1 요소 콘텐츠의 뒷 공간에 content 어트리뷰트 값을 삽입한다 */
h1::after {
content: " CSS3!!!";
color: red;
}
/* 드래그한 콘텐츠를 선택한다 */
::selection {
color: red;
background: yellow;
}
</style>2. 서식 속성
💡 상대적인 폰트 크기 em, rem 단위 차이
em : 부모요소를 기준으로 상대적
rem : root(=html) 기준으로 상대적html {font-size:22px;} body {font-size:15px;} .box {font-size:20px;} .box p {font-size: 2em;} | .box p {font-size: 2rem;}2em=40px; 2rem=44px;과 같다. font-size는 굳이 em 단위로 쓰지 않지만 line-height의 경우 em단위를 많이 사용함 (일반적으로 1.6em 적용)
3. box 모델
요소가 브라우저에 렌더링 될 때 상자 모양으로 표현된다. 즉, CSS에서 box model이란 디자인과 레이아웃에 대해 이야기할 때 사용됨.
브라우저와 공간 사이의 공백 제거
html과 body 태그는 margin과 padding 값을 가지므로 초기화를 해주어야 한다.
html , body{
margin : 0;
padding : 0;
}
/* 혹은 전체선택자(*)를 사용 */
margin auto
margin 에는 auto 기능이 있다. 기본값은 margin-right:auto 오른쪽 정렬이고 필요에 따라 margin-left:auto로 왼쪽 정렬, margin:0 auto 로 가운데 정렬을 하면 됨. 단 중앙정렬은 width값을 가져야 할 수 있다. inline요소는 정렬이 안됨.
마진 겹침 현상
margin-bottomr과 bottom-top 중 숫자가 큰 값으로 적용. (값이 더해지지 않음)
사이트 제작시 마진을 주는 방향을 한쪽으로만 정해서 사용하기를 권장.
마진 밀림 현상
자식이 마진 값을 사용했을 때 부모도 함께 밀려나는 현상.
이렇게 밀려났을 때는 자식에 마진말고 패딩값을 줘서 밀려나지 않게 해야한다.
box-sizing : border-box
가로길이, 세로길이 설정 -> 마진, 패딩 값이 설정한 박스 크기에 영향을 받지 않게 함.
기본 값은 box-sizing : content-box
overflow
- overflow:visible; : 내용이 박스 밖으로 넘친다. 기본 값.
- overflow:hidden; : 박스 밖으로 넘치는 내용을 숨긴다
- overflow:scroll; : 스크롤이 생긴다.
- overflow:auto; : 박스 밖으로 넘칠 경우에만 스크롤이 생긴다.
참고링크
inflearn @코딩웍스 | velog @chooing | velog @rimu | poiemaweb
