[목차]
01. 색상 표현
💡
색을 사용하는 모든 속성에 적용 가능합니다.
1) 색상의 이름을 작성
- 브라우저에서 제공하는 색상 이름을 입력한다.
- 간단한 색상 표현은 가능하지만 명확한 특정 색상 표현은 브라우저에 따라서 달라질 수 있다.
2) Hex(Hexadecimal)
- 16진수 색상 코드
- #으로 시작하며 가장 많이 사용한다.
3) RGB
- 빛의 삼원색
- Red, Green, Blue
4) rgba
- 빛의 삼원색 + 투명도(0~1)
02. 박스 모델
💡
html 요소의 기본적인 모양을 만드는 속성입니다.
요소의 너비, 높이, 내부 여백, 외부 여백 등
1) 요소의 너비와 높이 (width, height)
- 기본값 : auto, 브라우저가 너비를 계산
2) 요소의 최대 너비, 높이
- max-width, max-height
3) 요소의 최소 너비, 높이
- min-width, min-height
4) 요소의 테두리 선을 지정하는 border
- 두께 : border-width
- 종류 : border-style
- 색상 : border-color
- 작성방법 ➡️ border : 두께 종류 색상;
- 자주사용 : 실선(solid), 파선(dashed), 점선(dotted)
5) 모서리 둥글게 만들기
- border-radius
03. 여백을 지정하는 속성들
1) 요소의 외부(주변)에 여백을 지정하는 margin
💡요소와 요소 사이의 간격을 조절할 수 있습니다.- 기본값 : 0
- 마진을 주면 요소 바깥에 공간을 만들어서 주변 요소들을 밀어내는 개념이다.
2) 요소의 내부에 여백을 지정하는 padding
💡요소 내부 사이의 간격을 조절할 수 있습니다.- 기본값 : 0
- padding을 사용하면 요소의 크기가 커진다.
3) 박스 모델의 크기 계산
💡요소에 지정한 너비를 작성한 수치 그대로 사용하고 싶으면 border-box 값을 사용합니다.- 표기법 ➡️ box-sizing : border-box;
- 요소의 내용 + padding + border를 합쳐서 계산해준다.
04. 배경
1) 색상의 적용 범위 설정 background-clip
- border-box : 가장 외곽(테두리)까지 적용. 기본값
- padding-box : 테두리를 제외한 padding 범위까지 적용
- content-box : 내용 부분에만 적용
2) 배경 이미지 background-image
💡표기법 ➡️ background-image : url(”경로”)- 이미지를 하나만 넣었는데 이미지가 삽입될 요소의 크기가 이미지보다 크면 반복해서 보여준다.
3) 배경 이미지 반복 제어 background-repeat
- (1) no-repeat : 반복 없음
- (2) repeat : 수평/수직 반복
- (3) repeat-x : 수평 반복
- (4) repeat-y : 수직 반복
4) 배경 화면의 위치 background-position
- 수평 : left, center, right
- 수직 : top, center, bottom
- 사용방법 ➡️ backgruond-position : 50% 50%;
- 가로 50%, 세로 50%
- 구체적으로 위치와 수치 적용 가능👉🏻backgruond-position : bottom 20px right 100px;
- 바닥에서 위로 20px, 오른쪽에서 왼쪽 방향으로 100px
5) 배경 이미지의 크기 background-size
- auto : 이미지의 실제 크기
- cover : 배경 이미지로 요소를 모두 덮도록 이미지를 확대 또는 축소한다.
- contain : 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대 또는 축소한다.
6) 배경 이미지 고정 background-attachment
- scroll : 이미지가 함께 스크롤
- fixed : 이미지가 뷰 포트에 고정
7) 한번에 작성하기
💡background : url(””) no-repeat left top fiexd;- 속성과 값이 모두 다르기 때문에 입력 순서는 무관
- 단, background-size는 별도로 작성해야 한다.
tag : #color #width #height #border # box-sizing #margin #padding #background
Uploaded by N2T