📖학습목표

• 박스모델

• 레이아웃

  
  

✍박스모델

CSS의 기본 스타일링 제거

*{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

border(테두리)

테두리에 관한 속성으로, 두께, 선모양, 색깔 등을 나타낼 수 있다.

div{
  border: 1px solid yellow  //선 두께:1px, 선 모양:실선, 색깔: 노란색
}

• border-width : 선의 두께, 기본값은 medium
  • medium / thick / thin / length / initial / inherit
• border-style : 선의 모양, 기본값은 none
  • dashed / dotted / double / groove / hidden / inset / none / outset / ridge / solid / initial / inherit
• border-color : 선의 색, 기본값은 꾸미려는 요소의 색

margin, padding

margin: border요소인 테두리의 바깥 여백

padding: border요소인 테두리의 안쪽 여백

✍레이아웃

flex

flex 박스에서 중요한 2가지
1. 부모요소를 기준으로 자식요소 정렬
2. main axis(가로)와 cross axis(세로)

display: flex; //부모 태그를 flex로 설정해야 자식 요소 정렬 가능

주축 방향 정렬(main axis, 가로축 방향)

• justify-content: center; // 가로축의 중간 배치

교차축 방향 정렬(cross axis, 세로축 방향)

• align-items: center; // 세로축의 중간 배치

  
  

justify-content(수평 정렬)

주축은 좌 -> 우 방향

• flex-start - flex 대상인 자식 요소를 수평정렬하는 경우에는 주축의 시작부분 즉, 왼쪽정렬

• flex-end flex-start 값의 반대. flex 요소를 끝점에서 간격없이 오른쪽 정렬

• center flex 요소는 좌우의 중앙에 맞춰 정렬

• space-between flex 요소는 균등하게 간격을 두고 배치. 좌우 양끝의 flex 요소가 부모 영역의 시작과 끝에 맞춘다.
  flex 요소의 폭의 합계가 부모 요소인 flex 컨테이너의 폭보다 긴 경우, 이 값은 "flex-start"의 값과 동일

• space-around flex 요소는 일정한 간격으로 배치. space-between과 같이 균등한 간격으로 배치되지만, 좌우 양끝에 빈 공간이 생긴다.
  flex 요소의 폭의 합계가 flex 영역의 폭보다 긴 경우, 이 값은 "center"의 값과 동일
  

align-items(수직 정렬)

교차축은 상 -> 하 방향

• flex-start flex 요소는 flex 영역의 교차축(세로축)의 시작점(cross start, 위쪽 정렬)에 배치
• flex-end flex-start 값의 반대. flex 요소는 flex 영역의 교차축(세로축)의 종점(cross end, 아래쪽 맞춤)에 배치
• center flex 요소의 상하의 중앙에 맞춰 정렬
• stretch flex 요소는 Flex 영역의 높이까지 꽉 채움
• baseline flex 요소는 베이스 라인에 맞춰 배치

flex-direction

flex-direction

• row (기본값)
• culumn

position

웹 페이지의 요소를 배치하는 방법을 지정. 위치 미세하게 조정

• static: 요소를 일반적인 문서 흐름에 따라 배치

• absolute: 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 가장 가까운 위치에 있는 부모 요소를 기준으로 배치

• relative: 요소를 일반적인 문서 흐름에 따라 배치하고, 요소 자기 자신의 원래 위치(static일 때의 위치)를 기준으로 배치한다. 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용

• fixed: 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다. 뷰포트 기준으로 배치

• sticky: 스크롤 영역을 기준으로 배치

ex)

.absolute{
    position: absolute;
    top: 40px; 
    right: 40px;
 }
position: relative

.relative {
    position: relative;
    left: 100px;
    top: 5px;
}