Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- 리액트
- REACT
- reactmemo
- 구조분해할당
- styledcomonents
- clipboardapi
- useEffect
- 초기값 설정하기
- 혼공머신
- 타입스크립트
- 코딩테스트
- typeScript
- 혼공단
- error맛집
- 혼자공부하는머신러닝
- 에러해결방안
- 혼자공부하는머신러닝딥러닝
- 머신러닝
- 유니티 #게임개발
- 백준
- 백준 #코딩테스트
- 알고리즘
- axios
- CSS
- 혼공챌린지
- 백준 #코딩테스트 #코테 #알고리즘
- js
- Redux
- 딥러닝
- TS
Archives
- Today
- Total
좌충우돌 개발자의 길
[CSS] 레이아웃 본문
1. display와 box model의 관계
display | width | height | margin | padding | border |
block | ㅇ | ㅇ | ㅇ | ㅇ | ㅇ |
inline | X | X | 좌/우 | ㅇ(설명) | ㅇ(설명) |
inline-block | ㅇ | ㅇ | ㅇ | ㅇ | ㅇ |
- inline : margin은 좌우만 되고 상하는 안됨
- inline-block : 배치는 inline 방식(ex/ 한칸 띄기로 공백 인정, 개행 인정, 한 줄에 배치,,,)이고 박스 모델 속성은 block 처럼 다 가능함
- inline 과 block의 차이점
- - inline : 자식에 적용한 box model 속성이 부모에게도 똑같이 적용 X
- - block : 자식에 적용한 box model 속성이 부모에게도 똑같이 적용 O
2. display:none과 visibility:hidden
- display:none : : 요소가 렌더링 되지 않음(DOM에 존재하지 않음)
- visibility:hidden : 요소가 보이지는 않지만 렌더링 되며 화면에 공간을 가지고 있음(DOM에 존재함)
3. float 속성
- 요소를 float(요소를 보통의 흐름에서 벗어나게 함) 시킬지 지정하는 속성으로 레이아웃 만들 때 좌우로 나누게 하는 데 주로 사용함 -> 하지만 자신의 영역은 차지하고 있음
- 주변 텍스트나 인라인 요소가 주위를 감싸는 특징이 있음
- 대부분 요소의 display 값을 block으로 변경함 (display 값 변경 예외: inline-table, flex 등은 기존의 display값을 유지)
- https://codepen.io/yongwon/pen/VjgqgN
4. Clear 속성
- 요소를 floating 된 요소의 영향에서 벗어나 다음 행으로 이동하는 속성
- 의도한 게 아니라면 대부분 floating 요소 다음 요소에 바로 clear를 해주는 게 좋음-> clear는 float과 항상 따라다니는 속성이므로 잘 알아두기
- block level 요소에만 적용 가능 (ex/ span -> display:block 설정하기)
none | 양쪽으로 floating 요소를 허용(기본값) |
left | 왼쪽으로 floating 요소를 허용하지 않음 |
right | 오른쪽으로 floating 요소를 허용하지 않음 |
both | 양쪽으로 floating 요소를 허용하지 않음 |
- clear 속성 설정해서 다른 요소들에 영향 못미치게 하기
- h2태그에 clear 설정하지 말고 우리집안 일은 우리가 알아서 해결하자 남에게 피해끼치지 말자는 생각으로 span~clear:both 설정
5. position 속성 (실무에서 많이 사용)
https://www.boostcourse.org/cs120/lecture/92940/?isDesc=false
요소의 위치를 정하는 방법을 지정하는 속성
기본 값 : static
position: static | absolute | fixed | relative | sticky | initial | inherit;
< 속성 값 >
static | Normal-flow 에 따라 배치되며 offset 값이 적용되지 않는다. (기본값) |
absolute |
|
fixed |
|
relative |
|
- Normal-flow 란? 일반적인 상황에서 각의 요소들의 성질에 따라 배치 되는 순서(흐름)를 뜻. 예를 들면, block 레벨 요소들은 상하로 배치되고, inline 레벨 요소들은 좌우로 배치되는 것을 말함
offset(top/left/bottom/right) : 어디다 위치시킬지 좌표값 설정
top|bottom|left|right: auto|length|initial|inherit;
top: 50%;
left: 10px;
bottom: -10px;
right: auto;
- offset의 %단위 사용 이전에 padding과 margin에서 % 값을 적용할 때, 상하좌우 방향에 관계없이 가로 사이즈를 기준으로 %값을 계산된다고 배움. 그러나 offset은 top, bottom (상하) 는 기준이 되는 요소의 height 값 left, right (좌우) 는 width값에 대하여 계산.
- static은 offset 영향 안받음
6. z-index 속성
- position 값이 static이 아닌 경우 지정가능
- 순서 값이 없을 경우 생성순서(코드상 순서)에 따라 쌓임
- 부모가 z-index 값이 있을 경우 부모 안에서만 의미있음 (부모끼리 z-index 하는 것, 자식은 상관x)
- 큰 값이 가장 위쪽(음수 사용 가능)
7. 유효성 검사
HTML/CSS 코드 : https://validator.w3.org/
'STUDYING > HTML & CSS' 카테고리의 다른 글
[CSS] justify-content: center, align-items: center가 적용이 안될 때 해결방법 (0) | 2022.05.09 |
---|---|
[CSS] 미디어쿼리 (0) | 2022.05.09 |
[CSS] 폰트, 텍스트 (0) | 2022.05.07 |
[CSS] 단위, 배경, 박스모델 (0) | 2022.05.05 |
[CSS] 헷갈리는 부분 타파하기! (0) | 2022.05.03 |