CSS:개요 편집하기

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

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

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

태그 안의 class 속성을 지정하여 스타일을 적용할 장소를 지정한다.
{| class="wikitable"
|+
!의도
!설명
!코드
|-
|단순 적용
|
|<syntaxhighlight lang="html">
<style>
    .box {
        width:200px;
    }
    
<div class="box"></div>
</syntaxhighlight>
|-
|자식에 적용
|wrap 안의 box에만 적용한다.(다른 box태그엔 적용되지 않는다.)
.wrap 쓰고 한 칸 띄고 .box를 넣는다.
|<syntaxhighlight lang="html">
<style>
    .wrap .box {
        width:300px;
    }
    
<div class="wrap">
<div class="box"></div>
</div>
</syntaxhighlight>
|-
|
|
|
|}

==display 속성==

===Block===
블록. 콘텐츠를 담을 공간에 대한 룩엔필을 다룬다.

모든 너비를 가져가며 아래로 쌓인다.

===Inline===
한 문장 내의 룩엔필을 다루는 개념.

옆으로 쌓인다.

===Inline-block===
블록인데, 옆으로 쌓인다.

===None===
있지만, 시각화되지 않는다.

==위치속성==
<syntaxhighlight lang="html">
<style>
    .box{
        ...
        position: 옵션;
        ...
    }
</style>
</syntaxhighlight>position에 지정한다.
{| class="wikitable"
!위치
(기본값 static)
!relative
!absolute
!fixed
|-
|용도
|absolute의 기준점을 잡기 위해 주로 사용한다.
|상위의 요소를 기준으로 위치를 잡아주기 위해 사용.
|팝업창처럼 브라우저 내에서 고정된다.
|-
|위치기준
|자신
|부모(상위 태그. 기준태그가 relative를 갖고 있어야 한다.)
(없으면 브라우저까지 찾아 올라간다.)
|브라우저
|-
|위치
|
|x축과 y축을 지정해주어야 한다.
left 속성과 top 속성 등이 필수.

%로 지정이 가능한데, 왼쪽 상단을 기준으로 위치가 정해진다.

(정확히 가운데에 두고 싶으면 margin-left:-50%; 등을 이용해 위치 조정.)

(margin에 퍼센트 사용이 가능한가? 보통은 transform:translate(-50%,-50%)를 이용한다.)

transform:translateY(-50%)로 한 축에 대해서만 지정도 가능하다.
|absolute와 동일.
|}

== 모양속성 ==
{| class="wikitable"
!의도
!설명
!방법
|-
|모서리 둥글게
|사각형 버튼 따위의 모서리를 둥글게 만든다. 
|border-radius: 크기;
|}

==사이즈 척도==
필요에 따라 사이즈 척도를 달리하여 적용한다.
{| class="wikitable"
!척도
!설명
|-
|px
|픽셀. 고정된 값을 지정한다.
|-
|em
|부모의 값을 함께 따라간다. 부모에 대한 배율로 지정한다.
부모가 여러 개 있을 때 중복적용되어 의존성 관리가 어렵다;(기본폰트사이즈가 커지면 부모들의 변화와 중첩 적용되어 지수형태로 변화가 일어나버린다.)
|-
|rem(responsive)
|가장 많이 사용하는 방식.(최근엔 반응형 웹으로 만들기 때문에)

HTML의 기본 폰트사이즈에 의존하여 따라간다.
|-
|%
|이것도 아주 많이 사용한다.

바로 위의 부모에 대한 크기의 %로 크기를 지정한다.
|}

==적용 우선순위==
같은 이름의 스타일을 적용시킬 때.

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

그 다음은 직접 짠 CSS.

그 다음은 불러온 CSS.
[[분류:정보]]