Programming

[패스트캠퍼스:2주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 1/4

mionager 2022. 6. 28. 22:01

2주차.Chapter 01

또 외울거 많아요 외울 거 많아요...🤦‍♀️🤦‍♂️

 

CSS 속성 중에서 박스모델에 대해.

우선 기본적으로 모든 요소는 사각형이에요! 

요소박스와 관련된 속성에 대한 내용입니다!

 

01

가로세로 너비

속성 설명 기본값 단위
width, height 요소의 가로/세로 너비 auto
브라우저가 너비를 계산		 px, em, vw 등
max-width, max-height 요소의 최대 가로/세로 너비 none
최대 너비 제한 없음
min-width, min-height 요소의 최소 가로/세로 너비 0

블록요소는 세로 크기가, 인라인요소는 가로세로 모두 크기가 내용/자식요소에 맞게 줄어들려고 한다.
child의 min-width가 100px이라서  300px만큼 커지지 않음

 

 

02

단위

px 픽셀
% 상대적 백분율(부모를 기준으로)
em 요소의 글꼴 크기
(글꼴 크기가 기준. 1em = 해당 요소의 글꼴 크기)

부모의 폰트가 20px이면,
해당 요소가 이를 상속받고
1em은 20px이 된다.
rem 루트 요소(html)의 글꼴 크기

<html> 기본 글꼴 크기는 16px이고,
이를 기준으로 크기가 배수로 늘어난다.
1rem은 16px
vw 뷰포트 가로 너비의 백분율 (가로너비 / 100 = 1vw)
vh 뷰포트 세로 너비의 백분율 (세로너비 / 100 = 1vw)

 

 

03

margin의 특징

  1. 요소의 외부 여백을 지정
  2. 단축 속성 (이미지 참고)
  3. 음수 사용 가능
  4. 기본값 : 0
  5. auto : 브라우저가 자동으로 계산해서 값을 줌
  6. % : 부모 요소의 가로넓이를 기준 (거의 사용하지 않음)
  7. margin-방향 개별적으로 값을 줄 수 있다.

margin-bottom 음수 값 / 주석 처리된 margin값은 "단축속성"

 

04

padding의 특징

  1. 요소의 내부 여백
  2. 단축 속성 (margin과 동일)
  3. 기본값 : 0
  4. % : 부모 요소의 가로 너비에 대한 비율로 지정
  5. 요소의 크기가 커져요
  6. padding-방향 개별적으로 값을 줄 수 있다.

 

개발자 도구에서 요소를 선택하고 computed에서

아래 그림과 같이 요소의 사방에 어떤 값이 어떻게 들어있는지 확인이 가능해요.

margin: 0; border: 4px; padding: 20px

 

 

05

border의 특징

  1. 요소의 테두리 선을  지정
  2. 단축 속성 (border: 선-두께(border-width) 선-종류(border-style) 선-색상(border-color);)
  3. 요소의 크기가 커진다.
  4. border-width : px, em, % 등 단위로 지정하길 권장
  5. border-style의 종류 solid 실선, dashed 파선, dotted 점선 등
  6. border-width/border-style/border-color도 margin/padding과 동일하게 단축 속성으로 상하좌우 값을 각각 줄 수 있다.
  7. 세밀하게 개별 속성 적용이 가능(border-방향-속성. 예) border-top-width: 두께;)

 

 

06

색상 표현

  설명 예시
색상 이름 브라우저에서 제공하는 색상 이름 red, royalblue, pink ...
Hex 색상코드 16진수 색상 #000000, #ffffff
RGB 빛의 삼원색 rgb(0, 0, 0)
RGBA 빛의 삼원색 + 투명도 rgba(0, 0, 0, 0.5)

 

 

07

border-radius의 특징

  1. 요소의 모서리를 둥글게 깎음
  2. 단축 속성 (border-radius: 왼쪽상단 오른쪽상단 오른쪽바닥 왼쪽바닥)
  3. 기본값 : 0

 

각 모서리에 반지름이 30px인 원 만큼 둥그렇게 만든다.

 

 

08

box-sizing

  1. 요소의 크기를 계산하는 기준을 지정
  2. 기본값 : content-box(요소의 내용으로 크기 계산)
  3. border-box라는 속성은 요소의 내용 + padding + border로 크기 계산

border-box인 첫 번째&nbsp; 요소(Hello)는 가로세로 100px을 유지

좀 더 자세히 설명하자면

box-sizing: border-box;는

요소의 원래 크기(100px x 100px)를

적용한 padding, border가 빼먹어요.

 

 

기본값인 box-sizing: content-box는

요소의 원래 크기(100px x 100px)를 그대로 유지!

적용한 padding, border가 요소 주변에 추가돼서

크기가 커집니다!

 

 

 

 

2주차도 외울게 많지만...

영어 단어를 이해하고, 속성의 특징만 이해하면

약간의 짐작으로도 속성 적용이 가능하니

열심히 연습 합니다!

 

화이팅!🙌

저작자표시 (새창열림)