[부스트코스] 웹 UI 개발 : 단위, 배경, 박스모델

1) 속성- 정의와 구문

정의

 - 해당 속성이 어떤 변화를 일으키고 어떻게 동작하는지 파악할 수 있음

• 기본 값
• 상속 여부
• 애니메이션 가능 여부
• 사용 가능한 CSS 버전

문법

 - 해당 속성값을 어떤 식으로 나열하여 사용하는지를 파악 할 수 있음

 

속성 값

 - 해당 속성이 인식하여 적용 할 수 있는 값의 형태나, 키워드 등을 파악할 수 있음

• initial : 초기값, 즉 속성의 기본값으로 정의
• inherit : 부모 요소의 해당 속성 값을 적용 ( 상속 가능한 요소일 경우 )

지원 범위

 - 해당 속성이 정의에 맞게 동작 가능한 CSS 버전, 브라우저별 버전을 확인 할 수 있음

• 어떤 브라우저의 어떤 버전이냐에 따라 같은 값이어도 다르게 렌더링 될 수 있음

예제

 - 문법과 속성값을 바탕으로 실제로 속성을 동작하는 예제 코드를 확인 할 수 있음

 

2) 속성 - 단위

절대 길이 : 고정된 크기 단위로 다른 요소의 영향을 받지 않음

• px ( 1px - 1/96th of 1 inch ) : 해상도에 따라 상대적
• pt ( 1pt - 1/72 of 1 inch ) : 가장 작은 표준 인쇄 단위

상대 길이 : 다른 요소의 크기나 폰트 크기, 브라우저 등의 크기에 따라 상대적으로 값이 변함

• % : 부모의 값에 대해서 백분율로 환산한 크기를 갖게 됨
• em : font-size를 기준으로 값을 환산, 소수점 3자리까지만 표현 가능
• rem : root의 font-size를 기준으로 값을 환산
• vw : viewport의 width값을 기준으로 1%의 값으로 계산

 

3) 속성 - 색상

Color 속성

• 폰트의 색상 값을 적용 할 때 사용하는 속성

• h1 { color : 색상 값; }

색상 값 지정 방식

• 컬러 키워드
• 16 진법 (#RRGGBB , #RGB)
• RGB()
• RGBA()

 

4)속성 - background

background 관련 속성

• background-color - 배경의 색상을 지정하는 속성, 기본 값 : transparent
• background-image - 배경으로 사용할 이미지의 경로를 지정하는 속성, 기본 값 : none
• background-repeat - 이미지의 반복 여부와 방향을 지정하는 속성, 기본 값 : repeat
  • repeat : x,y축으로 모두 반복
  • repeat-x : x 축 방향으로만 반복
  • repeat-y : y축 방향으로만 반복
  • no-repeat : 이미지를 반복하지 않음
• background-position : 배경 이미지의 위치를 지정하는 속성, 기본 값 : 0% 0%
  • % : 기준으로부터 %만큼 떨어진 지점과 이미지의 % 지점이 일치하는 곳에 위치
  • px : 기준으로부터 px만큼 떨어진 지점과 이미지의 (0,0) 지점이 일치하는 곳에 위치
  • 키워드 : top, left, right, bottom, center 키워드 사용 가능
• background-attachment : 화면 스크롤에 따른 배경 이미지의 움직임 여부를 지정하는 속성, 기본 값 : scroll
  • scroll : 요소 자체를 기준으로 고정되어있으며, 내용과 함께 스트롤 되지 않음
  • local : 요소의 내용을 기준으로 고정 되어 있으며, 내용과 함께 스크롤 됨
  • fixed : 뷰포트를 기준으로 고정되어 있으며 스크롤에 영향 받지 않음
• background 축약

background: [-color] [-image] [-repeat] [-attachment] [-position];

 

 

 

5) 속성-boxmodel

boxmodel 구성

• Content 영역 : 요소의 실제 내용을 포함하는 영역
• Border 영역 : content 영역을 감싸는 테두리 선
• Padding 영역 : content 영역과 테두리 사이의 여백을 padding이라 함
• Margin 영역 : border 바깥족의 영역을 margin이라 함

 

6) 속성 - border

border 관련 속성

• border - width - 선의 굵기를 지정하는 속성, 기본 값은 medium
  • 키워드 thin, medium, thick
  • 단위 px, em, rem...

• border-style - 선의 모양을 지정하는 속성, 기본 값 : none
  • none : border 표시 하지 않음
  • solid : border를 실선 모양으로 나타냄
  • double : border를 이중 실선 모양으로 나타냄
  • dotted : border를 점선 모양으로 나타냄
• border-color : 선의 색상을 지정하는 속성, 기본 값 ; currentColor
• border 축약

border: [-width] [-style] [-color];

 

 

7) 속성 - padding

padding 속성

• length : 고정값으로 지정

• percent : 요소의 width에 상대적인 크기를 지정
• padding-top : content 영역의 위쪽 여백을 지정
• padding-right : content 영역의 오른쪽 여백을 지정
• padding-bottom : content 영역의 아래쪽 여백을 지정
• padding-left : content 영역의 왼쪽 여백을 지정

Syntax

padding: [-top] [-right] [-bottom] [-left];
                   0      10px     20px      30px   /* 상, 우, 하, 좌 다름 */
                   0      10px     20px                 /* 좌, 우 같음 */
                   0      10px                              /* 상, 하 같음 & 좌, 우 같음 */
                   0                                            /* 상, 우, 하, 좌 모두 같음 */

 

 

8) 속성- margin

margin 속성

• length : 고정값으로 지정

• percent : 요소의 width에 상대적인 크기를 지정
• auto : 브라우저에 의해 계산된 값이 적용
• margin-top : border 영역의 위쪽 여백을 지정
• margin-right : border 영역의 오른쪽 여백을 지정
• margin-bottom : border 영역의 아래쪽 여백을 지정
• margin-left : border 영역의 왼쪽 여백을 지정

Syntax

margin: [-top] [-right] [-bottom] [-left];
                  0      10px     20px      30px   /* 상, 우, 하, 좌 다름 */
                  0      10px     20px                 /* 좌, 우 같음 */
                  0      10px                              /* 상, 하 같음 & 좌, 우 같음 */
                  0                                            /* 상, 우, 하, 좌 모두 같음 */

 

margin-auto 

margin-left: auto;
margin-right: auto;

 

margin collaspse(마진 병합)

- 두 개 이상의 수직 방향 박스의 마진이 하나로 합쳐지는 것

1. 두 요소가 상하로 인접한 경우: 위 요소의 하단 마진과 아래 요소의 상단 마진의 병합이 일어남.
2. 부모 요소와 첫 번째 자식 요소 또는 마지막 자식 요소
   1. 부모 요소의 상단 마진과 첫 번째 자식 요소의 상단 마진 병합이 일어남.
   2. 부모 요소의 하단 마진과 마지막 자식 요소의 하단 마진 병합이 일어남.
3. 내용이 없는 빈 요소의 경우: 해당 요소의 상단 마진과 하단 마진의 병합이 일어남.

마진 병합은 수직 방향으로만 일어남

 

 

9) 속성 - margin & padding

margin과 padding의 비교

• margin 은 음수 값 적용이 가능하고 padding은 되지 않음

 

10) 속성-width

width 속성

• auto : 브라우저에 의해 자동으로 계산

• length : 고정 값으로 지정
• percent : 부모 요소의 width에 상대적인 크기를 지정

 

11) 속성-height

height 속성

• auto : 브라우저에 의해 자동으로 계산

• length : 고정 값으로 지정
• percent : 부모 요소의 width에 상대적인 크기를 지정

 

<해당 포스트는 교육 목적을 위해 '부스트코스'의 강의를 듣고 강의자료를 개인적으로 정리한 것으로 모든 내용의 출처와 저작권은 부스트코스에 있습니다.>