Developer Factory

[css] 엘리먼트의 배치 본문

Developer/Css

[css] 엘리먼트의 배치

Jeremy.Park 2014. 6. 16. 10:18
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- 엘리먼트의 배치

1. 공중 부양
; 웹 브라우저는  HTML에 작성된 순서대로 왼쪽에서 오른쪽으로 배치한다. 끝을 만날때까지
; 위에서 아래로 배치한다.
; float : left 또는 right => 출력순서에서 탈출하여 공중 부양한다. 왼쪽 또는 오른쪽으로 붙인다.
; 출력될 그 위치에서 공중 부양 후 좌우로만 이동 가능
* clear 속성
=> 공중 부양으로 점유된 공간을 피하는 명령

2. 절대 좌표 지정
; 절대좌표로 위치를 관리하는부모 엘리먼트를 기준으로 자식 엘리먼트의 위치를 설정
; 부모가 절대 좌표로 위치를 관리하지 않는다면, body 엘리먼트를 기준으로 자식 엘리먼트의 위치 설정
; position: absolute;
; 위치 설정: left, right, top, bottom 속성으로 설정한다.
; absolute일 경우 너비 높이를 지정한다.


3. 상대 좌표 지정
; 출력 대기자 목록에서 빠지지 않은 상태에서 위치 이동
; position: relative
; 현재 위치에서 좌/우, 상/하로 이동

4. 웹 브라우저에 고정
; 웹 브라우저의 내용 창을 기준으로 엘리면트의 위치 설정
; 내용을 스크롤 하더라도 엘리먼트는 계속 그 위치를 고수한다.
; position: fixed;

-->
<html>
<head>
<meta http-equiv="Content-Type" content= "text/html; charset=UTF-8">
<title> CSS007</title >

<style type="text/css" >
#d1 {
  border: 1px solid red;
  border-left: 5px solid red;
  border-right: 20px solid red;
  padding-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 190px;

}

#d2 {
  width: 180px;
/*   height: 180px; */
  margin-top: 10px;
  border: 1px dotted blue;
  float: left;
}

#footer{
  border: 1px solid green;
  font-size: 80%;
  text-align: center;
  clear: left;
}


</style>

</head>
<body>

오호라.. 비트교육센터...

<div id="d2" >
  <h1 id= "header05" class ="c1"> 테스트5</h1 >
  <p class= "c1">테스트...05 </p>
  <h1 id= "header06">테스트6 </h1>
  <p >테스트...06</ p>
  <h1 id= "header07" class ="c1"> 테스트7</h1 >
  <p class= "c1">테스트...07 </p>
  <h1 id= "header08">테스트8 </h1>
  <p >테스트...08</ p>
  <h1 id= "header09" class ="c1"> 테스트9</h1 >
  <p class= "c1">테스트...09 </p>
  <h1 id= "header10">테스트10 </h1>
  <p >테스트...10</ p>
  <h1 id= "header11">테스트11 </h1>
  <p >테스트...11</ p>
  <div id= "d21">
   <h1 >테스트7</ h1>
   <p >This document interoperability of the Web. </p>
  </div > 
</div>

<div id="d1" >
  <div id= "d11">
    <h1 id="header01" class= "c1 c2">테스트1 </h1>
    <p class="c1 c2" >김연아는 21일(한국시간) 러시아 소치 아이스버그 스케이팅 팰리스에서 열린 2014 소치 동계올림픽 피겨 여자 싱글 프리스케이팅에서 144.19점을 기록해 쇼트프로그램(74.92점)을 합쳐 총점 219.11점으로 2위를 차지했다. </p>
    <h1 id="header02" >테스트2</ h1>
    <p> 김연아는 21일(한국시간) 러시아 소치 아이스버그 스케이팅 팰리스에서 열린 2014 소치 동계올림픽 피겨 여자 싱글 프리스케이팅에서 144.19점을 기록해 쇼트프로그램(74.92점)을 합쳐 총점 219.11점으로 2위를 차지했다. </p>
  </div >
 
  <div id= "d12">
    <h1 id="header03" class= "c2">테스트3 </h1>
    <p> 김연아는 21일(한국시간) 러시아 소치 아이스버그 스케이팅 팰리스에서 열린 2014 소치 동계올림픽 피겨 여자 싱글 프리스케이팅에서 144.19점을 기록해 쇼트프로그램(74.92점)을 합쳐 총점 219.11점으로 2위를 차지했다. </p>
    <h1 id="header04" >테스트4</ h1>
    <p> 김연아는 21일(한국시간) 러시아 소치 아이스버그 스케이팅 팰리스에서 열린 2014 소치 동계올림픽 피겨 여자 싱글 프리스케이팅에서 144.19점을 기록해 쇼트프로그램(74.92점)을 합쳐 총점 219.11점으로 2위를 차지했다. </p>
  </div >
</div>

<div id="footer" >
       <p> 이 예제의 모든 권한은 Java48기에 있습니다. </p>
       <address> 서울시 서초구 서초동 어쩌구 저쩌구..... </address>
</div>


</body>
</html>


저작자표시

'Developer > Css' 카테고리의 다른 글

[css] 선택자(selectors) - 조합 선택자  (0) 2014.06.16
[css] 이미지 파일로부터 일부 이미지 추출  (0) 2014.06.16
[css] 박스 border  (0) 2014.06.16
[css] 폰트 다루기  (0) 2014.06.16
[css] 의사(pseudo) 셀렉터(셀렉터의 상태)  (0) 2014.06.16
'Developer/Css' Related Articles more