CSS:위치와 모양

학교의 모든 지식. SMwiki
Sam (토론 | 기여)님의 2021년 6월 2일 (수) 21:56 판 (새 문서: {{CSS}} =위치속성= <syntaxhighlight lang="html"> <style> .box{ ... position: 옵션; ... } </style> </syntaxhighlight>position에 지정한다. {|...)
(차이) ← 이전 판 | 최신판 (차이) | 다음 판 → (차이)
둘러보기로 이동 검색으로 이동

틀: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:진한쌤의 의문

위치속성

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