2021년 6월 2일 (수) 21:56 판

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

위치속성

<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: 크기;

@@ 2번째 줄: / 2번째 줄: @@
 =위치속성=
-<syntaxhighlight lang="html">
+<br /><syntaxhighlight lang="html">
 <style>
      .box{
@@ 11번째 줄: / 11번째 줄: @@
 </style>
 </syntaxhighlight>position에 지정한다.
+<br />
+==display 속성==
+===Block===
+블록. 콘텐츠를 담을 공간에 대한 룩엔필을 다룬다.
+모든 너비를 가져가며 아래로 쌓인다.
+===Inline===
+한 문장 내의 룩엔필을 다루는 개념.
+옆으로 쌓인다.
+===Inline-block===
+블록인데, 옆으로 쌓인다.
+===None===
+있지만, 시각화되지 않는다.
+== 위치 속성 ==
 {| class="wikitable"
 !위치