일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 코테공부
- Redux-Toolkit
- 1일1코테
- 코테준비
- js
- 프로그래머스코테
- 코딩
- 코딩테스트
- 코테스터디
- 프로그래머스
- 알고리즘공부
- 개발자
- 알고리즘스터디
- 프로그래머스알고리즘
- 프로그래머스 코딩테스트
- 알고리즘문제
- 자바스크립트
- 프로그래머스 알고리즘
- 정보처리기사
- 프로그래머스 레벨0
- 프로그래머스 코테
- 프로그래머스 Lv.0
- next.js 에러
- 정처기기출
- html
- next.js
- 프로그래밍
- CSS
- mysql
- 프로그래머스코딩테스트
- Today
- Total
목록분류 전체보기 (186)
계발하는 개발자
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/JaxdK/btrUMIE6nig/PiryuJdq6LiJTDeR3ffnK0/img.png)
앞서 정리한 relative,absolute 속성에 이어 position 2편입니다. position 각 속성과 정의는 앞선 장에 자세히 설명되어 있으니 이번 장에서는 제외하겠습니다. ↓↓ 앞장 내용은 이전 포스팅 참고 ! [CSS] position: relative, absolute 속성(1) (3) position: fixed - 실습 예제 먼저 fixed는 요소를 일반적인 문서 흐름에서 제외하고, 지정된 위치에 고정시키는 속성입니다. 일반적인 문서 흐름에서 제외된다는 말은 앞서 배운 absolute 속성과 비슷하나, 지정된 위치에 착! 고정시키는 것은 fixed 만의 고유한 특징이니 잘 기억해두시기 바랍니다. 첫번째라고 여러 번 쓰인 div, pos 라는 클래스명을 가진 div, 두번째라고 여러 번..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cz5EHB/btrUL8D0SwB/4bz3k81ExhnP2UVXbgvdAk/img.png)
[ position 정의 ] position은 문서 상에 요소를 배치하는 방법을 정의하는 속성입니다. position이 요소의 배치 방법(너비, 높이값을 통한 정적인 위치 지정)을 결정하면, top, bottom, right, left가 상대적인 최종 위치를 결정하는 방식입니다. 더보기 position: 난 이렇게 배치할거야; top: 윗면에서부터 얼만큼 떨어뜨릴거야; right: 오른쪽면에서부터 얼만끔 떨어뜨릴거야; bottom: 아랫면에서부터 얼만큼 떨어뜨릴거야; left: 왼쪽면에서부터 얼만큼 떨어뜨릴거야; => 상하좌우 위치 지정은 필요에 따라 선택적으로 사용!(4개 속성 모두 필수 지정해야하는 것은 아님) [ position 속성 ] - position 속성에는 다음 속성값들을 지정할 수 있습니..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/VfPRZ/btrUJjrty6h/MXkfRseGyjUrnmk00IDCsk/img.png)
z-index 속성은 요소의 쌓임 순서(stack order)를 정의하는 속성입니다. 정수 값을 지정하여 쌓임 맥락(stacking context)에서의 레벨을 정의하는 방식으로 적용되며, 위치 지정 요소에 대해 적용할 수 있는 속성입니다. -> 위치 지정 요소(positioned element)란, position 속성이 정의되어 있는 요소를 말합니다. (relative, absolute, fixed, static, sticky 등 ) 우리가 html문서를 작성해서 요소들을 만들어주면 요소들은 문서의 흐름에 따라 차곡차곡 배치된다는 게 우리가 알고있는 기본입니다. 그러나 포지션 속성들을 통해 요소의 위치를 조작해주는 경우에는, 요소들이 동일한 위치에서 겹쳐버리는 현상이 발생할 수 있는데요..! 이런 경..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/vVoo5/btrUN1pv75P/WmZYUrkBxQGjkM3huHnjW1/img.png)
overflow 속성은 크기가 제한된 영역에서 많은 양의 컨텐트를 보여줄 때 사용된다. 일반적으로 overflow 속성이 visible 설정(디폴트값)된 엘리먼트는 주어진 공간보다 담고있는 컨텐트가 더 큰 경우, 컨텐트를 밖으로 밀어내버리는 특성이 있다. 한 개의 엘리먼트를 배치하는 경우라면 간과하기 쉽지만, overflow 속성이 visible된 엘리먼트 두 개를 연속 위아래로 배치하는 경우라면 문제가 생긴다! 첫번째 엘리먼트의 빠져나온 컨텐트 부분이 두번째 엘리먼트와 겹치게 되기 때문. (1) overflow: hidden 이때 overflow 속성에 hidden 값을 주면 삐져나온 컨텐트를 숨길 수 있다. 이름 그대로 내용을 숨긴다는 의미 ! 위 모습처럼 긴 텍스트의 뒷 부분이 싹뚝 아예 잘려나가는..