[패스트캠퍼스] 국비지원 5일차 학습일지

1. 박스 모델

기본값 잘 알아두기 →다른 값 명시하여 제어 가능하게 만들 수 있기 때문이다.

 

1-1. width, height

기본값 : auto

 

1-2. max-width, max-height

기본값 : 최대는  none, 최소는 0

 

<div class="parent">
  <div class="children"></div>
</div>

.parent{
  width: 400px;
  height: 200px;
  background-color:royalblue;
}

.children{
  max-width: 600px;
  height: 100px;
  background-color: orange;
}

 

 

 

자식 태그가 최대 너비가 600px 이므로, 600px까지 넓어질 수 있다. 만약에 너비를 600px 라고 지정하면, 잘 지정된다.

미디어 쿼리에서 min-width와 max-width 많이 이용된다.

 

1-3. 단위

• px : 픽셀, 점의 개수
• % : 상대적 백분율
• em : 요소의 글꼴 크기 기준
• rem : 루트 요소 html의 글꼴 크기 기준, em을 보완한다.
• vw : 뷰포트의 너비, 100vw는 화면의 전체 너비 의미한다.
• vh : 뷰포트의 높이, 100vh은 화면의 전체 높이 의미한다.

 

1-4. margin

요소의 외부 여백

기본값 : 0

auto로 가운데 정렬 가능하다.

음수 사용 가능 (요소가 겹처진다.)

 

• 값 1개 : 상하좌우
• 값 2개 : 상하 좌우
• 값 3개 : 상 좌우 하
• 값 4개 : 상 오른쪽 하 왼쪽 (시계 방향으로)

다른 속성들도 마찬가지이다. 잘 기억하기.

 

• margin-top
• margin-bottom
• margin-left
• margin-right

 

1-5. padding

요소의 내부 여백

기본값 : 0

%는 부모 요소의 가로 너비에 대한 비율로 지정하기.

요소의 크기가 커진다.

 

• padding-top
• padding-bottom
• padding-left
• padding-right

 

1-6. border

 

요소의 크기가 커진다.

기본값 : medium none black;

 

• border-width
• border-style
• border-color → transparent 투명한

• 색상 이름
• Hex 색상 코드
• RGB 삼원색
• RGBA 삼원색 + 투명도 (0 ~ 1 사이의 값)

• border-방향
• border-방향-속성

 

1-7. border-radius

기본값 : 0

값 4개 : 왼쪽위 오른쪽위 오른쪽아래 왼쪽아래

 

1-8. box-sizing

기본값 : content-box

border-box로 고쳐서 이용하기.

 

1-9. overflow

내용 넘쳤을 때 어떻게 보여질지를 제어하는 단축 속성

기본값 : visible

hidden (넘치면 안 보이게 만듦.), auto (스크롤바 필요한 부분에만 자동으로 생성하기.)

 

• overflow-x : x축
• overflow-y : y축

 

1-10. display

화면의 출력 방식 제어하기.

기본값 : inline, block, inline-block

flex는 1차원 레이아웃 (수평 정렬에 용이), grid는 2차원 레이아웃

 

 

1-11. opacity

0 ~ 1 사이의 값

소수점 앞은 생략 가능 (0.7 → .7 가능)

opacity는 불투명도 의미한다.

 

해석 : opacity : 0.07

7%의 불투명도 ↔ 93%의 투명도

해석 : opacity : 1

100%의 불투명도 ↔ 0%의 투명도