📚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 값을 기준으로 값이 결정
하루하루 성실하게