CSS:개요

틀:CSS. css에 대한 문서들을 담아두기 위한 틀.

1. CSS:개요
2. CSS:선택자
3. CSS:크기척도
4. CSS:텍스트
5. CSS:아이콘
6. CSS:속성
   1. CSS:색
   2. CSS:위치와 모양
   3. CSS:Flexbox
   4. CSS:기타속성
7. CSS:변수
8. CSS:진한쌤의 의문

개요

Cascading style sheets. 위에서 아래로 떨어지면서 속성을 지정한다. 같은 속성이 중복된 경우, 아래에서 지정한 속성이 최종적으로 적용된다.

태그 안에 넣었던 style 속성이 중복 사용되는 경우가 많은데, 이를 효율적으로 사용하기 위한 전략.

html문서의 복잡성을 줄이거나 유지보수(내용과 스타일의 분리)를 위해서 css파일을 분리하여 작성한다.

적용하는 법

상위에서 <style>을 정의하고 이후의 태그에서 사용되는 스타일을 적용한다.

태그 안의 class 속성을 지정하여 스타일을 적용할 장소를 지정한다.

다음은 html 안에서의 스타일 적용 예시이다.

의도	설명	코드
단순 적용	선택자를 두어 해당 class를 가진 태그에 적용할 속성을 지정한다.	<style> .box { width:200px; } </style> <div class="box"></div>
자식에 적용	선택자 띄고 선택자를 통해 class안의 class가 성립할 때 적용할 속성을 기입한다. wrap 안의 box에만 적용한다.(다른 box태그엔 적용되지 않는다.) .wrap 쓰고 한 칸 띄고 .box를 넣는다.	<style> .wrap .box { width:300px; } </style> <div class="wrap"> <div class="box"></div> </div>
해시기호	class가 아니라 id 적용대상으로 삼는다.	<style> #box { width:200px; } </style> <div id="box"></div>
특정상황	선택자 뒤에 : 를 붙이면 가상선택자가 된다. hover같은 경우, 마우스를 올리면 나타나는 효과를 적용한다.	<style> .icon:hover{ width:300px; } </style> <div class="box"></div>

.box와 같이 적용할 영역을 지정해주는 걸 선택자라 부른다. 그 안에 적용하는 내용들은 속성, 그 속성값을 값이라 부른다.

선택자

의도	설명	선택자 형태
범용선택자	모든 곳에 적용함을 알려주는 선택자.	*
타입선택자	특정 태그에 적용되는 내용을 지정하는 선택자.	태그명
class선택자	클래스에 대해 적용함을 알려주는 선택자. 여러 클래스를 적용할 수도 있다. <class="클래스1 클래스2"...> 형식으로 띄어쓰기를 통해 다양한 클래스를 적용할 수 있다.	.클래스명
id선택자	id 속성에 따라 적용하는 영역을 찾는다. 일반적으로 id는 한번만 사용되기에, 유일하게 적용할 부분에서 사용한다.	#아이디

css파일

css파일을 작성할 때 html에 적용하기 위해선 html의 head 안에 <link rel="stylesheet" href="경로.css">를 넣어준다.

여기서 적용하는 css는 외부 css라 부른다.(html에서 직접 짜는 건 내부 css라 한다.)

작성요령

주석은 /* 주석 */ 형식으로 입력한다.

적용 우선순위

같은 이름의 스타일을 적용시킬 때.

가장 우선시 되는 건 style 속성에 넣은 것.

그 다음은 직접 짠 CSS.

그 다음은 불러온 CSS.