① 소스 내용

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

모데스티

,
① 태그 소스

<?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>a태그</title>

</head>

<body>

        <!-- anchor : -->

        <a name="top"></a>

        <!-- href 페이지 내의 링크와 다른 사이트로의 링크가 가능하다.. -->

        <a href="http://www.naver.com">가자~!</a> <br />

        저녁 먹지??<br />

        저녁 먹지??<br />

        저녁 먹지??<br />

        저녁 먹지??<br />

        저녁 먹지??<br />

        저녁 먹지??<br />

        저녁 먹지??<br />

        저녁 먹지??<br />

        저녁 먹지??<br />

        <a href="#top">맨위로</a>

</body>

</html>


② 실행화면

a태그 가자~!(네이버로 이동합니다)
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
맨위로


블로그 이미지

모데스티

,
① 태그 소스

<?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>폼태그</title>

</head>

<body>

        <!-- form action : submit 가게될 주소 -->

        <!--

               form 방식

               get방식은 주소창에 입력한 값이 보여지지만

               post방식은 주소창에 값이 보이지않지만 입력을 확인하는 텍스트 박스가 나온다.

        -->

        <form action="http://@localhost:port/hp" method="post">

               <!-- input타입이 텍스트인경우 일반 텍스트로 입력받는다. -->

               <label for="userid">유저아이디</label>

               <input type="text" name="userid" id="userid" /> <br/>

              

               <!-- password 경우 입력한 값이 보이지 않는다. -->

               <label for="pass">비밀번호</label>

               <input type="password" name="pass" id="pass" /> <br/>

              

               <!-- select option 한가지를 선택하도록 한다. -->

               <label for="job">직업</label>

               <select name="job" id="job">

                       <option>개발자</option>

                       <option>프로그래머</option>

                       <option>자영업자</option>

               </select> <br />

              

               <!-- radio 여러개 선택이 불가능하다. -->

               <label for="gender">성별</label>

               <input type="radio" name="gender" value ="m" />

               <input type="radio" name="gender" value ="f" />   <br />

                <label for="hobby">취미</label>

               

                <!-- checkbox 여러개 선택이 가능하다. -->

                <input type ="checkbox" name="hobby" value="reading" /> 독서

                <input type ="checkbox" name="hobby" value="drama" /> 드라마보기

                <input type ="checkbox" name="hobby" value="soccer" /> 축구 <br />

                <input type ="checkbox" name="hobby" value="movie" /> 영화보기

                <input type ="checkbox" name="hobby" value="basket" /> 농구

                <input type ="checkbox" name="hobby" value="game" /> 게임 <br />

               

                <!-- 입력한 값을 리셋한다. -->

                <input type="reset" value="리셋" />

               

                <!-- 입력한 값을 제출한다. -->

                <input type="submit" value="완료" />

        </form>

</body>

</html>


② 실행화면

폼태그





독서 드라마보기 축구
영화보기 농구 게임


블로그 이미지

모데스티

,
① 태그 소스

<?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>테이블</title>

</head>

<body>

        <!-- 테이블은 메인페이지에서 사용금지 -->

        <!-- 1. 느리기 때문에 -->

        <!-- 2. 테이블의 구동방식 : 다른 태그들이 자리를 잡은 후에 테이블이 자리를 밀어내고 

  만들어진다. -->

        <table border="1" align = "center" width="500"> <!-- border : attribute -->

               <tr> <!-- Table row : -->

                       <td colspan="2">1 1</td>

                       <td rowspan="2">1 2</td>

               </tr>

               <tr> <!-- Table row : -->

                       <td>2 1</td>

                       <td>2 2</td>

               </tr>

        </table>

        <br />

        <br />

        <br />

        <table border="5" align = "center" width ="200">

               <tr> <!-- 테이블 헤더 -->

                       <th>구분</th>

                       <th>1</th>

                       <th>2</th>

                       <th>3</th>

                       <th>4</th>

               </tr>

               <tr align = "center" valign="top">

                       <th>1</th>

                       <td rowspan="3" >a1</td>

                       <td colspan="3" >a2</td>

               </tr>

               <tr align = "center" valign="top">

                       <th>2</th>

                       <td rowspan="2" >b1</td>

                       <td colspan="2" >b2</td>

               </tr>

               <tr align = "center" valign="top">

                       <th>3</th>

                       <td >c1</td>

                       <td rowspan="2" >c2</td>

               </tr >

               <tr align = "center" valign="top">

                       <th>3</th>

                       <td colspan="2">d1</td>

                       <td>d2</td>

               </tr >

        </table>

</body>

</html>


② 실행화면

테이블

1행 1열 1행 2열
2행 1열 2행 2열



구분 1열 2열 3열 4열
1행 a1 a2
2행 b1 b2
3행 c1 c2
3행 d1 d2


블로그 이미지

모데스티

,
① 태그 소스

<?xml version="1.0" encoding="EUC-KR" ?> <!-- xhtml 항상 문장으로 시작 -->

<!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" />

       <!-- content type : MIME type >> text형태를 html 분석하여 보여준다. EUC-KR>> 한국어만 가능-->

<title>내꺼다!</title> <!-- 탭에 표시되는 이름 -->

</head>

<body>

       <!-- Tag <h1>(태그 열기) </h1>(태그 닫기) : Markup Language -->

       <!-- 웹표준검사 : http://vaildator.w3.org -->

       <h1>안녕 세상아~~!!!</h1>

       <p>

             <!-- 문단태그 -->

             본문   &nbsp;&nbsp;&nbsp;&nbsp;영역

             <!-- html에서는 띄어쓰기를 여러번 해도 하나로 인식하므로 &nbsp; 쓴다. -->

             <!-- &  ctrl + space : 특수문자  -->

             &lt;본문      &nbsp;&nbsp;&nbsp;&nbsp;영역&gt;     

       </p>

       <p>

             두번째 <br /> <!-- html에서 줄을 바꾸고 싶을 경우 <br /> 쓴다. -->

              본문<br />

              <b>원조 굵게!(b태그는 이제 안씀)</b><br />

              <strong>굵게!(strong css 교체하는 것이 가능)</strong><br />

              <i>원조 이탤릭(기울임꼴)(i태그도 이제 안씀)</i><br />

              <em>이탤릭(기울임꼴)(em css 교체하는 것이 가능)</em><br />

              <strong>font태그도 사용금지</strong>

       </p>

       <p>

    <a href="http://validator.w3.org/check?uri=referer"><img

      src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>

       </p>

</body>

</html>

② 실행화면

내꺼다!

안녕 세상아~~!!!

본문     영역 <본문     영역>

두번째
본문
원조 굵게!(b태그는 이제 안씀)
굵게!(strong은 css로 교체하는 것이 가능)
원조 이탤릭(기울임꼴)(i태그도 이제 안씀)
이탤릭(기울임꼴)(em도 css로 교체하는 것이 가능)
font태그도 사용금지

Valid XHTML 1.0 Transitional


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

WEB 2일차 두번째) a태그  (0) 2012.09.13
WEB 2일차 첫번째) FORM태그  (0) 2012.09.13
WEB 1일차 세번째) Table태그  (0) 2012.09.13
블로그 이미지

모데스티

,