11/4 36-1 [CSS]Pharagraph

문단 관련 CSS속성들

속성 적용 전

1. 컨텐츠 수평방향 정렬 (text-align : 종류선택 이용)

종류 : start , end , left , right , center , justify , match-parent

<div>
      <h3>컨텐츠 수평방향 정렬(text-align)</h3>  
      <div style="background-color: rgb(39, 104, 226); text-align: center;">블락 엘리먼트</div>
      <span style="background-color: green; text-align: center;">인라인 엘리먼트(text-align의미없음)</span>
  </div>

2. 텍스트 꾸미기 (text-decoration : 종류선택 이용)

 

<div>
	<h3> 텍스트 꾸미기(text-decoration)</h3>    
      <span style="text-decoration: overline;">윗줄긋기</span><br />   
      <span style="text-decoration: underline;">밑줄 긋기</span><br />      
      <span style="text-decoration: line-through;">가운데선 긋기</span><br />
      <a href="http://www.nate.com" style="text-decoration:none;" >네이트</a>
      // none은 기본들어가 있는 속성들을 없애 줌
 </div>

 

3.들여쓰기 (text-indent : 값 설정 ) & 수직방향 정렬(vertical-align)

 <div>
	  <h3>들여쓰기(text-indent)</h3>
      <div style="text-indent:5em ;">블락 엘리먼트</div>
      <!--들여쓸 가로 공간이 없음.적용 안됨-->
      <span style="text-indent:5em ;">인라인 엘리먼트(적용x)</span>
      
      <h3>수직방향 정렬(vertical-align)</h3>
      <!-- 세로로 움직일 공간이 없음으로 둘다 적용 안됨-->
      <div style="background-color:brown; vertical-align: middle; height: 200px ;" >블락 엘리먼트(적용x)</div>
      <span style="background-color:rgb(241, 232, 101) ; vertical-align:middle;height: 200px ">인라인 엘리먼트(적용x)</span><br />
      <img src="images/sumnail.jpg" width="200" height="200" alt="제품" style="vertical-align:middle;"/>제품 이미지(적용o)
</div>

sumnail.png

0.03MB

 

4.블락엘리먼트의 컨텐츠 정 가운데 정렬 하는 법(text-align,line-height)

 text-align으로 가로로 글자를 가운데로 오게하고

line-height를 height만큼 준다 !

  <div>
<h3>블락엘리먼트의 컨텐츠 정 가운데 정렬방법(text-align,line-height)</h3>
      <div style=" text-align: center; background-color:brown; vertical-align:middle; line-height: 200px ;" >블락 엘리먼트</div>
  </div>

문단 관련 CSS속성들

컨텐츠 수평방향 정렬(text-align)

블락 엘리먼트

인라인 엘리먼트(text-align의미없음)

text-align:justify적용 '비선 실세' 최순실(60·구속기소)씨를 둘러싼 의혹을 수사중인 검찰이 최씨의 딸 정유라(20·개명 전 정유연)씨도 필요하면 소환해 조사하겠다는 방침을 재확인했다. 검찰 특별수사본부(본부장 이영렬 서울중앙지검장) 관계자는 22일 "오늘 이화여대를 압수수색했으니 향후 수사가 진행될 것"이라고 밝혔다. 이 관계자는 "입학이나 학사관리와 관련해 정씨 본인이 직접 관련된 비리 혐의가 있다거나, 꼭 그런 것이 없더라도 조사해야 할 필요성이 있다고 판단되면 정씨를 소환해서 조사할 예정"이라고 말했다. 지난해 이화여대에 입학한 정씨는 체육특기자 입시 과정과 입학 이후 학사관리에서 부당한 특혜를 받았다는 의혹에 휩싸였다. 지난달 시민단체 서민민생대책위원회가 최경희 전 이대 총장과 최씨 모녀를서울중앙지검에 고발하면서 수사 대상에도 올랐다. 논란이 확산하자 교육부가 특별감사를 진행한 결과, 이런 의혹들중 상당수는 사실로 드러나기도 했다. 교육부는 이대가 지침과 달리 면접고사장에 정씨가 금메달을 반입하도록 허가했으며, 정씨가 수업에 거의 제대로 참여하지 않고 출석 대체물을 내지 않았음에도 출석과 학점을 인정해줬다고 발표했다.

텍스트 꾸미기(text-decoration)

윗줄긋기
밑줄 긋기
가운데선 긋기
네이트

들여쓰기(text-indent)

블락 엘리먼트

인라인 엘리먼트(적용x)

수직방향 정렬(vertical-align)

블락 엘리먼트(적용x)

인라인 엘리먼트(적용x)
제품 이미지(적용o)

블락엘리먼트의 컨텐츠 정 가운데 정렬방법(text-align,line-height)

블락 엘리먼트