① 소스 내용

<?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
블로그 이미지

모데스티

,

① 소스 내용

<?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
블로그 이미지

모데스티

,

① 소스 내용

<?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
블로그 이미지

모데스티

,

① 소스 내용

<?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
블로그 이미지

모데스티

,