📚boostcourse의 웹 UI개발 강의 필기

강의 링크

📑CSS속성

1. 단위

- 절대 길이

👉고정된 크기 단위로, 다른 요소의 크기에 의해 영향 안받음

• px
  -화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적
  -디자인 의도가 많이 반영된 웹사이트의 경우 픽셀 단위를 사용하는 것을 권장
• pt
  -pt는 웹개발 시 권장하는 단위가 아님
  -Windows에서는 9pt = 12px, Mac에서는 9pt = 9px

- 상대 길이

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

• %
  -부모의 값에 대해서 백분율로 환산한 크기를 갖음
• em
  -font-size를 기준으로 값을 환산
  -소수점 3자리까지 표현 가능

2. 색상

- 컬러 키워드

• red, blue, black 등과 같이 미리 정의되어있는 키워드

- 16 진법

ex. #000000

• 6자리의 16진수(0-9, A-F)는 각각 두 자리씩 세 가지 색상을 나타냄
• 첫 번째 두 자리는 적색(RR), 가운데 두 자리는 녹색(GG), 마지막 두 자리는 청색(BB)을 의미

- 16 진법

ex. #000

• 6자리의 16진수에서 각각의 두 자리가 같은 값을 가지면 3자리로 축약하여 사용

- RGB( )

ex. #rgb(10, 255, 2)

• rgb(R, G, B)의 형태로 각 변수 값(R 적색, G 녹색, B 청색)의 강도를 정의
• 0~255의 정수로 지정
• 0 → 255는 검정 → 흰색으로 값의 변화를 나타냄

- RGBA( )

ex. #rgb(10, 255, 2, 1)

• rgb(R, G, B, A)의 형태로 각 변수는(R 적색, G 녹색, B 청색, A 투명도)의 강도를 정의
• 0 ~ 1 사이의 값을 지정
• 0 → 1은 투명 → 불투명으로 값의 변화를 나타냄

3. background

- background-color

👉 default : transparent

• 배경의 색상을 지정하는 속성

- background-image

👉 default : none

• 배경으로 사용할 이미지의 경로를 지정하는 속성

- background- repeat

👉 default : repeat

• 이미지의 반복 여부와 방향을 지정하는 속성

repeat
- x, y축 으로 모두 반복

repeat-x
- x 축 방향으로만 반복

repeat-y
- y 축 방향으로만 반복

no-repeat
- 이미지를 반복하지 않음

- background-position

👉 default : 0% 0%

• 배경 이미지의 위치를 지정하는 속성
• 값의 선언 순서는 x축, y축
• 한쪽만 지정된다면 나머지는 중앙 값(center)으로 적용

%
- 기준으로부터 % 만큼 떨어진 지점에 위치

px
- 기준으로부터 px 만큼 떨어진 지점과 이미지의 (0,0) 지점이 일치하는 곳에 위치

키워드
- top, left, right, bottom, center 키워드를 사용
- top, bottom은 y축 기준 left, right는 x축을 기준으로 합니다.

- background-attachment

👉 default : scroll

• 화면 스크롤에 따른 배경 이미지의 움직임 여부를 지정하는 속성

scroll
- 배경 이미지는 요소 자체를 기준으로 고정되어 있으며 내용과 함께 스크롤 되지 않음

local
- 배경 이미지는 요소의 내용을 기준으로 고정되어 있으며 내용과 함께 스크롤 됨

fixed
- 배경 이미지는 뷰포트를 기준으로 고정되어 있으며 스크롤에 영향을 받지 않음

- background 축약

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

4. boxmodel

- Content 영역

• 요소의 실제 내용을 포함하는 영역

- Border 영역

• content 영역을 감싸는 테두리 선

- Padding 영역

• content 영역과 테두리 사이의 여백

- Margin 영역

• border 바깥쪽의 영역
• 주변 요소와의 여백

5. border

- border-width

👉 default : medium

• 선의 굵기를 지정하는 속성

border-top-width
border-bottom-width
border-right-width
border-left-width
 
축약형
- border-width: [top] [right] [bottom] [left];

키워드
- thin, medium, thick

단위
- px, em, rem ... ( % , 정수 단위 사용불가 )

- border-style

👉 default : none

• 선의 모양을 지정하는 속성

border-top-style
border-bottom-style
border-right-style
border-left-style
 
축약형
- border-style: [top] [right] [bottom] [left];

none
- border를 표시 하지 않습니다.

solid
- border를 실선 모양으로 나타냅니다.

double
- border를 이중 실선 모양으로 나타냅니다.

dotted
- border를 점선 모양으로 나타냅니다.

- border-color

👉 default : currentColor

• 선의 색상을 지정하는 속성

border-top-color
border-bottom-color
border-right-color
border-left-color
 
축약형
- border-color: [top] [right] [bottom] [left];

- border 축약

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

6. padding

👉 default : 0

length
- 고정값으로 지정합니다. (ex. px, em ....)

percent
- 요소의 width에 상대적인 크기를 지정합니다.

padding-top 
- content 영역의 위쪽 여백을 지정합니다.

padding-right 
- content 영역의 오른쪽 여백을 지정합니다.

padding-bottom 
- content 영역의 아래쪽 여백을 지정합니다.

padding-left 
- content 영역의 왼쪽 여백을 지정합니다.

- padding 축약

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

7. margin

👉 default : 0

length
-고정값으로 지정합니다. (ex. px, em ....)

percent
-요소의 width에 상대적인 크기를 지정합니다.

auto
-브라우저에 의해 계산된 값이 적용 됩니다.

margin-top border 
-영역의 위쪽 여백을 지정합니다.

margin-right border 
-영역의 오른쪽 여백을 지정합니다.

margin-bottom border 
-영역의 아래쪽 여백을 지정합니다.

margin-left border 
-영역의 왼쪽 여백을 지정합니다.

- margin 축약

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

• margin auto
  -자신의 width를 제외한 나머지 여백에 크기에 대해 균등 분할 하여 적용

8. margin과 padding의 비교

         +    -    auto   단위

margin   o    o     o    px, % ...   

padding  o    x     x    px, % ...

👉%는 상하좌우의 방향에 관계없이 모두 요소의 width 값을 기준으로 값이 결정