CSS 레이아웃 (3)

허정철·2021년 7월 6일

1) 학습한 내용

1. Z-index

  • z축에 높이에 영향을 미치는 속성
  • 속성값으로는 숫자 만을 사용한다.
  • 숫자에는 단위가 생략되고 z인덱스가 적용되지 않은 최초의 상태, 즉 기본값은 0이며, 값이 높을수록 앞쪽으로 배치된다.
  • z-index는 3차원적인 속성을 갖고 있는 포지션 값에서만 적용이 가능하다
  • 3가지 3차원속성을 가진 속성값 ( Relative/ fixed/ absolute )
  • 형제관계의 포지션 속성 값에 따라 어떻게 나타날까?
    첫 번째 형제에 position이 2차원 혹은 3차원인가에 따라서 레이어가 겹칠지 안겹칠지 결정된다.
    ※ 큰 구역은 2차원으로, 작은 구역은 2차원 혹은 3차원 사용을 추천 – 큰 구역들을 3차원으로 설정하면 레이어가 겹칠 수 있기 때문이다.

2. clear

  • float의 기능을 끄고자 할 때 사용하는 속성

  • 공간을 만들 때 사용하는 태그들(header, main, section, footer, div)은 전부 block 요소의 성격을 가진다. 그래서 줄바꿈 현상이 일어나서 y축으로 정렬된다.

  • float 속성을 사용하게 되면 선택된 영역을 띄우게 되어(일부 3차원 특징을 가짐), 다른 태그와 겹쳐질 수 있다.

clear: both; 는 float: left와 float: right; 기능을 둘 다 끄는 속성값

※ float를 사용하는 경우, 브라우저의 크기가 작아지면 레이어가 틀어지는 경우가 생김

<Float 의 사용주의점>

  1. Float을 사용할 때 부모는 가변 값이 아니라 항상 고정된 값인 부모를 가져야한다.
    ex)
    이전에 부모태그가 'body'태그 였다면, 새로운 'section'태그를 만들어 float태그를 넣고 section값의 부피를 설정해준다.
    부모가 가변값일때 자식이 가변값이면 틀어지지않는다
    즉, 부모= 가변값 자식 = 가변값 =문제없음
    부모 = 가변값 자식 = 고정값 = 틀어짐
    부모 = 고정값 자식 고정값 = 문제없음
    부모의 width값은 그안에잇는 레이어의 합보다 크거나 같아야함

  2. Float을 사용한 영역은 그 영역의 높이 값이 부모에게 영향을 주지 않는다.
    Float 은 포지션상태가 순수 3차원 상태를 사용할 수 없다.

Float 을 사용할때 실무 팁
"

"
.clearfix{ clear: both}
를 사용하면 이 이전에는 float값이 이 이후에는 float값이 적용되지않는것을 구분할 수 있으며 실전에서 용이하게 사용될 수 있다.

3. overflow

  • 지정된 영역보다 많은 오브젝트가 있을 때, 사용하는 속성
    overflow: hidden; - 범위를 넘은 오브젝트를 전부 숨김
    overflow-x: scroll; 와 overflow-y: scroll; - 숨겨진 범위를 스크롤을 통해 확인할 수 있다

실무 tip 2 : overflow와 float을 결합해서 사용하면 자식의 높이값이 부모에게 영향을 줄 수 있게 만들 수 있다.

4.Flex

효율적인 웹사이트 레이아웃 작업이 가능하도록 기존의 float의 발전된 정도이다.
float과의 차이점은 제한사항이 적다.
flex가 적용된 부모의 자식들은 자동적으로 왼쪽부터 x축으로 정렬된다.
Display: flex;
이 방향을 바꾸고 싶다면
Flex-direction: row
x축으로 정렬시킬때 사용되는 속성값
Flex-direction: column
y축 정렬로 바뀐다.
Flex-direction: row-reverse
역순으로 오른쪽에서부터 정렬
Flex-direction: column -reverse
마찬가지 반대로
Flex-wrap: nowrap
부모의 영역을 벗어나지않고 부모의 영역안에서 자동으로
리사이즈 하게된다.
Flex-wrap: wrap
부모의 크기보다 자식의 크기가 더크면 줄바꿈 현상이 일어난다.

Flex-flow: row wrap;
디렉션과 랩을 동시에 입력할때 사용되는것
Justify-content = x축 작업을 정렬할때 사용한다.
Center = 가운데에 배치하고싶다
Space-between 세개의 항목에 균일한 간격을 주고싶다
Space-around 바깥족 영역에도 동일한 간격이 생긴다.
Align-items 은 y축 영역을 바꾸고싶을때 사용한다.
Flex-start - 가장 위쪽에 배치시키고자 할때 실행
Baseline - 항목의 가장 밑라인을 맞춰서 정렬시켜준다.
레이아웃 참고 사이트 : flexbox.help
Margin : 0 auto;- 블록요소에서 주로사용
Position : relative 를 사용하면 top, bottom, left, right를
사용할수있다
Left: 50% 를 사용하면 왼쪽면기준으로 50%를 이동한다.

중앙 정렬하는 방식에 대한 추가적인 속성을 알아보고 싶다면,
https://css-tricks.com/centering-css-complete-guide/
다양한 중앙정렬공식들(x,y 축 중앙정렬/ x,y 를 모두 만족시키는 중앙정렬)을 제공하고 있다

[Edit on codepen] 이라 적힌 텍스트 클릭하면 코드펜 홈페이지에서 한눈에 손쉽게 코드를 확인 할 수 있다.

2) 학습내용 중 어려웠던 점

어제 분량이 너무 많게 느껴졌었는데 알고보니 오늘 해야 할 분량까지 강의를 다 들어버린 탓에 너무 양이 많다고 느껴졌던 것 같다. 어젠 그래서 실습 부분만 기록을 남겼는데 오늘은 내용 정리를 다시 한번 해 보았다. 다시 정리를 하면서 분명 이론은 무슨 말인지 알 것 같지만 막상 적용시키려하면 잘 생각이 나질 않는다. 머릿속에서 정리가 잘 되지 않은 것 같다.

3) 해결 방법

반복학습이 중요할 것 같다. 한꺼번에 몰아서 하기엔 양이 너무 방대하고 강의 속도는 다소 빠른 감이 있지만 그에 따라가진 못하더라도 꾸준하게 복습을 해야 할 것 같다.

4) 학습소감

본의아니게 어제의 실수로 인해 오늘 반복학습을 했는데 확실히 여러번 반복 하니 이해도는 높아지는 것 같다. 그 덕에 신기함과 약간의 흥미를 느끼게도 해 준 날이었다고 생각된다. 하지만 여전히 오탈자가 한번 생기면 찾는데 한참 걸리고, 그렇게 한번 꼬이기 시작하면 진도가 확 느려지는 경향은 개선되지 못하고 있다.

profile
허정철
AI School for Daegu
이전 포스트

CSS 레이아웃 (2)

다음 포스트

CSS Animation

0개의 댓글