[HTML] css 정렬

이현경·2021년 5월 28일
0

HTML

목록 보기
11/24
  • Ex_ 정렬
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
	*{margin:0; padding:0;}
	img{border:none;}
	h1{float:left; font-size:200%; background:red; padding:5px; color:#fff;}
	#content{width:400px;}
	p{text-align:justify;}
	p > span{float:right; border:3px dotted orange; font-size:250%;}
	img{vertical-align:top;}
  </style>
 </head>
 <body>
 <div id="content">
  <h1>금연일지</h1>
   <p>첫날은 담배냄새가 나지 않아서 좋았고, 다음날은 눈이 맑아진 것 같아 좋았고 그 다음날은 아들에게 당당하게 담배 피우지 말라고 말할 수 있어서 좋았다. 개인적인 기호를 법적으로 관리할 수도 없는 것이고 금연을 일사불란하게 실행한다는 것은 말도<span><img src="images/tabacco.jpg" alt="" /></span> 안되는 일이지만 애연가들 덕분에 그들과 더불어 원치 않게 죽어가는 많은 사람들의 넋은 누가 달래야 할 것인가</p>
  </div>
 </body>
</html>
  • Ex_ 정렬2
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
	*{margin:0; padding:0;}
	body{font:12px "굴림", Gulim;}
	li{list-style-type:none;}
	h1{font:bold 42px "굴림", Gulim;
	   background:lightgray;
	   padding:10px;
	   text-align:center;
	   letter-spacing:5px;}
	.intro{padding:10px; font-size:120%;}
	h2{width:100px; height:90px; font:bold 35px "굴림"; text-align:center;
	   margin-left:20px; padding-top:10px; color:white;}
	.tulip h2{background:#c00;}
	.jebi h2{background:#248;}
	.hobak h2{background:#f90;}
	.sunflower h2{background:#880;}
	.gallery p{width:120px; padding:10px; text-align:justify;}
	.gallery li{float:left;}
  </style>
 </head>
 <body>
   <h1>나의 아름다운 정원</h1>

   <div id="container">
      <p class="intro">사람들 아마  자신에게 <strong>자신감을 북돋워 주는</strong> 
      표정 있는 꽃들을 선호할 것이다. </p>

      <ul class="gallery">
         <li class="tulip"><h2>튜 울립</h2>
            <p>너무 화려하지 않으며 고귀한 느낌을 가지고 있다. 붉은 색이 단연 으뜸이며 한 송이만 있어도 빼어나다.</p>
         </li>
         <li class="jebi"><h2>제 비꽃</h2>
            <p>드물게 푸른색을 띠고 있으며 작지만 시원해 보이는 어린 꽃이라고 할 수 있다. 여럿이 함께 있을 때 더욱 아름답다.</p>
         </li>
         <li class="hobak"><h2>호 박꽃</h2>
            <p>색도 모양도 화려하며 이름과 걸맞지 않게 아름다운 꽃으로 매우 완숙한 이미지를 풍기는 꽃이다</p>
         </li>
         <li class="sunflower"><h2>해바 라기</h2>
            <p>태양만 바라보는 일편단심의 꽃으로 얼굴이 큰 편에 속하며 송이가 적어야 제격이다.</p>
         </li>
      </ul>
   </div>
 </body>
</html>
  • Ex_ clear
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
	*{margin:0; padding:0;}
	body{font:12px "굴림", Gulim;}
	#wrapper{width:550px; margin-left:10px; padding-top:10px;}
	p{text-align:justify;}
	.skate{width:250px; background:#ccc; padding:15px; float:left;}
	.football{width:210px; background:#eee; padding:15px; float:right;}
	.olympic{clear:left; background:#8cc; padding:15px;}
  </style>
 </head>
 <body>
  <div id="wrapper">
   <div id="wrapper">
    <div class="skate">
      <p>우리의 자랑 스포츠의 꽃 김은호 선수의 요즘 행보에 대해 일부의 사람들이 불만을 토로하고 있다. 그녀의 주류광고가 문제 된 것인데 그렇다면 김은호는 미성년자도 아닌데 왜 주류광고에 나오면 안 되고 다른 스타들은 되는... 이런 우스운 경우가 있을 수 있을까?  다른 스타들도 김은호처럼 소중한 우리의 스타고 김은호도 다른 사람들처럼 인형이 아닌 성인의 한 사람인데 말이다.</p>
    </div>
    <div class="football">
      <p>스포츠스타 박지수는 스타라는 말이 좀 퇴폐적으로 여겨지던 시절 그 말을 완전히 깨끗이 세척해서 원래 뜻 그대로 만들어 놓은 사람이다. 사람이 어쩌면 저렇게 참될 수 있을까 라고 생각하게 한 장본인. 그의 과거와 현재의 행동거지를 보며 노력과 지성의 결정체라고 감탄해 마지않던 행복한 기억을 되살린다. 어떤 약보다도 강하고 부작용 없는 정신강장제가 되어준 진정한 스타인 그를 존경하지 않을 사람이 있을까, 과연!!!</p>
    </div>
    <div class="olympic">
      <p>이번 올림픽은 기록에 남을 '판정번복 올림픽'이 될 것 같다. 김지훈 선수의 어이없는 실격을 바로잡기 위한 이의 제기가 이렇게 많은 말도 안 되는 판정번복의 길을 열어주다니 이래서 올림픽의 판정번복은 거의 없었나 보다. 이 일을 기뻐해야 할까 슬퍼해야 할까.. 아무도 억울하지 않은 진정한 판정이 올림픽에서만이라도 보여지기를... </p>
    </div>
  </div>
</div>
 </body>
</html>

clear : float된 박스들의 바로 아래 박스에게 주변을 흐르지 않고 원래대로 배치되도록 하는 속성

  • Ex_ clear2
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  	*{padding:0; margin:0;}
	body{font:12px "굴림", Gulim;}
	#container{width:500px; background:#fdd; border:5px solid #caa;
			   padding:0 10px 10px 10px; margin-left:10px; margin-top:10px;}
	h1{text-align:center; padding:10px;}
	p{text-align:justify;}
	.green{width:200px; background:#dda; padding:10px; float:left;}
	.coffee{width:200px; background:#ba7; padding:10px; float:right;}
	#container:after{content:""; clear:both; display:block;}
  </style>
 </head>
 <body>
  <div id="container">

   <h1>녹차와 커피</h1>
   <div class="green">
      <p>녹차는 은은한 향을 좋아하는 사람들이 애용하는 차이다. 녹차를 마실 줄 모르는 사람들은 티백들을 모두 뜯어 주전자에 넣고 끊이기도 하는데 강한 차의 향기도 견디기 힘들겠지만 보관도 힘들고 그때그때 방금 끓인 듯한 맛을 느끼지 못하게 되며 진한 카페인 덕에 밤에 잠들기도 힘들 것이다.</p>
   </div>
   <div class="coffee">
      <p>커피는 독한 향을 좋아하는 사람도 매우 좋아하며 심한 경우  태어나기 전부터 커피를 마신 듯 강한 중독 증세를 보이는 경우가 많다. 심지어 원두를 씹어서 향에 자신을 담그는 사람도 있고 설탕, 시럽 등 다른 조미를 절대로 허락하지 않는 오직 커피맛만을 고집하는 마니아들이 늘고 있다.</p>
   </div>
   
</div>
 </body>
</html>
profile
25. 컴퓨터학과 졸업 / SQLD, 정보처리기사 취득

0개의 댓글