웹 페이지의 레이아웃 구성하기

CSS 초기화하기

• 모든 태그에는 고유의 여백,크기등이 기본 설정이 있으므로 원하는 값으로 세밀하게 조정하기 위해서는 CSS를 초기화 해줘야한다.

See the Pen CSS 초기화하기 by 신범식 (@ulqsqjpw-the-solid) on CodePen.

 

float - 블록 요소 좌우로 배치하기

• 블록 요소는 자동 줄 바꿈하는 특징때문에 한 줄에 하나의 블록 요소만 넣을수 있음
• 2개 이상의 블록 요소를 한줄에 배치하기 위해서는 float속성을 사용
  • 예시1 : 일반적으로 블록 요소 안에 자식 요소를 넣으면 부모의 블록 요소에는 높잇값을 지정 X                           
  • 예시1 : 부모 요소가 자식 요소의 높잇값을 자동으로 인지하여 감싸줌
  • 예시2 : wrap2에 있는 section요소가 좌우로 배치되었지만 부모요소인 .wrap2가 자식 요소의 높이값을 인식 x
  • 예시3 : .wrap3에 가상선택자 ::after을 생성후 content 빈 문자를 삽입후 강제로 black속성으로 변경
  • 예시3 : clear:both 을 적용하면 부모 요소의 float의 영향을 해제 

See the Pen Untitled by 신범식 (@ulqsqjpw-the-solid) on CodePen.

 

position - 요소를 자유롭게 배치

• positon 속성을 사용해 여러 요스를 순서와 상관없이 화면에 직접 설정
  • float 는 큰 영역의 덩어리를 좌우로 배치
  • position 은 특정 영역 안에서 자유롭게 위치 조절 가능

See the Pen Untitled by 신범식 (@ulqsqjpw-the-solid) on CodePen.

 

object-fit - 콘텐츠를 특정 영역에 채우기

• 부모 요소  영역에서 자식 요소로 지정한 이미지,동영상 같은 콘텐츠의 비율 설정가능

See the Pen 오브젝트핏 by 신범식 (@ulqsqjpw-the-solid) on CodePen.

box1(원래 비율 무시하고 영역 채움)

box2 (원래 비율 유지 하면서 좌우가 잘림)

box3 (원래 비율 유지하면서 위아래 여백생김)

 

z-index - 겹쳐 있는 요소의 z축 순서 지정하기

• 겹친 요소의 z축 순서를 강제로 지정가능

See the Pen z index by 신범식 (@ulqsqjpw-the-solid) on CodePen.

 

opacity - 요소의 투명도 설정하기

• 투명에서 불투명까지 단계별로 투명도 지정
  • 속성값이 0~1까지

See the Pen opacity by 신범식 (@ulqsqjpw-the-solid) on CodePen.