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와 같이 적용할 영역을 지정해주는 걸 선택자라 부른다. 그 안에 적용하는 내용들은 속성, 그 속성값을 값이라 부른다.
css파일[편집 | 원본 편집]
css파일을 작성할 때 html에 적용하기 위해선 html의 head 안에 <link rel="stylesheet" href="경로.css">를 넣어준다.
여기서 적용하는 css는 외부 css라 부른다.(html에서 직접 짜는 건 내부 css라 한다.)
작성요령[편집 | 원본 편집]
주석은 /* 주석 */ 형식으로 입력한다.
성질[편집 | 원본 편집]
부모에게 주는 속성과 자식에게 주는 속성으로 나뉜다.
css로 작성한다.
부모의 성질[편집 | 원본 편집]
#container{
/*기본적으로 가로정렬. colum으로 두면 세로정렬*/
flex-direction: row;
/*메인축 정렬. center, end, space-between(요소별로 여백 주기) 등 정렬을 정한다.*/
justify-content:
/*서브축 정렬. 다양한 옵션이 가능하다.*/
align-content: center;
}
자식의 성질[편집 | 원본 편집]
자식은 한 칸 띄워 작성한다. 다음은 컨테이너 id 안의 아이템 class를 가진 요소에만 적용한다는 의미.
#container .items{
....
}
적용 우선순위[편집 | 원본 편집]
같은 이름의 스타일을 적용시킬 때.
가장 우선시 되는 건 style 속성에 넣은 것.
그 다음은 직접 짠 CSS.
그 다음은 불러온 CSS.
팁[편집 | 원본 편집]
html 파일을 작성할 때 .클래스명만 입력하고 tab을 누르면 대부분의 편집기에선 class 안에 입력한 클래스명을 넣어 div태그를 만들어준다. 일일이 <div class="클래스명"></div>를 치는 불편함을 해소해준다.
아이콘을 CSS에서 처리해 HTML에선 class속성만 주어 아이콘을 나타내기도 한다.