11/2 34-8 [CSS] Font

주말에 정리 !

 

1. 글자 크기 

  상대적인 비율을 나타내는 크기
  em:부모 요소의 텍스트 크기에 대한 비율
  rem:최상위 요소(html태그)의 텍스트크기에 대한 비율

++CSS로 html { 사이즈 설정}  해 버리면 모든 글자가 설정 해놓은 크기로 변해버린다 !

적용 전

      <h3>텍스트 크기 및 글꼴</h3>
      글자 크기(기본 텍스트)<br />
      <span style="font-size: 12pt;">글자 크기 12pt</span><br />
      <span style="font-size: 1em;">글자 크기 1em</span><br />
      <span style="font-size: 1rem;" >글자 크기 1rem</span><br />
      <span style="font-size: 24pt; font-family:맑은고딕 ">글자 크기 24pt</span><br />
      <span style="font-size: 2rem;">글자 크기 2rem</span><br />
      <span style="font-size: 0.8em;">글자 크기 0.8em</span><br />
      <span style="font-size: .8em;">글자 크기 .8em</span><br />
      <span style="font-size: .8rem;">글자 크기 .8rem</span><br />
      <span style="font-size: 1.8em; font-family: 돋움체; ">글자 크기 1.8em,글꼴 돋움체</span><br />
      <div style="font-size:12pt">글자 크기<br/>
         <span style="font-size: 1em;" >글자 크기 1em</span><br />
         <span style="font-size: 1rem;">글자 크기 1rem</span><br />
      </div>
      <style>
          span{
              border:1px red solid;
           }
      <style>

---

 

2.글자 두께 및 스타일

적용 전

 <h3>텍스트 두께 및 스타일</h3>
      <span style="font-weight:bold; font-style:italic;">텍스트 두껍게,스타일은 기울이기 </span>
      <address style="font-style:normal;">서울시 종로구 탑골</address>

---

 

3.글자 사이의 간격

적용 전

 <h3>글자 사이의 간격</h3>
      <span style="letter-spacing:0.5em;">한국소프트웨어 인재개발원입니다.</span>

 

 

4.줄 사이의 간격(블락 엘리먼트 )

 블락 엘리먼트는 컨텐츠 영역의 세로폭이 컨텐츠 크기였다가,  5em만큼 세로폭이 늘어나서 마치 줄간격이 생기는 효과가 난다.

적용 전

 <h3>줄 사이의 간격</h3>
      <h4 style="line-height:5em ;" >블락엘리먼트에 줄 간격 적용 줄이 늘어난 것 처럼 보이나 B.E높이가 높아진 것 </h4>
      <h4>블락엘리먼트에 줄간격 적용</h4>
      <h4>블락엘리먼트에 줄간격 적용</h4>

 

4-2 줄 사이의 간격(인라인 엘리먼트)

    인라인 엘리먼트는 컨텐츠 영역의 크기가 변하지 않고( 이건 가로배치니까!) , 5em만큼 줄간격이 생긴다-

적용 전

 <div class="inline">
          <h4>인라인 엘리먼트에 적용하기</h4>    
          <span style="line-height:5em ;">인라인 엘리먼트</span>
          <span>인라인 엘리먼트</span>
          <span>인라인 엘리먼트</span>
 </div>

---

5.가운데 정렬하기

5-1 수직으로 가운데 정렬

적용 전

  <h3>수직으로 가운데 정렬시</h3>
      <div style="background-color: blanchedalmond; height:200px;line-height:200px;">
          텍스트
      </div>

 

 

5-2 영역의 정 가운데에 정렬

 height속성 과 line-height속성의 값을 동일하게 준다  이건 외우기 !!!!!!!!!!!!

 <h3>영역의 정 가운데 정렬시</h3>
      <div style="background-color: blanchedalmond; height:200px;line-height:200px;  text-align: center; " >
          텍스트
      </div>