일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 코딩테스트
- js
- 자바스크립트
- html
- 개발자
- 프로그래머스 코딩테스트
- 프로그래머스 코테
- 프로그래머스코딩테스트
- 1일1코테
- 코테스터디
- 정처기기출
- 프로그래밍
- 코테준비
- Redux-Toolkit
- 정보처리기사
- CSS
- 프로그래머스코테
- next.js
- 코딩
- mysql
- 알고리즘문제
- 프로그래머스 레벨0
- 프로그래머스 알고리즘
- next.js 에러
- 알고리즘스터디
- 프로그래머스알고리즘
- 프로그래머스 Lv.0
- 코테공부
- 알고리즘공부
- 프로그래머스
- Today
- Total
목록📌 Language/CSS (18)
계발하는 개발자
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/DnGSj/btrT9Ok7zhx/vUwGNFqk7vK7DqYmcjy2R1/img.png)
box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성이다. [ Box-sizing 속성 ] 1) border-box: - 테두리를 기준으로 크기를 정함 - border, padding, margin은 따로 계산되어 전체 영역이 설정값보다 커질 수 있음 2) content-box: - 콘텐트 영역을 기준으로 크기를 정함 - border, padding, margin을 모두 합산하여 콘텐트 영역이 설정값보다 작을 수 있음 [ 문제 인식 ] box1 box2 위 코드로 짜여진 블록요소들(box1, box2) 의 크기는 같을까? 테두리를 제외한 알맹이(=콘텐트)만 본다면 같다 할 것이다.box1은 border: 10px을 줘서 약간 커진 데 반해, box2는 border: 30px을 준..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/ebbgTd/btrSJyqcMfK/spKVSZXe9P3UAfnN6DeObK/img.jpg)
📂Flexbox란? CSS의 display 속성 중 하나로, 요소들의 레이아웃 , 정렬 , 그리고 간격을 설정 하는 데 사용할 수 있다. Flexbox 구성요소 - container, item Flexbox를 구성하는 요소들에는 container와 item 두 개념을 들 수 있다. 먼저 위 코드블럭에서처럼 각각의 input들을 감싸는 container가 있다. 여기서 container는 "button" 클래스명의 태그다. container는 flexbox를 사용하기 위해 필수적이며, 지금부터 소개할 여러 속성값을 통해 요소 배치 및 배열 등 적절한 효과를 줄 수 있다. *참고로 flexbox를 사용하기 위해선 container에 반드시 display:flex 속성을 넣어주어야 한다! item은 flexb..