[TIL] CSS 여러 속성들

CSS declarations

단위 (Units)

절대 길이 단위 : cm, mm, px 등
상대 길이 단위 : em, rem, vw, vh, % 등

• em은 부모의 font-size에 따라 기준점을 세워 배수로 값을 입력한다.
  ex) 부모의 font-size가 32px 이면 자식에게 2em을 주면 font-size는 64px가 된다.
• rem은 Body 요소의 font-size에 따라 기준점을 세워 배수로 값을 입력한다.
• vmin는 화면 넓이와 높이중 작은 값을 기준으로 하는 백분율 단위
• vmax는 화면 넓이와 높이중 큰 값을 기준으로 하는 백분율 단위

overflow

overflow 속성은 요소의 콘텐츠가 요소를 벗어날만큼 크다면 어떻게 처리할지 정하는 속성

• 기본값은 visible
• overflow-x,overflow-y 처럼 축별로 값을 설정할 수 있음
• 주로 사용하는 방법은 overflow:hidden으로 콘텐츠를 요소의 크기만큼 맞추기 위해 잘라냄

background

• 요소뒤에 이미지 또는 배경색을 설정하여 배경으로 설정할때 사용
• background-image : url을 이용하여 이미지를 불러옴
• background-color : 요소의 배경 색을 지정
• background-repeat : 배경이미지를 어떻게 반복할 것인지 지정
  • 초기값 repeat과 no-repeat 주로 사용
• background-position : 배경이미지의 위치를 지정
  • 주로 x축 y축으로 값을 주거나, center 옵션을 사용하여 가운데 배치
• background-size : 배경 넓이와 높이를 지정하는 속성
  • cover 넓이와 높이에 맞게 잘라냄
  • contain 원본 비율에 맞게 이미지를 모두 표현함
  • background-size:100% 이미지를 width와 height에 맞게 압축함

⁙ img태그는 의미가 있는 이미지에 사용되고 background-image는 의미가 없는 이미지, 또는 스크린리더가 읽지 않아야 하는 곳에 사용된다.

body 요소에 backgorund 스타일을 주면 제작자의 의도에따라 바디 그 이상의 영역(html)까지
배경이 적용된다. 하지만 html 요소에 직접 background 스타일을 주면 body요소에 적용된 background는 body에만 적용된다.

font

속성

• font-size : 글꼴의 크기를 변경
  • 주로 px을 단위를 사용하나 rem,em도 자주 사용
• font-family : 글씨체를 변경
  • 주로 웹 폰트를 사용하여 CSS에 Import하여 사용
• font-weight : 글꼴의 굵기를 지정
• text-transform : 글자의 소문자나 대문자로 변경하여 표현
• font-style : 글꼴의 기울기를 표현
• text-align : 글자의 정렬을 정하는 속성
• text-decoration : 글자의 장식을 설정할때 사용

font format

• font format 이란 폰트를 구현하는 방법이며, 브라우저 별로 서로 다른 포맷을 지원하기 때문에 브라우저별 지원 정보를 알아 둘 필요가 있음

• eot : 마이크로소프트가 웹에서 사용하기 위해 제안한 글꼴 포맷. IE 에서만 지원 가능

• woff : 여러 회사들의 협업으로 제안된 포맷이며 가장 널리 사용되는 웹 글꼴 포맷

• otf : 어도비와 마이크로소프트가 협력해서 만든 TTF의 개선판

• ttf : 애플과 마이크로소프트가 고안한 벡터 글꼴 포맷, 대부분의 웹 브라우저에서 웹 글꼴로 TTF를 지원

• svg : 벡터 데이터를 저장하는 SVG를 활용한 글꼴 표현

• woff2 : WOFF 포맷을 개선해 30% 정도 더 작은 글꼴 파일로 압축, 폰트의 용량을 줄이는데 효과적

opacity

• opacity는 요소의 투명도를 지정
• 값은 0.0 과 1 사이의 숫자를 지정

color

• 색상은 색상 이름, RGB값, HEX값, HSL값으로 색상을 지정할 수 있음

1.색상 이름(color keyword)

• 브라우저는 140 가지 색상 이름을 지원
• ex) red,blue,magenta 등등

2.RGB, RGBA값

• 빛의 3원색인 빨간색(Red), 초록색(Green), 파란색(Blue)를 혼합하여 색을 나타내는 방식.
  RGB 값은 0 ~ 255의 값으로 표현

3. HEX 값(16진수)

• HEX 값은 16진수 6자리 코드로 색상을 표현하는 방식
• 6자리 코드는 각각 2자리씩 빨간색, 녹색, 파란색에 대한 값을 표현
• ex) 빨간색은 #FF0000, 보라색은 #800080

4. HSL, HSLA

• HSL 색상 모델은 색상(hue), 채도(saturation : 선명도), 명도(lightness : 밝기)를 통해 색상을 표현

p {
	color: hsl(0, 100%, 50%);
  	color: hsla(0, 100%, 50%, 0.5);
}

---

Text

line-height

• 글자 라인의 높이를 지정하여 텍스트 라인과 라인 사이의 간격(leading)을 조정할 때 사용

letter-spacing

• 글자 사이의 간격을 조절
• 초기값 : normal 현재 폰트의 기본 간격입니다.
• px, em , rem 등을 사용하여 간격 추가

text-align

• 글자들의 정렬방식을 정함
• 정렬 방식에는 왼쪽 정렬(left), 오른쪽 정렬(right), 가운데 정렬(center), 양쪽 정렬(jutify)이 있음

vertical-align

• 인라인 요소의 수직 정렬을 맞추기 위해 사용하는 속성

1. baseline : 베이스라인을 부모의 베이스 라인에 맞추어 정렬
2. sub: 베이스라인을 부모의 subscript(아래첨자)-baseline 에 맞추어 정렬
3. super : 베이스라인을 부모의 superscript(윗첨자)-baseline에 맞추어 정렬
4. top: 상단의 위치를 전체 라인의 상단으로 정렬
5. text-top: 상단의 위치를 부모 엘리먼트의 상단으로 정렬
6. bottom: 하단의 위치를 전체 라인의 하단으로 정렬
7. text-bottom: 하단의 위치를 부모 엘리먼트의 하단으로 정렬
8. middle : 폰트의 중간 위치를 부모의 baseline + x-height의 절반에 해당하는 위치로 정렬

text-indent

• 텍스트 라인에서 텍스트가 시작하기 전의 빈 공간을 설정
• 들여쓰기 공간

text-decoration

• 텍스트에 붙는 라인을 꾸며주는 속성
• 텍스트의 상단, 하단에 라인을 그려줄 수 있고, 라인의 종류와 색상도 지정할 수 있음

text-overflow

• text-overflow 속성은 부모 컨테이너를 넘어간 컨텐츠가 어떻게 보여질지 결정하는 속성
• clip : 기본값, 컨테이너의 끝에서 텍스트를 자름
• ellipsis : 잘린 텍스트를 말줄임 표시 (...)

추석연휴가 끝나고 오전에 수업을 들으려니 피곤한감이 있었는데 커피를 마시면서 싹 날아가버렸다.
역시 커피 최고