WEB 2일차 여섯번째) div로 레이아웃 잡기

WEB/CSS 2012. 9. 13. 00:54

① 소스 내용

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

<title>div로 레이아웃 잡기</title>

        <style>

               /* div {

                       border: thin red solid;

                      

               } */

               .content {

                       position: absolute;

                       margin-left: 155px;

                       width: 645px;

               }

               .menu {

                       width: 150px;

                       position: absolute;   

               }

               .out {

                       width: 800px;

                       /* 위 아래는 0px 좌우로는 auto */

                       margin: 0px auto;

               }

               div.menu ul {

                       list-style: none;

                       padding: 0px;

                       margin: 0px;

               }

               div.menu ul li:HOVER {

                       /* background-color: #E0E0E0; */

                       background-image:url("teayeon2.jpg");

                       background-position: 50%;

               }

        </style>

</head>

<body>

        <div class="out">

               <div class="menu">

                       <ul>

                              <li>꽃게탕</li>

                              <li>스테이크</li>

                              <li>깐풍기</li>

                              <li>탕수육</li>

                              <li>타르트</li>

                       </ul>

               </div>

               <div class="content">

                       <img src="teayeon2.jpg" alt="태연" width="150" />

                       태연

               </div>

        </div>

</body>

</html>

 

 


② 실행 화면

div로 레이아웃 잡기

  • 꽃게탕
  • 스테이크
  • 깐풍기
  • 탕수육
  • 타르트
태연 태연


저작자표시

'WEB > CSS' 카테고리의 다른 글

WEB 2일차 다섯번째) div  (0) 2012.09.13
WEB 2일차 네번째) CSS 두번째  (0) 2012.09.13
WEB 2일차 세번째) CSS 첫번째  (0) 2012.09.13
블로그 이미지

모데스티

,

WEB 2일차 다섯번째) div

WEB/CSS 2012. 9. 13. 00:52

① 소스 내용

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

<title>DIV 1</title>

        <style type="text/css">

               .f{

                       float: left;

               }

               #box {

                       /*

                              position

                              alsolute : div를 원하는 위치에 놓는 것이 가능하다.(절대좌표)

                              relative : 해당 div앞에 있는 태그를 기준으로 위치가 결정된다.

                              fixed : 해당 좌표에서  고정되어 스크롤을 해도 위치가 변하지 않는다.

                       */

                       position: fixed;

                       border: dashed blue;

                       width: 500px;

                       left: 50px; top: 50px

               }

        </style>

</head>

<body>

        <div>

               이 구역을 침범하지마!!!!

        </div>

        <div id="box">

               몽골마

               <!--

                       상대경로 : 앞에 '/'가 없는 상태로 나오는 경로

                              >> 현재 경로를 기준으로 상대적으로 경로를 파악한다.

                       . : 현재경로, .. : 상위경로

               -->

               <img src="./horse.jpg" alt="몽골마" width="400px"/>

               태연

               <!-- 절대경로 : 앞에 '/'가 있는 경로 -->

               <img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>

               몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마

               몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마

               몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마

               몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마

               몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마

               <img src="/hp/teayeon2.jpg" style="clear: left;" alt="태연" width="200"/>

               <img src="/hp/teayeon2.jpg" style="clear: left;" alt="태연" width="200"/>

               <img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>

               <img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>

               <img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>

               <img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>

               <img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>

               <img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>

               <img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>

               <img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>

               <img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>

               <img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>

               <img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>

               <img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>

               <img src="/hp/teayeon2.jpg" class="f" alt="태연" width="200"/>

        </div>

        <div>

               나는 밑에 있고 싶어!!!

        </div>

</body>

</html>

 


② 실행 화면

DIV 1

이 구역을 침범하지마!!!!
몽골마 몽골마 태연 태연 몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마 몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마 몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마 몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마 몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마 태연 태연 태연 태연 태연 태연 태연 태연 태연 태연 태연 태연 태연 태연 태연
나는 밑에 있고 싶어!!!


저작자표시

'WEB > CSS' 카테고리의 다른 글

WEB 2일차 여섯번째) div로 레이아웃 잡기  (0) 2012.09.13
WEB 2일차 네번째) CSS 두번째  (0) 2012.09.13
WEB 2일차 세번째) CSS 첫번째  (0) 2012.09.13
블로그 이미지

모데스티

,

WEB 2일차 네번째) CSS 두번째

WEB/CSS 2012. 9. 13. 00:49

① 소스 내용

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

<title>CSS 2</title>

        <style type="text/css">

               div {

                       border: medium solid blue;

                       height: 100px;

               }

               .red {

                       /* "."은 클래스, "#"은 ID*/

                       color : red;

               }

               #center {

                       text-align: center;

               }

               .back {

                       background-color: yellow;

               }

               div p{

                       /* div안의 p(div의 자식 p) */

                       border: thick solid black;

                       color: navy;

               }

               /* 방문하지 않았던 링크(LINK)와 방문했던 링크(VISITED)가 표시되는 효과*/

               a:LINK, a:VISITED {

                       text-decoration: none; color: black;

               }

               /* 마우스 커서를 올렸을 때 색깔이 바뀌도록*/

               a:HOVER {

                       text-decoration: underline; color: #0F0; font-weight: bold;

               }

               /* 마우스 버튼을 눌렀을 때 */

               a:ACTIVE {

                       text-decoration: none; color: black;

               }      

</style>

</head>

<body>

        <!-- inline css : 태그에 직접 적용, 우선순위가 높다.-->

        <div style="height: 200px;">

               <a href="http://pizzahut.co.kr">오늘 뭐 먹지???</a>

        </div>

        <!-- 클래스를 여러개 줄 수 있다. -->

        <div class="red back">

               몽골용단, 털광필

               <p>배고파! 배고파! 배고파!</p>

        </div>

        <!-- class는 여러개 줄 수 있지만 id는 하나씩만 쓰자.! 자바스크립트에서 문제! -->

        <p class="red" id="center">

               레드

        </p>

        <h1 class="red">빠알간색</h1>

</body>

</html>


② 실행화면

CSS 2

오늘 뭐 먹지???

몽골용단, 털광필

배고파! 배고파! 배고파!

레드

빠알간색


저작자표시

'WEB > CSS' 카테고리의 다른 글

WEB 2일차 여섯번째) div로 레이아웃 잡기  (0) 2012.09.13
WEB 2일차 다섯번째) div  (0) 2012.09.13
WEB 2일차 세번째) CSS 첫번째  (0) 2012.09.13
블로그 이미지

모데스티

,

WEB 2일차 세번째) CSS 첫번째

WEB/CSS 2012. 9. 13. 00:46

① 소스 내용

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

<title>CSS 1</title>

        <style type="text/css">

               /* CSS에서 유일한 주석

                       selector(선택자) {

                              선언부

                       }

               */

               div {

                       /* border : 3가지  (선스타일, 선굵기, 선색깔) 순서없이*/

                       border: thin solid black;

                       padding : 100px; /* px : pixel 픽셀 */

                       /* margin : 위 오른쪽 아래쪽 왼쪽 */

                       margin : 100px 50px 150px 50px;

                       /*

                              transparent : 위의 margin과 아래의 margin이 겹칠 수 있다.     

                       */

               }

               body{

                       /*

                              body태그안에 div가 있으므로 div가 body의 속성을 상속받을 수 있다.

                              border, padding, margin은 상속되지 않는다.

                       */

                       font-family: '궁서', dotum;

                       /* color : yellow; 색이름 지정 */

                       color : #666666; /* RGB 컬러 지정 두개의 숫자가 같을경우 ex) #FF0011 = #F01*/

               }

               p {

                       /*

                              border는 상속되지 않는 속성이므로 강제로 div의 속성을 상속받도록 해야한다

                              padding, margin, width, height도 마찬가지

                       */

                       border : inherit;

               }

        </style>

</head>

<body>

        <div>

               <p>p태그</p>

               몽골용단의 말춤 기대됨

        </div>

        <div>

               저녁은 뭘 먹지???

        </div>

</body>

</html>


② 실행화면

CSS 1

p태그

몽골용단의 말춤 기대됨
저녁은 뭘 먹지???


저작자표시

'WEB > CSS' 카테고리의 다른 글

WEB 2일차 여섯번째) div로 레이아웃 잡기  (0) 2012.09.13
WEB 2일차 다섯번째) div  (0) 2012.09.13
WEB 2일차 네번째) CSS 두번째  (0) 2012.09.13
블로그 이미지

모데스티

,

공지사항

태그목록

글 보관함

달력

«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30

티스토리툴바