CSS_text 효과주기, font

1. color : 글자색
2. ★★text-align : inline 요소 가운데 정렬 (margin: 0 auto와 같음)

• ★★부모에 적용한다. (본인한테 적용 X)
  --> 요소 안에서 내용물을 가운데정렬한다고 생각.
  --> inline은 요소가 내용물과 width가 같으니까 안되는거임.
  --> 그래서 영역이 더 큰 부모에게(대게 블록레벨) 적용하는거임.
  --> 니 안에 있는 inline요소 텍스트에게 가운데 정렬 적용해줘
• left(기본값)
• center
• right
• 가운데정렬 할 때 해당 사이즈px 주면 됨
  -> height : 00px로 줄 때 같이 text-align도 주자.
  -> px값 줄 때 같이 놓으면 px값 찾으러 위로 안올려도 되니까 이것이 편하고, 유지보수때도 편하다.

3. ★text-decoration : 글자에 줄 긋기

• underline : 밑줄
  • text-underline-offset : 5px; -> 밑줄 간격 띄우기
• overline : 윗줄
• line-through : 중앙선
• ★none : 선 없음 (a태그 쓸 때 밑줄있으면 안 예쁘니까)

4. text-transform: 대소문자 변경 (영어관련이라 한국에선 잘 안쓰임)

• capitalize : 각 단어의 첫 글자만 대문자로 변경
• uppercase : 다 대문자
• lowercase : 다 소문자

5. ★text-shadow : 글자 그림자

• 단위 : px (x축, y축, 번짐도, 색), 단위는 정수단위로 하는 것을 권장
• 번짐도는 음수가 없다.
• 양수 : 우측, 하단
• 음수 : 왼쪽, 상단
• ★그림자 여러개 적용시 옆에 , 치고 똑같이 작성하면 됨
  --> text-shadow: 1px 1px 0px red, -1px 1px 0px blue

한방코드 : shadow빼고 됨. 하지만 별도로 적는것을 추천

---

1. white-space : 공백처리 (nowrap만 기억하면 됨)

• normal : 기본값
• ★nowrap : 여러개의 공백을 한 칸으로 표시.
  --> 오버되는 부분은 줄바꿈없이 한줄로 표시
• pe : 여러개의 공백을 그대로 표시.
  --> 오버되는 부분은 줄바꿈없이 한줄로 표시
• pre-line : 여러개의 공백을 한칸으로 표시.
  --> 오버되는 부분은 줄바꿈
• pre-wrap : 여러개의 공백을 그대로 표시.
  --> 오버되는 부분은 줄바꿈

2. letter-spacing : 글자간 간격
3. word-spcding : 단어간 간격
   -> 단위는 다 px
4. word-break : 글자를 한글자씩 분리 여부 결정(기억하는 것이 좋음!)

• normal : 기본값
• break-all : 분리 (영어단어같은 경우 단어 크기가 안맞는데 이거 쓰면 나눠져서 끊어서 입력됨)

5. ★★★line-height : 줄간격(세로)

• 단위 : px, 정수
• 정수 : 내용물 만큼의 공간을 차지하게 된다는 뜻.(2 : 내용물의 2배 공간 차지)
• 지정해놓은 높이가 아닌 더 많이 잡게 되면 그 잡은 높이에 가운데정렬이 되므로 주의해야함.
  • 위와같은 경우 레이아웃이 어그러질 경우가 있음
    border값을 주고 box-sizing: border-box;를 주고 line-height를 주는 경우 주의해야 한다.
    50px 영역을 가지고 있을 때 border 1px주고 box-sizing을 주면 49px영역을 갖게 되고, line-height 50px을 주었을 때 50px만큼을 갖게 되기 때문에 border값이 안나오게 된다.
• div{ul{li}}
  위 구조일 때 위아래에 여백두고 가운데 정렬할 때 li에 마진주면 되지만 div에 line-height주면 알아서 공간먹고 가운데정렬도 해준다.
  

말줄임표(1줄짜리. 아래 3줄 다 쓰면 됨)
white-space : nowrap; -> 문장을 한 줄로
overflow : hidden; -> 넘치는 부분을 안보이게 숨김
text-overflow : ellipsis; -> 넘쳐서 숨긴 문장을 ... 으로 표시

말줄임표(n줄짜리)
overflow: hidden; -> 넘치는 부분을 안보이게 숨김
display: -webkit-box; -> box설정
-webkit-box-orient: vertical; -> 어느 방향으로 줄넘김 할건지
-webkit-line-clamp: 2; -> 몇번째 줄까지만 보여주고 ...을 붙이겠다.

-webkit-box-orient은 vertical만 기억해도 괜찮다.
어짜피 가로방향으로 글을 쓰니까.
하지만 이것보단 높이 지정해놓고 hidden하는게 편하다.

---

★폰트(font) : 저작권 주의

1. font-style : 글자 기울임 (잘 안쓰임)

• nomal : 기본값, italic : 기울이기

2. font-variant : 글꼴 변형 (잘 안쓰임)

• namal : 기본값, small-caps : 소문자를 대문자로 변경, 크기 작게(대문자인경우는 효과x)

3. ★font-weight : 두께 (bold때문에 사용)

• normal : 기본값, bold : 두껍게, lighter : 얇게
• 폰트에따라 lighter가 적용이 안 될 수도 있다.
• 100~900 수치화도 가능 (대체로 기본이 400, 900으로 갈 수록 bold)

4. ★font-size : 글씨 크기

• 단위 : px, %
• 부모대비 폰트사이즈주는 법(em)
  font-size: 1.5em;
  em : 부모대비 n배
  부모에 사이즈가 없으면 기본사이즈 기준으로 배수가 됨.
  반응형일 때 자주 쓰임.
  pc화면 -> 핸드폰화면으로 변경될 때 사이즈를 줄여야 하는 경우가 있음.
  그럴 때 px로 하면 다 바꿔야해서 불편하지만 em으로 하면 부모 사이즈만 바꾸면 되니 유지보수할 때 편하다.
  (%랑 차이 없음.)
  (만능은 아님. 너무 작게 될 수도 있음)

5. font-family : 글씨체

• , 로 우선순위 구분할 수 있다.

font-family: 'Courier New', Courier, monospace; 

• Courier New 폰트가 없으면 Courier. 가 없으면 monospace

한방 코드

• font : style variant weight size/line-height family
• 글씨체 무조건 써야지 한방코드 쓸 수 있음.
• 어짜피 weight랑 size만 자주 쓸거라 따로 쓰는걸 권장
• size작성할 때는 /line-height를 써야한다.

box-shadow

• 박스에 섀도는 box-shadow : 0 0 5px 0 red; (x축 y축 번짐도 사이즈 색)
  이렇게 하면되는데 대신 부모가 overflow:hidden을 주면 그림자가 가려있을 수 있다.
  그래서 box-shadow는 부모가 가지고 있는 것이 좋다.
• 여러개 적용시 옆에, 치고 똑같이 작성
  • box-shadow : 0 0 5px 0 red, 0 0 5px 10 blue;
• 테두리색은 별도로 지정 불가
• 밑줄이나 테두리로 대신 사용이 가능하다.
• 박스에 테두리를 줘서 크기가 커져 레리아웃 어그러지는 경우 사용해도 좋음
  • 테두리같이 적용하면 서로서로 그림자가 겹쳐진다. 그래서 border로 테두리를 주면 박스가 겹치는 부분은 2px, 끝부분은 1px이 되지만 box-shadow는 다 1px로만 적용된다.
• 그림자는 그림자끼리만 덮을 수 있다. 그림자이기 때문에
• 그림자는 영역을 먹지 않는다.