레이아웃
z-index
position 속성을 이용하면 요소를 겹치게 놓을 수 있다. 이때 요소들의 수직 위치를 z-index 속성으로 정한다. (z-index : z축에 영향을 미치는 속성) 값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려간다.
- 3차원 속성의 position > 레이어 겹침현상 일어남
- z축 : 3차원 속성의 position에서만 사용 가능 (relatve, absolute, fixed)
- 첫번째 형제 포지션 속성값이 2차원인지 3차원인지에 따라 레이어 겹침 달라짐
(2차원 : 겹쳐지지 않는다 / 3차원 : 겹쳐진다)- 큰 공간을 만들 때는 2차원을 사용한다. (레이어 겹침현상 방지)
float
🍒 css float 속성
| 속성 | 설명 |
|---|---|
| float | HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 설정함. |
| clear | float 속성이 적용된 후 나타나는 요소들이 더 이상 float 속성에 영향을 받지 않도록 설정함. |
| overflow | 내용(content)의 크기가 해당 요소를 감싸고 있는 컨테이너 요소보다 클 때 어떻게 처리할지를 설정함. |
| overflow-x | 내용(content)의 크기가 해당 요소의 수평 방향 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함. |
| overflow-y | 내용(content)의 크기가 해당 요소의 수직 방향 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함. |
float
Inline 속성 사용하지않고 x축으로 정렬하기
float : left / right > 같은 선상에 박스를 배치
float 사용시 주의점
- 화면 줄일 시 레이아웃이 틀어진다.
- body(브라우저) 안에 바로 float 적용하면 body의 값은 계속 변할 수 있기 때문에 레아이웃 틀어짐.
- float태그를 고정값으로 감싸줘야한다. (float가 px값일경우)
<div class="float_wrap">
<div class="float_left"></div>
<div class="float_right"></div>
</div>
.float_wrap { width : 1000px;
height : 300px;
}
.float_left { float : left;
width : 200px;
height : 300px;
background-color : red;
}
.float_right { float : right;
width : 200px;
height : 300px;
background-color : yellow;
}- %(가변값)을 넣을시에는 굳이 감싸주지않아도 된다.
- float의 경우 3차원이기 때문에 자식이 float일 경우 부모가 높이값 없을 때 > 영향 주지않는다. (부모가 높이값이 없으면 영역이 나타나지않음)
- float은 position : static / relative 속성에만 적용됨 (fixed/absolute일 경우 적용X)
= float은 3차원적인 성격을 갖고 있기 때문에 3차원 position인 fixed/absolute 와는 상쇄된다고 이해하자.
clear
clear 속성은 float 속성이 적용된 이후 나타나는 요소들의 동작을 조절해 준다. 컨테이너 요소에 float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들어진다. 따라서 float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear 속성을 사용하여, 이후에 등장하는 요소들이 더는 flaot 속성에 영향을 받지 않도록 설정해줘야 한다.
<div class="clearfix"></div> .clearfix { clear : both; }clear : both; > float의 기능을 끌 때 (float의 다음 태그 영역에 clear값 입력)
float의 기능이 꺼지고 다음 영역 생성가능해짐
태그의 class명은 통상적으로 clearfix로 지정한다.<section> <div class="left-2"></div> <div class="right-2"></div> </section> <div class="clearfix"></div> <footer></footer>
overflow
float 속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소보다 크면, 해당 요소의 일부가 밖으로 흘러넘치게 된다. 이때 overflow를 사용하여 흘러넘치지 않게 설정 가능하다.
- 영역을 벗어나는 내용을 감춘다
overflow : hidden;
- 영역은 벗어나지 않으면서 스크롤로 내용확인할 수 있다.
overflow-y : scroll; overflow-x : scroll;
- 컨테이너 요소의 크기가 자동으로 내부의 요소를 감쌀 수 있을 만큼 커지게 설정한다.
overflow : auto;
- float을 사용할경우 부모가 높이값이 없으면 부모는 나타나지 않지만,
overflow : hidden; 을 입력하면 자식과 똑같은 높이 생성 (자식의 높이를 부모가 인식하게 한다.)
overflow : hidden; 적용한 결과
overflow-y : scroll 적용한 결과
flex
flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것이다.
.flex-container { display : flex; }위의 구문은 해당요소에 flex로 레이아웃을 설계한다고 선언한다는 뜻이다.
- flex-container에 적용하는 속성 & flex-item에 적용하는 속성
Flex 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width 만큼만 차지하게 된다.
(마치 inline 요소들 처럼) height는 컨테이너의 높이만큼 늘어난다.
height가 알아서 늘어나는 특징은 컬럼 레이아웃을 만들 때 아주 편리하다.
🍒 flex-direction
속성 값 속성 설명 column 위에서 아래로 나열 column-reverse 아래에서 위로 나열 row (기본값) 좌측에서 우측으로 나열 row-reverse 우측에서 좌측으로 나열 🍒 justify-content
속성 값 속성 설명 flex-start 시작쪽으로 정렬(보통 왼쪽, flex-direction : row-reverse일 때는 오른쪽) flex-end 끝쪽으로 정렬(보통 오른쪽, flex-direction : row-reverse일 때는 왼쪽) center 중앙으로 정렬 space-between 양쪽 정렬 space-around 요소 좌우 동일 간격
flex-direction : row 적용한 예시
align-items : center와 justify-content : space-between으로 일정한 간격을 두고 가운데에 배치
🍒 flex-wrap
속성 값 속성 설명 wrap 자식 요소들이 많으면 다음 줄로 넘침 no-wrap (기본) 자식 요소들이 많아도 한줄 안에 배치됨 wrap-reverse 자식 요소들이 많으면 다음 위 줄로 넘침 🍒 align-items
속성 값 속성 설명 flex-start 시작쪽으로 정렬 (보통 위쪽, flex-direction : column-reverse일때는 아래쪽) flex-end 끝쪽으로 정렬 (보통 아래쪽, flex-direction : column-reverse일때는 위쪽) center 서로 중앙 정렬 baseline 글자의 baseline 기준으로 정렬 stretch 부모 요소의 세로 크기를 따라 확장됨
flexbox help
flex개념 참고사이트 (1분코딩)
중앙정렬
margin 속성값을 auto로 설정하면, 해당 요소를 감싸고 있는 컨테이너 요소를 기준으로 수평 방향 가운데 정렬이 된다. 이때 해당 요소는 특정한 너비를 가져야 하며, 너비를 제외한 나머지 공간은 좌우로 균등하게 나뉘어 여백으로 만들어진다. 따라서 이 방법을 사용하기 위해서는 반드시 해당 요소의 width 속성값을 먼저 설정해야만 한다.
중앙정렬 방법
1) {margin : 0 auto;}
2) {position : relative;
width : 400px;
height : 200px;
background-color : yellow;
left : 50%;
margin-left : -200px;
(설정하고자 하는 박스의 크기가 400일경우 그 절반값인 -200px 이동)
단점: 정렬하려는 박스의 크기가 달라질때마다 margin-left값 수정해줘야함
} 
margin-left : -200px을 적용하지 않았을 때의 모습.
박스의 왼쪽부분이 기준이 되어 가운데 정렬되어있다.
margin-left : -200px; 적용한 결과
css center trick 참고사이트
학습소감
- float의 개념을 제대로 알 수 있는 시간이었다. float 속성값을 넣으면 원하는 대로 정렬이 가능한건 알고 있었지만, float가 3차원의 성질을 갖고있어서 2차원 성질의 position인 relative와 static에만 적용된다는 사실은 처음 알았다.
- 자식요소에 float을 사용하고 부모요소에 높이값을 설정하지않으면 부모요소가 높이를 설정할 수 없기때문에 나타나지않고, overflow : hidden;을 입력하면 자식의 높이를 부모가 인식하게 된다는 점을 알게되었다. 단순하게 float를 사용하면 overflow:hidden을 사용해라! 라고 알고만 있었는데, 원리를 알고 나니 이해하기 쉬웠다.
- float 이전에 배운 z-index는 3차원 레이아웃의 개념으로 레이어 겹침현상이 일어나지 않는 relative와 static에서는 쓰이지 않으니 float와 z-index의 조건에 대해서 헷갈리지 않도록 복습을 해야할것 같다.
- float를 사용하고 나서 float가 끝났음을 알리는 태그를 사용한다는 사실도 신기했다. float를 사용하고나서 바로 그 다음으로 넘어가는 것이 아니라 "clearfix"라는 class명을 사용하고 css에 clear:both를 입력한다는 것이다.
- flex를 사용하여 정렬할때도, flex-wrap : wrap; 이라는 값에 의하여 레아이웃이 틀어질 수도 있다는 것도 배우게 되었다. 단순히 정렬할때 편하게 사용할 수 있는 flex라고 생각했는데, 그뿐만아니라 flex를 감싸고 있는 wrap을 어떻게 설정하느냐에 따라서 모양이 바뀔 수도 있다는 것이다.
참고
오늘 배운 여러가지 개념들은 헷갈리기 쉬운 개념들이기 때문에 참고 사이트를 보면서 복습을 철저하게 해야할것같다.
float 개념정리 참고 사이트
flexbox help
flex개념 참고사이트 (1분코딩)
css center trick 참고사이트
프론트엔드개발자 지망생