🖌️CSS Text

요소의 문자 스타일부여

속성정리

direction - 텍스트의 작성 방향을 설정(텍스트의 방향을 반대로 설정도 가능)
letter-spacing - 글자사이의 간격
word-spacing - 단어 사이의 간격
text-align - 정렬(수평방향)
vertical-align -정렬(수직방향)
text-decoration - 텍스트에 효과를 설정 or 제거 할때 사용
line -height -줄간격 설정
text-shadow -그림자 효과 설정

• text-decoration
  • text-decoration : 속성값 정리
  • overline : 텍스트(컨텐츠)에 윗줄 생성
  • line-through : 텍스트를 통과하는 가운데줄 생성
  • underline : 텍스트에 밑줄 생성.
  • none : 텍스트 라인제거(a태그에 많이 활용)

폰트 설정(크기, 스타일)

font-family : 글꼴(폰트 지정)지정
font-style : 이탤릭체의 지정.(글자 기울임)
font-weight : 굵기지정

font-family의 속성값은 가장 앞에 있는 속성값부터 적용.
만약 가장 앞에있는 속성값이 해당 PC에 존재하지 않는다면
그 다음 글꼴 스타일을 적용

font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

글꼴 크기 단위

% : 기본크기 100%를 기준으로 두고 그에대한 상대적 크기를 지정.
px : 스크린의 픽셀을 기준으로 하는 절대적 크기 지정
em : 기본크기를 1em으로 두고 그에대한 상대적 크기를 지정하는 단위
rem : 기본크기를 1rem으로 두고 그에대한 상대적 크기를 지정하는 단위

em vs rem

em의 경우는 상위 요소의 영향을 받기때문에 의도하지 않은 사이즈로 출력될수 있음
rem의 경우는 body의 기본 사이를 기준으로 크기를 부여하기 때문에
현업에서도 많이 사용하는 추세

em단위 적용시

<div id="div1">
    크기 1.2em(16.8px)
    <div id="div2">
        크기 1.2em(16.8 * 1.2 = 20.16px)
        <div id="div3">
            크기 1.2em(20.16 * 1.2 = 24.2px)
        </div>
    </div>
</div>

rem단위 적용시

<div id="div1">
    크기 1.2em(16.8px)
    <div id="div2">
        크기 1.2em(16.8px)
        <div id="div3">
            크기 1.2em(16.8px)
        </div>
    </div>
</div>

---

🖌️CSS background

background : 배경(해당 요소에 배경을 부여하는 속성.)

1. background-color
   - 해당 html 요소의 배경색 설정 
   
2. background-image
   - 해당 html 요소의 배경으로 나타날 이미지 설정
   
3. background-repeat
   - 이미지의 반복(배경의 반복)
   
4. background-position(y축, x축 / 수치로 조정하면 x y축)
   - 반복되지 않는 배경이미지의 상대 위치 설정.
   - 단. 배경 이미지가 반복되지 않아야한다.
   
5. background-attachment
   - 위치고정 
   
6. background shorthand
   - 속성명을 일일히 쓰지 않고 한줄에 전부 모든 속성을 표현하는방법
   background : color / image | repeat | attachment | position

background-image: url("이미지경로")

background-image: url("../img/1.png");

기본적으로 body에 image를 배경으로 둔다면 바둑판식 배열이 기본값.
no-repeat이라는 속성값을 부여해 반복을 없앨수 있으며
x,y축의 제어도 가능.

no-repeat : 반복제거 
repeat-x, repeat-y 속성값을 이용해
x축 혹은 y축으로만 반복을 진행할수도 있음.
background-repeat: no-repeat; 

background-repeat: repeat-y;*/
/* background-repeat: no-repeat; 
top, left 등의 값으로도 배경의 위치를 지정할수 있지만
px등 단위를 이용한 위치 배정이 자주 사용되는 편.
background-position : 150px 250px; 
배경 고정.
background-attachment: fixed;