'코딩 예제/CSS' 카테고리의 글 목록

코딩 예제/CSS (2)

CSS position 속성 이해하기

코딩 예제/CSS 조퍼블 2020. 5. 15. 07:00

개요 CSS position 속성은 문서 상에 요소를 어떻게 위치시킬지 정의합니다. 위치는 위, 아래, 왼쪽, 오른쪽을 설정할 수 있는데 각각 top, bottom, left, right로 설정할 수 있습니다. 사용법 position: static; 기본값으로 위치가 자동으로 배치되어 임의로 설정할 수 없습니다. position: relative; 원래 있던 위치를 기준으로 좌표를 지정합니다. static과의 차이점이 있다면 위치를 설정할 수 있다는 점입니다. position: absolute; 절대 좌표와 함께 위치를 지정해 줄 수 있습니다. 이 속성값은 일반적인 흐름에 따르지 않습니다. 만약, 위 사진과 같이 상위 속성이 relative라면 기본 위치는 상단 왼쪽입니다. 이러한 속성값이 없다면 최상단..

너비에 맞게 box-sizing 사용하기

코딩 예제/CSS 조퍼블 2020. 5. 14. 07:00

필요한 이유 input 태그, div 태그 내에 CSS를 이용한 박스 형태 등을 사용한다면 box-sizing이 필요합니다. 왜냐하면, 이 속성을 설정하면 보다 정확하게 박스형태를 갖출 수 있기 때문입니다. 따라서 이 속성은 요소의 너비와 높이를 계산하는 방법을 지정하는 속성이라고 생각하시면 됩니다. 사용법 box-sizing: content-box; 콘텐츠 영역을 기준으로 크기를 정합니다. box-sizing: border-box; 테두리를 기준으로 크기를 정합니다. 예제 다음은 box-sizing 속성을 비교한 예제입니다. 테두리가 10px이고 넓이 500px과 높이 100px 그리고 padding 값 30px로 설정했을 때 각 속성값은 어떻게 변하는지 알아보겠습니다. See the Pen box-s..

1

Copyright © 웹퍼블리싱온라인 All Rights Reserved

Designed by JB FACTORY

티스토리툴바