[CSS] 태그 & 속성

 

1. font-weight : normal | bold | bolder | lighter | namber | initial | inherit

 

글자 굵기를 정하는 속성입니다 / 상속 o / 애니메이션 o

• normal : 숫자 400과 같습니다 (기본값)
• bold : 숫자 700과 같습니다
• lighter / bolder : 상속된 값보다 얇고 / 굵은 굵기입니다
• number : 100, 200, 300, 400, 500, 600, 700, 800, 900
• initial : 기본값으로 설정합니다

 

2. line-height : normal | length | number | percentage | initial | inherit

 

줄 높이를 정하는 속성입니다 / 상속 o / 애니메이션 o

• normal : 보통 1.2입니다 (기본값)
• length : 길이로 줄 높이를 정합니다
• number :  글자 크기의 몇 배인지로 줄 높이를 정합니다
• percentage : 글자 크기의 몇 %로 줄 높이를 정합니다

 

3. vertical-align : baseline | sub | super | top | text-top | middle | bottom | text-bottom | percentage | lengh | inherit

 

인라인 블록 등을 포함한 모든 인라인요소의 수직 정렬을 위해 사용 / 상속 x

• baseline : 기본값으로 부모 요소의 기준 선에 맞춤
• sub : 부모의 아래첨자 기준선에 맞춤
• super : 부모의 윗첨자 기준선에 맞춤
• text-top : 요소의 맨 위를 부모 font의 맨 위에 맞춤
• text-bottom : 요소의 맨 위를 부모 font의 맨 아래에 맞춤
• middle : 부모 요소 중앙에 위치

 

4. white-space : normal | nowrap | pre | pre-wrap | pre-line | initial | inherit

 

스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성입니다 / 상속o / 애니메이션 x

	스페이스와 탭	줄바꿈	자동 줄바꿈
normal	병합	병합	o
nowrap	병합	병합	x
pre	보존	보존	x
pre-wrap	보존	보존	o
pre-line	병합	보존	o

• 스페이스와 탭 - 병합은 1개의 공백으로 바꾸고 보존은 입력된 그대로 출력
• 줄바꿈 - 병합은 1개의 공백으로 바꾸는 것이고 보존은 입력된 그대로 출력
• 자동 줄바꿈 - 내용이 영역의 크기를 벗어날 때 처리방법 (o는 자동으로 줄바꿈하여 영역 내에 내용 표시, x는 영역을 벗어나더라도 입력된 대로 출력)

 

5. border-color : color | transparent | inherit

 

지정된 요소의 테두리 색상을 지정한다

transparent : 기본값(default), 투명하게 지정

 

css에서 사용할 수 있는 색상코드

 

• Hexadecimal color (가장 많이 사용)
  { border-color : #00ff00; }
• RGB color
  { border-color : rgb(255,0,0); }
• RGBA color
  { border-color : rgba(255,0,0,0.5); }
• HSL color
  { border-color : hsl(120,65%,75%); }
• HSLA color
  {border-color : hsla(120,65%,75%,0.3); }
• Predefined/Cross-browser color names (HTML과 CSS에서 사용 가능한 색상 이름은 147가지이다)
  { border-color:red; }

 

6. transition-property : all | none | <속성 이용>

 

트랜지션을 적용할 속성 지정하기

• all : all을 사용하거나 transition-property를 생략할 경우, 요소의 모든 속성이 트랜지션 대상이 됩니다
• 속성 이름 : 트랜지션을 적용할 속성 이름을 지정합니다. 배경 색만 바꿀것인지, width 값을 바꿀것인지 원하는 대상만 골라 지정할 수 있습니다. 속성이 여러 개일 경우, 쉼표(,)로 구분해 나열합니다.

 

7. transition-timing-function : linear | ease | ease-in | ease-out | ease-in-out

 

트랜지션 속도 곡선 지정하기

• linear : 시작부터 끝까지 똑같은 속도
• ease : 처음에는 천천히 시작하고 점점 빨라지다가 마지막엔 천천히 끝냅니다(기본값)
• ease-in : 시작을 느리게 합니다
• ease-out : 느리게 끝냅니다
• ease-in-out : 느리게 시작하고 느리게 끝냅니다

 

 

8. position : static | relative | absolute | fixed

 

문서 상에 요소를 배치하는 방법을 지정

• static : 요소를 문서의 흐름에 맞추어 배치합니다
  앞에 설정된 position을 무시할 때 사용되기도 합니다
  top, bottom, left, right 속성값이 적용되지 않습니다
• relative : 이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있습니다
  static의 원래 위치부터 계산합니다
  top, bottom, left, right의 위치를 같이 설정할 수도 있습니다
• absolute : 원하는 위치를 지정해 배치합니다
  하지만 가장 가까운 상위 요소를 기준으로(단, static은 제외) 위치가 결정됩니다
  상위 요소가 없으면 위치는 html를 기준으로 설정됩니다
• fixed : 지정한 위치에 고정해 배치합니다. 화면에서 요소가 잘릴 수도 있습니다
  웹 페이지가 스크롤 되어도 고정 위치로 지정된 요소는 항상 같은 곳에 위치하게 됩니다

 

9. display : none | block | inline | inline-block

 

요소를 어떻게 보여줄지를 결정합니다

• none : 요소를 랜더링하지 않도록 설정합니다 visibility 속성을 hidden으로 설정한 것과 달리, 영역도 차지하지 않습니다
• block : div 태그, p 태그, h 태그, li 태그 등이 이에 해당됩니다
  기본적으로 가로 영역을 모두 채우며, 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다
• inline : span 태그, b 태그, i 태그, a 태그 등이 이에 해당됩니다
  block과 달리 줄 바꿈이 되지 않고 바로 오른쪽에 표시됩니다
• inline-block : block과 inline의 중간 형태라고 볼 수 있는데, 줄 바꿈이 되지 않지만 크기를 지정할 수 있습니다

 

10. box-sizing : content-box | border-box

 

박스는 content, padding, border, margin로 이루어져 있습니다

표준 브라우저는 border와 padding 값을 제외하기 때문에 내부 값이 빠져나올 경우 box-sizing 속성을 사용하면 유용합니다

• content-box : 기본값으로 너비, 높이는 content 영역만을 의미함
  (border, padding, margin 제외)
• border-box : 너비, 높이 계산시 content, padding, border를 포함함
  (margin 제외)

 

11. box-shadow : offset-x(수평 거리) offset-y(수직 거리) blur-radius(흐림 정도) spread-radius(확산 정도)

요소의 테두리에 그림자 효과를 주는 기능입니다

• 바깥 테두리, 색상 지정 시
  box-shadow: offset-x offset-y color;
• 바깥 테두리, 흐림 있고, 색상 지정 시
  box-shadow: offset-x offset-y blur-radius color;
• 바깥 테두리, 흐림 있고, 확산 있고, 색상 지정 시
  box-shadow: offset-x offset-y blur-radius spread-radius color;
• 안쪽 테두리, 색상 지정 시
  box-shadow: inset offset-x offset-y color

 

12. outline : color | style | width | offset

 

테두리와 외곽선은 매우 유사하지만, 다음의 두 가지 차이점이 존재합니다

• 외곽선은 요소 콘텐츠의 밖에 그려지며 절대 공간을 차지하지 않습니다
• 명세에 따르면 외곽선은 직사각형일 필요가 없습니다. 보통 직사각형으로 그리기는 합니다

outline-offset

• 테두리의 가장 자리와 외곽선 사이의 여백을 지정한다
• 속성값 : length, inherit

 

 

13. text-indent : 길이값 | %

 

• 문단의 첫줄 들여쓰기할 때 쓰는 속성입니다
• 텍스트를 담고 있는 블록 컨테이너에 적용합니다
• 값이 양수이면 들여쓰기, 값이 음수이면 내어쓰기가 됩니다
• 기본값은 0입니다

 

 

14. min-height, max-hetght

요소의 최소/최대 높이를 설정합니다

height 속성의 사용값이 자신의 값보다 작아지거나/커지는것을 방지합니다

 

height: 100vh = 100% of the viewport height

height: 100% = 100% of the parent's element height

 

viewport 단위는 상대 단위이므로 객관적인 측정이 없고 뷰포트의 크기에 따라 결정됩니다

백분율로 정의된 요소의 크기는 상위 요소에 의해 결정되는 반면, 상위 요소가 화면의 전체 높이를 채우는 경우에만 화면의 전체 높이를 채우도록 할 수 있습니다

 

 

 

15. display: flex;

 

부모 속성 = display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content

 

display: flex;

align-items: center;

justify-content: center; // 가로 가운데 정렬

flex-direction : row; // 기본값

flex-direction : column; // 수평으로 100% 채워서 나열

flex-direction : column-reverse; // column의 순서를 뒤바꾼다

 

자식 속성

order, flex-grow, flex-shrinlk, flex-basis, flex, align-self

 

flex-basis : 200px; // 선택된 item의 크기를 지정하는 방법

flex-grow : 1; // 각 item을 커지게 해서 background의 여백의 1/n을 나눠 갖는다

flex-shrink : 0; // container의 크기가 item보다 작아지는 경우, 자동으로 크기가 줄어들지 않는다

flex-shrink : 1; // 

align-self: center; // 세로 가운데 정렬