CSS:개요
틀:CSS. 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라 한다.)
작성요령
주석은 /* 주석 */ 형식으로 입력한다.
display 속성
Block
블록. 콘텐츠를 담을 공간에 대한 룩엔필을 다룬다.
모든 너비를 가져가며 아래로 쌓인다.
Inline
한 문장 내의 룩엔필을 다루는 개념.
옆으로 쌓인다.
Inline-block
블록인데, 옆으로 쌓인다.
None
있지만, 시각화되지 않는다.
위치속성
<style>
.box{
...
position: 옵션;
...
}
</style>
position에 지정한다.
| 위치
(기본값 static) |
relative | absolute | fixed |
|---|---|---|---|
| 용도 | absolute의 기준점을 잡기 위해 주로 사용한다. | 상위의 요소를 기준으로 위치를 잡아주기 위해 사용. | 팝업창처럼 브라우저 내에서 고정된다. |
| 위치기준 | 자신 | 부모(상위 태그. 기준태그가 relative를 갖고 있어야 한다.)
(없으면 브라우저까지 찾아 올라간다.) |
브라우저 |
| 위치 | x축과 y축을 지정해주어야 한다.
left 속성과 top 속성 등이 필수. %로 지정이 가능한데, 왼쪽 상단을 기준으로 위치가 정해진다. (정확히 가운데에 두고 싶으면 margin-left:-50%; 등을 이용해 위치 조정.) (margin에 퍼센트 사용이 가능한가? 보통은 transform:translate(-50%,-50%)를 이용한다.) transform:translateY(-50%)로 한 축에 대해서만 지정도 가능하다. |
absolute와 동일. |
모양속성
| 의도 | 설명 | 방법 |
|---|---|---|
| 모서리 둥글게 | 사각형 버튼 따위의 모서리를 둥글게 만든다. | border-radius: 크기; |
사이즈 척도
필요에 따라 사이즈 척도를 달리하여 적용한다.
| 척도 | 설명 |
|---|---|
| px | 픽셀. 고정된 값을 지정한다. |
| em | 부모의 값을 함께 따라간다. 부모에 대한 배율로 지정한다.
부모가 여러 개 있을 때 중복적용되어 의존성 관리가 어렵다;(기본폰트사이즈가 커지면 부모들의 변화와 중첩 적용되어 지수형태로 변화가 일어나버린다.) |
| rem(responsive) | 가장 많이 사용하는 방식.(최근엔 반응형 웹으로 만들기 때문에)
HTML의 기본 폰트사이즈에 의존하여 따라간다.(body의 폰트사이즈에 의존) |
| % | 이것도 아주 많이 사용한다.
바로 위의 부모에 대한 크기의 %로 크기를 지정한다. |
적용 우선순위
같은 이름의 스타일을 적용시킬 때.
가장 우선시 되는 건 style 속성에 넣은 것.
그 다음은 직접 짠 CSS.
그 다음은 불러온 CSS.