학습내용

z-index, float과 clear, overflow, flex, 중앙정렬, 기본레이아웃 실습

z-index

• github 소스코드
• 형제 관계 태그에서 깊이 조절하는 속성 (앞으로 오기, 뒤로 보내기)
• 단위 없이 숫자만 전달. default=0
• 3차원 특징을 갖고 있는 position 속성값에서만 사용 가능 (fixed, absolute + relative)
• 첫 번째 형제 요소의 position이 3차원이면 형제 요소 겹침
• 큰 공간 제작 시 2차원 사용 / 내부 요소는 2차원 + 3차원

.z-one {
    position: absolute;
    z-index: 30;
    width: 200px;
    height: 200px;
    background-color: yellow;
}
.z-two {
    position: absolute;
    z-index: 20;
    width: 200px;
    height: 300px;
    background-color: blue;
}

형제관계 position 실험

• 첫 번째 요소가 absolute: 두번째가 absolute, fixed,relative->두번째가 위로 겹침
• 첫 번째 요소가 fixed: 두번째가 absolute, fixed,relative->두번째가 위로 겹침
• 첫 번째 요소가 relative: 두번째가 absolute, fixed,relative->겹침 현상 나타나지 않음

float과 clear, overflow

float

• 요소를 x축 기준으로 정렬하거나 브라우저를 기준으로 배치할 때 사용
• 'float'(띄우다): 깊이 값이 생기는 것(맨 위에 띄우기)과 같아 3차원 속성을 일부 갖게 된다고 할 수 있다.
• float 사용 시 주의점
  1. 브라우저 크기를 변경하면 레이아웃이 틀어짐: float을 사용하는 태그의 부모의 width가 반드시 고정값이어야 함
  2. 3차원 속성 가지게 됨: float 사용한 자식의 높이값이 부모 높이값에 영향주지 않음
  3. position은 static이나 relative를 사용해야 한다. 순수 3차원 position은 float과 함께 사용할 수 없다.
  
  float=left, float=right 적용한 모습
  
  div안에 left, center, right 들어간 모습

clear

• float 속성 끌 때 사용
• float을 마지막으로 사용한 태그 바로 아래에 적기
• both: left, right 둘 다 끄기

float, clear 사용 팁

1. flaot, clear 사용 시 class=clearfix 사용하기

특정 지점부터 float 속성을 끈다는 것을 알아보기 쉽게 표현하기 위해 관례적으로 clearfix라는 class를 만들어 clear:both 속성만 적용시킴.

<section>
    <div class="left-2"></div>
    <div class="right-2"></div>
</section>
<div class="clearfix"></div>
<footer></footer>

.clearfix {
    clear: both;
}

2. 부모 태그에 overflow=hidden + 자식 태그 3차원 float: 자식의 높이가 부모에 영향 줄 수 있게 됨

• 부모 태그 overflow: hidden: 요소 안 내용이 넘치면 요소 크기만큼 보여주고 자르는 속성 (아래에 추가 설명)

<section>
    <div class="left-2"></div>
    <div class="right-2"></div>
</section>

section {
    overflow: hidden;
    width: 800px;
    background-color: orange;
}
.left-2 {
    float: left;
    width: 100px;
    height: 150px;
    background-color: cadetblue;
}
.right-2 {
    float: right;
    width: 100px;
    height: 150px;
    background-color: chartreuse;
}

overflow

요소 안에 content (text, 요소 등)이 요소의 크기를 넘어 넘칠 때 사용하는 옵션

• overflow: 요소 밖으로 넘치는 부분 처리
  - visible: 넘치는 부분 그대로 보임. default
  - hidden: 넘치는 부분 잘라버림
• overflow-y:scroll: y축 기준으로 스크롤 만들어줌
• overflow-x:scroll: x축 기준으로 스크롤 만들어줌

display 속성 flex

• 부모 태그 안 여러 자식태그들을 정렬할 때 쓰는 display 속성
• float보다 제약사항 적어서 웹사이트 레이아웃 배치할 때 효율적이다.
• 부모 요소에 display:flex쓰면 자식요소들이 x축 기준으로 left 정렬(default)된다.
• flex 참고 링크: https://flexbox.help/

flex 사용법

1. flex-direction 정렬 바꾸기 :

row (default, x축 정렬), column(y축정렬), row-reverse(x축 right부터 정렬), colume-reverse(y축 아래부터 정렬)

2. flex-wrap 자식 요소 넓이 조정 여부 :

nowrap(부모영역에 맞게 자식 리사이즈), wrap(넓이 초과 시 자동 줄바꿈)

3. flex-flow:

flex-direction, flex-wrap 한 번에 지정

4. justify-content x축 정렬하기

flex-start(왼쪽 정렬, default), flex-end, center, space-between(개체 간 공백), space-around(처음, 끝에도 공백)

5. align-items y축 정렬하기

flex-start(위쪽 정렬), flex-end, center, baseline(가장 height 큰 요소 기준 아래변 정렬)

<div class="container">
    <div class="item one"></div>
    <div class="item two"></div>
    <div class="item three"></div>
</div>

.container {
    display: flex;
    /* flex-direction: row;
    flex-wrap: wrap; */
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: baseline;
    width: 1000px;
    border: solid 10px red;
    height: 500px;
}
.item {
    width: 200px;
    height: 300px;
}
.one {
    background-color: yellow;
    height: 100px;
}
.two {
    background-color: blue;
    height: 200px;
}
.three {
    background-color: orange;
    height: 300px;
    /* width: 900px; */
}

중앙정렬

참고링크: https://css-tricks.com/centering-in-css/

1. margin: 0 auto

(상하마진, 좌우마진) block요소에서 사용

.center-1 {
    width: 300px;
    height: 300px;
    background-color: yellow;
    margin: 0 auto;
}

2. position: relative, left:50%, margin-left:-1/2 width

.center-2 {
    position: relative;
    left: 50%;
    margin-left: -150px;
    width: 300px;
    height: 300px;
    background-color: blue;
}

기본레이아웃 실습

github 소스코드

css 초기화

html, body {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
    margin: 0;
    padding:0;
}
a {
    color: #000000;
    text-decoration: none;
}

글자 위, 아래 중앙 정렬

1. 요소 height 있을 때: line-height = height (폰트 종류에 따라 미세조정 필요)

.menu li {
    float: left;
    width: 100px;
    height: 50px;
    background-color: yellow;
    text-align: center;
    line-height: 50px;
}

2. 요소 height 없을 때: padding 위 아래 똑같이 주기

.menu li a {
    display: block;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
}

요소 border 겹칠 때

border-top등 세부설정한 후 가상선택자 last-child()로 마지막 요소의 빈 border를 따로 설정해준다.

.menu li {
    float: left;
    width: 100px;
    height: 50px;
    background-color: yellow;
    /* border: solid 1px red; */
    border-top: solid 1px red;
    border-bottom: solid 1px red;
    border-left: solid 1px red;
}
.menu li:last-child {
    border-right: solid 1px red;
}

vertical align

• 부모 태그 내 형제 태그들 전부에 적용시켜서 x축 정렬하기
• 형제 태그들은 전부 inline-block 속성으로 맞춰준다.

.kakao-lists li .kakao-info {
    display: inline-block;
}
.kakao-lists li img, 
.kakao-lists li .kakao-info {
    vertical-align: middle;
}

flex로 배치하기

• 배치할 태그들의 부모 태그에 display:flex 적용

.title-wrap .btn-wrap {
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;
}

어려웠던 내용

1. 아직 어느 태그에 class를 붙여서 사용하면 효율적일지 잘 모르겠다. 실습을 미리 해보니 여러 html 파일이 하나의 css파일을 공유하고 있어서 class나 id등의 이름을 정하는 것도 중복되지 않게 신경써야 될 것 같다.

2. block 요소들을 x축 정렬하는 방법이 여러 가지가 나왔다. (display: inline-block, float, flex, vertical-align 등)

해결방법

1. class명 직관적으로 짓기
2. 적절한 방법을 선택하기 위해서는 내가 만들고 싶은 레이아웃의 모습이 확실해야겠다는 생각이 들었다.

소감

오늘은 저번주에 이어 css를 이용해 레이아웃을 조절하는 것을 배웠다. 커리큘럼 상 바로 내일부터 여러 웹사이트 레이아웃을 직접 따라 만들어 볼 예정이라 기대가 된다. 빨리 실습을 해 보고 싶어서 내일 분량 영상까지 따라해버렸다. 내일은 개인적으로 helbak 쇼핑몰 레이아웃을 연습해볼까싶다.