🤩Backgrounds
🎠background-Image
- 요소의 배경으로 사용할 이미지를 지정
- 기본적으로 이미지는 전체 요소를 덮도록 반복됨
🎠background-repeat
- 이미지를 가로 및 세로로 반복
- 이미지 크기가 작으면 수평, 수직으로 반복적으로 나타남
- 가로로만 반복하려면 background-repeat: repeat-x;
- 세로로만 반복하려면 background repeat: repeat-y;
- 한 번만 표시하려면 background-repeat: no-repeat;
🎠background-position
- left
- right
- top
- bottom
ex) background-position: right top;
오른쪽 위에 위치
🎠background-attachment
- 배경 이미지를 스크롤할지 고정할지 여부를 지정
(페이지의 나머지 부분과 함께 스크롤되지 않음) - background-attachment: fixed;
- background-attachment: scroll;
🎠Shorthand
- 코드를 줄이려면 하나의 단일 속성에 모든 배경 속성을 지정할 수 있음
ex)
👇👇
😃이것을 사용할때 속성 값의 순서는
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
🤩Borders(테두리)
border을 사용하면 테두리의 스타일, 너비 및 색상을 지정할 수 있음
🎠border-style(테두리 종류)
- dotted- 점선 테두리
- dashed- 파선 테두리
- solid- 견고한 테두리
- double- 이중 테두리
- groove- 3D 그루브 테두리.(테두리 색상값에 따라 다름)
- ridge- 3D 능선 테두리.(테두리 색상값에 따라 다름)
- inset- 3D 삽입 테두리.(테두리 색상값에 따라 다름)
- outset- 3D 시작 테두리.(테두리 색상값에 따라 다름)
- none- 경계선 없음
- hidden- 숨겨진 테두리
🎠border-width(너비)
- 너비는 특정 크기를"px, pt, cm, em"등으로 설정하거나, 미리 정의된 세가지값 (thin, medium, thick) 중 하나를 사용하여 설정할 수 있음
- left, right, top, bottom 네 개의 값을 가질 수 있음
🎠border-color
- 테두리의 색상을 설정하는데 사용
- left, right, top, bottom 다르게 설정할 수 있음
🎠border-style: sides(경계면)
/*four values*/
p.four { /*top right bottom left */
border-style: dotted solid double dashed;
}
/* Three values */
p.three { /*top right bottom - left는 마주보는 right와 같음*/
border-style: dotted solid double;
}
/* Two values */
p.two { /* top right - bottom은 top과 left는 right와 같음*/
border-style: dotted solid;
}
/* One value */
p.one { /*전체 똑같음*/
border-style: dotted;
}🎠Shorthand
👉개별 테두리 속성
- border-width
- border-style (필수!! 테두리가 있어야 다른것 가능)
- border-color
ex)
🎠border-radius(둥근 테두리)
border-radius: __px;
--에 숫자가 높을수록 곡선형태 뚜렷
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
🤩Margins(여백)
👉각면에 대한 여백을 지정하는 속성이 있음
- margin-top
- margin-right
- margin-bottom
- margin-left
👉모든 여백 속성은 다음 값을 가진다
- auto - 브라우저가 여백을 계산
(컨테이너 내에서 요소를 가로 중앙에 배치. 그러면 요소가 지정된 너비를 차지하고 나머지 공간은 왼쪽과 오른쪽 여백 사이에 균등하게 분할됨) - 길이 - 여백을 px, pt, cm 등으로 지정
- % - 포함하는 요소 너비의 %로 여백을 지정
- inherit - 여백이 상위 요소에서 상속되어야함을 지정
👉Shorthand
side와 마찬가지로 왼쪽부터 top, right, bottom, left 순서로.
🤩Padding
- border과 content 사이의 공간
- margin과 비슷하다.
🤩Height/ Width(높이/너비)
👉속성
- auto - 기본값. 브라우저는 높이와 너비를 계산
- length - 높이/ 너비를 px.cm등으로 정의
- % - 컨테이너 블록의 너비를 백분율로 정의
- initial - 높이/ 너비를 기본값으로 설정
- inherit - 높이/ 너비는 부모값에서 상속
참고) height과 width 특성이 패딩, 테두리, 또는 여백을 포함하지 않음! 요소의 패딩, 테두리 및 여백 내부 영역의 높이 / 너비를 설정합니다!
🎠max-width(최대 너비)
- 최대 너비를 설정하는데 사용
🤩Text
🎠Alignment(정렬)
- text-align - 텍스트의 수평 정렬을 설정하는데 사용
- right, left, center
- justify - 각 라인마다 라인이 동일한 폭을 갖도록.
왼쪽과 오른쪽의 여백이 straight
🎠Decoration
- 텍스트에서 장식을 설정하거나 제거하는데 사용
- text-decoration: none; - 링크에서 밑줄을 제거하는데 자주 사용
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
🎠Transformation(변환)
- text-transform - 대문자와 소문자를 지정하는데 사용
- 모든 것을 대문자 또는 소문자로 바꾸거나 각 단어의 첫글자를 대문자로 바꾸는데 사용
ex)
대문자) THIS IS SOME TEXT.
{text-transform: uppercase;}
소문자) this is some text.
{text-transform: lowercase;}
첫글자) This Is Some Text;
{text-transform: capitalize;}
🎠Spacing(간격)
- text-indent -텍스트 첫 줄의 들여쓰기를 지정하는데 사용
ex) text-indent: 50px; - letter-spacing - 텍스트에서 문자 사이의 공백을 지정하는데 사용
간격을 늘릴 때: letter-spacing: 3px;
간격을 줄일 때: letter-spacing: -3px; - line-height - 줄 사이의 간격을 지정하데 사용
- word-spacing - 단어 사이의 공백을 지정하는데 사용
- white-space - 요소 내부에 공백을 처리하는 방법을 지정
white-space: nowrap; 줄바꿈을 비활성화
🎠Shadow
- text-shadow - 텍스트에 그림자를 추가
- 가장 간단한 사용법에서는 수평 그림자(2px)와 수직 그림자(2px)만 지정
ex)
text-shadow: 2px 2px;
text-shadow: 2px 2px 5px red;
/*흐림효과*/🤩Links
👉링크 상태
- a:link -방문하지 않은 정상적인 링크
- a:visited -사용자가 방문한 링크
- a:hover -사용자가 마우스를 올려 놓을 때의 링크
- a:active -클릭하는 순간의 링크
👉순서 규칙
- a : hover는 a : link 및 a : visited 뒤에 와야합니다.
- a : active는 a : hover 뒤에 와야합니다.
😉참고
도움이 되었습니다 😁