HTML / CSS
1.box modle
1. margin - 요소와 테두리 사이의 거리
2. border - 테두리
3. padding- 내용과 테두리 사이의 여유공간
4. 내용
padding, margin의 픽셀을 적는 방법
-
직관적으로 다 적어 주는 방법
ex) padding-bottom: 20px;
padding-top: 20px;
padding-right: 16px;
padding-left:16px; -
top부터 시계방향으로 적어주면 된다.
ex) padding: 20px 25px 16px 17px;
(순서대로 top, right, bottom, right)
-
중복되는 값이 있을 경우
- 모든 값이 같을 경우 padding: 20px;(위 아래 양 옆 다 동일)
- 위 아래, 왼쪽 오른쪽이 같은 경우 padding: 25px 20px;
(순서대로 top,bottom = 25px, right,left = 20px)
기본적으로 내용은 왼쪽으로 붙혀져 있다. 정 중앙으로 옮기기 위해서는
- margin-right: auto;, margin-right: auto;를 적어주면된다.
(margin: 0 auto; 도 동일한 의미)
Width와 Height
사진 밑 내용의 길이와 높이를 조절할 때 사용하는 태그
- min-width : 내용의 크기가 작아 질 수 있는 최소한의 크기
- max-width : 내용의 크기가 커질 수 있는 최대한 의 크기
만약 정해둔 크기 보다 더 많을 경우 테두리를 초과 해서 내용이 나올 수 있다. 이때 사용하는 태그가 overflow 이다.
overflow
공간이 부족한 것을 해결 할 때 사용하는 태그
1. overflow: visible; - 넘쳐나는 내용물이 그대로 보임(가장 기본이 되는 설정)
2. overflow: hidden; - 넘쳐나는 내용에 관해서는 숨김
3. overflow: scroll; - 내용을 숨겼다가 사용자가 스크롤 하면 볼 수 있게 해줌
4. overflow: auto; - 방식은 scroll과 똑같지만, auto는 넘칠 때만 스크롤을 보여줌
테두리를 정의 할 때에는
border-style: solid;
border-color: #4d9ff;
border-width: 200px
이렇게 하나하나 다 적어주거나
border: 2px solid #4d9fff;
굵기 형태 색깔 순으로 적어주면 한번에 다 가능하다.
box-radius - 모서리를 둥글게 만드는 태그
background-color: 색깔; - 배경색 정하는 태그
(background-color: transparent - 투명하게 하는 태그, 가장 기본태그)
그림자 표현 태그
box-shadow: 10px 10px 5px 10px red
(순서대로 가로,세로, 명도, 크기, 색깔 순서표시)
box-sizing
margin,padding, border, 내용의 가로 세로의 크기를 정의
-
box-sizing: border-box; - margin, padding, boder, 내용의 길이를 모두 더한 값을 정의
ex) width:300px, height:250px, box-sizing:border-box: - margin, border, padding 모두 더한 가로가 300px 250px로 자동으로 맞춰서 나옴 -
box-sizing: content-box; 내용의 길이만을 정의
ex) width:300px, height:250px, box-sizing:content-box; - 내용의 길이만이 300px 높이가 250px이므로 총 길이는 margin, border, padding을 더해줘야 함
요즘에는 'box-sizing: border-box;' 가 너무 편해서 무조건 사용하는 추세이다.
폰트 크기를 설정하는 방법에는 절대적인 방법(px, pt)와 상대적인 방법인(em, %)가 있습니다.
컴퓨터에 내장되어 있는 폰트를 사용
font-family
20.12.08
출처 - codeit(웹 퍼브리싱 html/css 시작하기, html/css핵심개념)
