학습내용

웹사이트 레이아웃 작업에 필요한 CSS 주요 속성(2)

z-index

• z축에 영향을 미치는 속성

  • 3차원 속성을 가진 형제관계에서 레이어가 겹치는 현상을 피하기 위해 사용한다.
  • 평소에는 값이 0인 상태, 더 높은 값을 준 개체가 올라온다
  • 3차원적인 특징이 있는 포지션 속성 값에서만 적용이 가능하다.

• 가장 큰 공간(큰 섹션)을 만들 때 2차원 요소를 사용하자.

  • 겹침 현상을 피하기 위하여 가장 큰 공간은 2차원 요소를 사용하는 것이 좋다.

float의 특징을 활용하여 전통적인 웹사이트 구조 만들기

• 선택한 영역을 x축의 특정 위치로 이동하고자 할때 사용한다.
• header, main,section footer div태그 등 공간을 만들때 사용하는 태그들은 블록요소를 가지며 줄바꿈 현상과 y축 정렬이 일어난다.
• float는 말 그대로 오브젝트를 띄우는 의미이다. 일종의 3차원적인 성격을 띄고있다.
• clear 속성을 같이 사용하여 folat으로 정렬한 부분을 끝 맺음 해주어야한다.
• float 사용시 주의점
  • float을 사용한 영역의 부모의 크기가 가변값일 때 브라우저를 줄이면 레이어가 틀어질 우려가 있다. (고정값이면 레이어가 안틀어진다. 단 자식의 크기보다 커야함)
  • 플롯을 사용한 영역의 크기가 가변값이면 부모의 크기의 상관없이 틀어지지 않는다.
• 기본적으로 flaot을 적용한 오브젝트는 3차원 값이므로 자식의 높이가 부모에게 영향을 미치지 않는다.
• position으로 3차원 속성을 가진 오브젝트는 float속성을 사용하면 그 기능이 상쇄된다.
  • static 과 relative 값만 사용이 가능하다.
• float 사용할때 실무팁
  • "clearfix"클래스로 float을 적용한 오브젝트의 끝을 표시 해주자.
• ocerflow의 hidden값 사용 시 자식의 높이값이 부모에게 영향을 미친다.(overflow속성 - 입력되는 내용이 영역을 초과할 때 사용.)

flex, css속성(float의 발전된 개념)

• display속성 중 속성 값이며, float에 비해 제약이 많이 없다.
• flex가 적용된 부모의 자식들은 자동으로 외쪽부터 x축 정렬한다.
  • 순서를 바꾸려면 flex-direction으로 변경 (row값이 기본 적용되어 있다.)
• flex-wrap속성의 nowrap 속성 값을 사용하면 부모의 영역을 벗어나지 않고 자동으로 부모 영역에 맞추어 리사이즈한다.
  wrap속성값 - 부모의 영역보다 자식이 크면 자동으로 줄바꿈 현상.
• flex-flow속성을 direction과 wrap의 특성을 동시에 사용 할 수 있다.
• flex에서의 정렬
  x축 정렬 작업 : justify-content
  y축 정렬 작업 : align-items
• https://flexbox.help/

중앙정렬

• margin 속성 값의 두 가지 숫자 값 중 앞은 상하, 뒤는 좌우를 설정한다.
  ex) margin: 0 auto; 상하는 0 좌우는 오토값
• position과 결합 방법
  • relative상태의 오브젝트에 공간 값을 주어 직접 중앙으로 정렬시킨다.
    ( 오브젝트 크기 변경시 수정의 번거로움이있음)
• https://css-tricks.com/

어려웠던 점

• 경우의 수가 점점 많아지면서 어떤 상황에 적용을 해야할지 고민이 된다.

해결방법

• 예시된 사이트를 통해서 여려 경우를 확인하고, 내가 필요한 것들을 숙지해야겠다.

소감

• 적용 할 수 있는 경우의 수가 많다는 것은 다양한 레이아웃을 제작 할 수 있다는 얘기이다.
  남는 시간에 웹사이트 하나를 참고해서 직접 만들어 볼 계획인다.