[TIL] CSS_Box Model

dayhun🌞·2022년 4월 6일

CSS TIL 개발일지 멋쟁이사자처럼 프론트엔드스쿨

🔥TIL🔥

목록 보기

15/26

📌 box model

body요소의 배경이미지가 이상해요_빔캠프

cf)
들여쓰기 단축기
ctrl+]
내여쓰기 단축기
ctrl +[
코드 복붙 : 시프트 옵션 화살표아래
복사할 코드 오른쪽에 커서두고 바로 컨트롤브이 컨트롤브이하면 바로됨

margin, padding 방향!
상하/좌우
상/좌우/하
상/우/하/좌

박스 가로길이는 300+30+30+3+3=366
padding, border 더하기

box-sizing: border-box로 하면 width를 기준으로 딱 정해줌!

📌 width, height

기본적으로 알아야하는 것!
h1 - 32px
p - 16px 블럭요소

블록 박스인 경우,
width와 height를 통해 content box의 크기를 조절할 수 있다.

📌 border

보더 박스 영역의 스타일을 정의
전체 너비와 높이의 일부!

border-width
- 선의 두께
- 길이 지정 : 속성 값을 px과 같은 단위로 직접 지정
- medium : 중간 굵기
- thin : 얇은 실선
- thick : 굵은 선
border-style
- 선의 모양
- none : 선없애기
- solid : 직선
- dotted : 점선
- dashed : 바느질선 모양의 파선
- double : 평행한 이중선
- groove : 오목하게 안쪽으로 파인 선
- ridge : 볼록하게 나온 입체감 있는 선
- inset : 전체적으로 안으로 들어가 보이는 형태
- outset : 튀어나온것처럼 보이는 형태
border-color
- 선의 색깔

button {
	border-width: 3px;
	border-style: dotted;
	border-color: black;
}

/* 축약형으로 작성하시고 싶다면 */
/* 순서는 상관 없음 */
button {
	border: 3px dotted black;
}

cf)
이력서 작성시
일러스트 가능하다 프젝에서 몇번해봤다. 등 있으면좋음
FE개발자에게 일러스트 역량 있으면 좋음!

📌 radius

: 테두리의 꼭짓점을 둥글게 만들기
radius로 원그리는 법
border-raduis:50%
width의 50퍼가아니라 컨텐츠 박스의 넓이 전체의 50%인거

꼭짓점 별로 radius를 지정해줄 수 있다!

border-top-left-radius: 50px; /* 상단 왼쪽 모서리를 둥글게 합니다. */
border-top-right-radius: 50px;    /* 상단 오른쪽 모서리를 둥글게 합니다. */
border-bottom-left-radius: 50px;  /* 하단 왼쪽 모서리를 둥글게 합니다. */
border-bottom-right-radius: 50px;  /* 하단 오른쪽 모서리를 둥글게 합니다. */