[너비(width, height)]
*CSS 속성(Properties)
-HTML 속성은 Attributes
-CSS, JS 속성은 Properties
*width, height
-요소의 가로/세로 너비
-auto(기본값): 브라우저가 너비를 계산
-단위: px, em, vw 등 단위로 지정
*max-width, max-height
-요소가 커질 수 있는 최대 가로/세로 너비
-none: 최대 너비 제한 없음
-auto: 브라우저가 너비를 계산
-단위: px, em, vw 등 단위로 지정
*min-width, min-height
-0: 최소 너비 제한 없음
-auto: 브라우저가 너비를 계산
-단위: px, em, vw 등 단위로 지정
[CSS단위]
*표현 단위
-px: 픽셀
-%: 상대적 백분율
-em: 요소의 글꼴 크기
-rem: 루트 요소(html)의 글꼴 크기
-vw: 뷰포트 가로 너비의 백분율
-vh: 뷰포트 세로 너비의 백분율
-자주 사용되는 단위는 px, %
[외부 여백(margin)]
*margin
-요소의 외부 여백(공간)을 지정하는 단축 속성
-가로(세로) 너비가 있는 요소의 가운데 정렬에 활용한다!
-음수를 사용할 수 있다! (-10px..)
-0: 외부 여백 없음
-auto: 브라우저가 여백을 계산
-단위: px, em, vw 등 단위로 지정
-%: 부모 요소의 가로 너비에 대한 비율로 지정
-margin: 10px; => top, right, bottom, left
-margin: 10px 20px; => top, bottom / left, right
-margin: 10px 20px 30px; => top / left, right / bottom
-margin: 10px 20px 30px 40px; => top / right / bottom / left
*margin-방향
-요소의 외부 여백(공간)을 지정하는 기타 개별 속성들
-margin-top
-margin-bottom
-margin-left
-margin-right
[내부 여백(padding)]
*padding
-요소의 내부 여백(공간)을 지정하는 단축 속성
-요소의 크기가 커진다!
-0: 내부 여백 없음
-단위: px, em, vw 등 단위로 지정
-%: 부모 요소의 가로 너비에 대한 비율로 지정
[테두리 선(border)과 색상 표현]
*border
-요소의 테두리 선을 지정하는 단축 속성
-요소의 크기가 커진다!
-border: 선-두께(border-width), 선-종류(border-style), 선-색상(border-color)
*border 기본값
-border: medium(border-width), none(border-style), black(border-color)
-선의 종류가 없어서(none) 출력되지 않는다!
*border-width
-요소 테두리 선의 두께
-단위: px, em, % 등 단위로 지정
*border-style
-요소 테두리 선의 종류
-none: 선 없음
-solid: 실선(일반선)
-dashed: 파선(----)
*border-color
-요소 테두리 선의 색상을 지정하는 단축 속성
-black: 기본값
-transparent: 투명
*색상 표현
-색을 사용하는 모든 속성에 적용 가능한 색상 표현
-색상 이름: 브라우저에서 제공하는 색상 이름 = red, tomato, royalblue
-Hex 색상코드: 16진수 색상(Hexadecimal Colors) = #000, #FFFFFF
-RGB: 빛의 삼원색 = rgb(255, 255, 255)
-RGBA: 빛의 삼원색 + 투명도 = rgba(0, 0, 0, 0.5)
*padding과 border의 특징
-요소의 크기가 늘어난다!
[모서리를 둥글게(border-radius)]
*border-radius
-요소의 모서리를 둥글게 깎음
-0: 둥글게 없음
-단위: px, em, % 등 단위로 지정
[크기 계산(box-sizing)]
*box-sizing
-요소의 크기 계산 기준을 지정
-content-box(기본값): 요소의 내용(content)으로 크기 계산
-border-box: 요소의 내용 + padding + border로 크기 계산
[넘침 제어(overflow)]
*overflow
-요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성
-visible(기본값): 넘친 내용을 그대로 보여줌
-hidden: 넘친 내용을 잘라냄
-auto: 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성
[출력 특성(display)]
*display
-요소의 화면 출력(보여짐) 특성
-각 요소에 이미 지정되어 있는 값
block: 상자(레이아웃) 요소
inline: 글자 요소
inline-block: 글자 + 상자 요소
기타: table, table-row.. 등
-따로 지정해서 사용하는 값
flex: 플렉스 박스(1차원 레이아웃)
grid: 그리드(2차원 레이아웃)
none: 보여짐 특성 없음, 화면에서 사라짐
*HTML <a></a>에 가로 너비를 지정하기 위해 사용해야 하는 속성과 값은?
=>display: block
[투명도]
*opacity
-요소 투명도
-1: 불투명
-0~1: 0부터 1 사이의 소수점 숫자
*opacity의 기본값은?
=> 1
[글꼴]
*font-style
-글자의 기울기
-normal: 기울기 없음
-italic: 이텔릭체
*font-weight
-글자의 두께(가중치)
-normal, 400: 기본 두께
-bold, 700: 두껍게
-100~900: 100단위의 숫자 9개, normal과 bold 이외 두께
*font-size
-글자의 크기
-16px: 기본크기
-단위: px, em, rem 등 단위로 지정
*line-height
-한 줄의 높이, 행간과 유사
-숫자: 요소의 글꼴 크기의 배수로 지정
-단위: px, em, rem 등의 단위로 지정
*font-family
-글꼴(서체) 지정
-font-family: 글꼴1, "글꼴2", ... 글꼴계열(필수작성!);
-띄어쓰기 등 특수문자가 포함된 글꼴 이름은 큰 따옴표로 묶어야 한다!
-sans-serif: 고딕체 계열(대부분 고딕체 계열을 사용)
-monospace: 고정너비(가로폭이 동등) 글꼴 계열, 정렬에 용이하고 가독성이 높아서 코드 작성에 유리! vscode에도 사용!
-cursive: 필기체 계열
-fantasy: 장식 글꼴 계열
*글자 기울기를 지정할 때 사용하는 속성과 값은?
=> font-style: italic;
*글자를 두껍게 지정할 때 사용하는 속성과 값은?
=> font-weight: 700 또는 font-weight: bold
*고딕체 계열을 의미하는 속성 값은?
=> sans-serif
*line-height 속성을 사용할 때 권장하는 단위는?
=> line-height: 1.4 (배수사용!)
[문자]
*color
-글자의 색상
-rgb(0,0,0): 검정색
-색상: 기타 지정 가능한 색상
*text-align
-문자의 정렬 방식
-left: 왼쪽 정렬
-right: 오른쪽 정렬
-center: 가운데 정렬
*text-decoration
-문자의 장식(선)
-none: 장식 없음
-underline: 밑줄
-line-through: 중앙 선
*text-indent
-문자 첫 줄의 들여쓰기
-음수를 사용할 수 있다!
-0: 들여쓰기 없음
-단위: px, em, rem 등 단위로 지정
*문자를 수평 정렬하는 속성은?
=> text-align
*문자를 들여쓰는 속성은?
=> text-indent
*text-decoration 속성의 기본값은?
=> none
[배경]
*background-color
-요소의 배경 색상
-transparent: 투명함
-색상: 지정 가능한 색상
*background-image
-요소의 배경 이미지 삽입
-none: 이미지 없음
-url("경로"): 이미지 경로 / url()은 함수다! / 따옴표를 붙이는 이유는 url경로에 css가 해석할 수 없는 특수문자가 있을 경우문제가 발생할 수 있기 때문이다.
-배경 색상은 이미지 뒤에 나온다!
*background-repeat
-요소의 배경 이미지 반복
-repeat(배경): 이미지를 수직, 수평 반복
-repeat-x: 이미지를 수평 반복
-repeat-y: 이미지를 수직 반복
-no-repeat: 반복 없음
*background-position
-요소의 배경 이미지 위치
-방향: top, bottom, left, right, center 방향
-단위: px, ex, rem 등 단위로 지정
*background-size
-요소의 배경 이미지 크기
-auto(기본값): 이미지의 실제 크기
-단위: px, em, rem 등 단위로 지정
-cover: 비율을 유지, 요소의 더 넓은 너비에 맞춤
-contain: 비율을 유지, 요소의 더 짧은 너비에 맞춤
*background-attachment
-요소의 배경 이미지 스크롤 특성
-scroll: 이미지가 요소를 따라서 같이 스크롤
-fixed: 이미지가 뷰포트에 고정, 스크롤 X / 요소는 같이 스크롤 되는데 이미지는 고정
*요소 배경에 이미지를 삽입하는 속성은?
=> background-image
*요소 배경에 이미지를 삽입할 때 사용하는 함수는?
=> url("이미지 경로")
*배경 이미지를 반복하지 않는 속성 값은?
=> no-repeat
*요소가 스크롤 될 때 배경 이미지는 뷰포트에 고정되는 속성 값은?
=> fixed
