일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- next.js
- 알고리즘문제
- 코테준비
- Redux-Toolkit
- 개발자
- html
- 코딩
- 정처기기출
- 프로그래머스 알고리즘
- 알고리즘공부
- 코테공부
- 자바스크립트
- 알고리즘스터디
- 프로그래머스 코딩테스트
- CSS
- 프로그래머스
- mysql
- 프로그래머스 Lv.0
- 프로그래머스 코테
- js
- 코딩테스트
- next.js 에러
- 코테스터디
- 정보처리기사
- 프로그래밍
- 프로그래머스알고리즘
- 1일1코테
- 프로그래머스코테
- 프로그래머스코딩테스트
- 프로그래머스 레벨0
- Today
- Total
목록분류 전체보기 (186)
계발하는 개발자
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dcehbb/btrUHMOmWpb/pRzlOEEZKq2LPgHrl3PKJ0/img.png)
white-space 속성은 요소의 공백을 어떻게 처리할 지를 정의한다. td 요소의 nowrap 속성을 사용하지 않고도 CSS에 배치 금지를 지정할 수 있다. white-space 속성 normal 연속된 공백과 줄 바꿈은 메꾸어져서 하나의 공백으로 표시됩니다. 소스(Source)내의 줄 바꿈 문자도 공백 문자로써 처리됩니다. 필요하다면 긴 줄을 줄바꿈 합니다. nowrap normal과 같이 공백을 채우지만 가로로 긴 줄에서도 줄 바꿈을 하지 않고 표시합니다. pre 연속된 공백을 그대로 표시합니다. 또한 긴 줄도 줄 바꿈하지 않고 표시합니다. pre-wrap 연속 공백은 그대로 유지됩니다. 행(行)의 줄 바꿈은 행의 박스를 채우기 위해 필요한 경우에 실행합니다. pre-line 연속 공백은 메꾸어져..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/lOruX/btrUyAOgt1n/TCaLkrllkKXiU3tSDjxTOK/img.png)
어떤 요소에 테두리 효과를 주기 위해 일반적으로 border를 사용한다. 그러나 border값을 주는 순간 요소에 실제로 그만큼의 공간을 차지하게 되어 레이아웃에 영향을 끼친다. 아래 예시를 통해서 보면 border 적용된 div박스(왼)는 테두리 값만큼 공간을 차지해서 영향을 미치는 것 볼 수 있다. 반면 outline을 적용한 요소는 영향을 받지 않는다. 테두리 속성은 위 그림처럼 outline>border 순으로 요소에 효과를 주게 되는데 때문에 컨텐트 요소와 가장 가까이에 위치한 border값을 주게 되면 레이아웃에 영향을 미치게 된다. - - 일단 여기까지 보면 outline이 border 보다 더 좋아보인다. 그렇지만, outline 경우 boder-top, border-right 처럼 특정 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dCN3X7/btrUHRnsEGN/3SondmaMOxHPYYSxJYNmH0/img.png)
1. float 속성 이해하기 float은 요소를 왼쪽 or 오른쪽 방향으로 띄워서 정렬시키는 속성으로 float요소는 block요소를 inline-block요소로 바꿔주는 것을 뜻한다. 요소에 float을 줄 경우 해당 요소는 최소 크기로 변경되며 띄워지고 크기가 줄면서 생긴 빈공간을 그 뒤에 있는 요소가 올라오며 채우게 된다. 다음의 예를 보면 이해가 쉬울거다 ! 예제에서는 이미지 대신 div박스로 표현했다 (_ _ ) 초록색 div요소를 float:left 하고 margin: 10px을 준 모습. 보면 텍스트 박스가 div요소를 피해서 위치된다는 것을 알 수 있다. 만약, div요소를 피해가지 않았으면 하는 요소가 특별히 있는 경우라면 해당 요소에 clear 속성을 적용하면 된다. [ clear 속..
![](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을 준..