[토토로 페이지 메뉴만들기 : 선생님코드]



<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style type="text/css">

* {

margin: 0px;

padding: 0px;

}

.wrap {

width: 900px;

height: 1000px;

margin: 0 auto;

background: gray; 

}

header {

width: 900px;

height: 80px;

background-image: url("./images/common/totoro_2.png");

margin: 0 auto;

}

#topLogo {

width: 100px;

height: 80px;

margin-left: 10px;

float: left;

}

#topLogo > img {

width: 100%;

height: 100%;

}

#gnb {

width: 400px;

height: 80px;

margin-left: 140px;

float: left;

}

#gnb li {

list-style: none;

height: 80px;

line-height: 80px;

float: left;

margin-left: 20px;

color: white;

border-right: 1px solid white;

}

#gnb li:last-child {

border: none;

}

#gnb li:nth-child(2n) {

background-color: yellow;

}

#gnb li:nth-child(2n+1) {

background-color: red;

}

</style>

</head>

<body>

<div class="wrap">

<header>

<div id="topLogo"><img src="./images/common/top_logo.png"></div>

<nav id ="gnb">

<ul>

<li>menu1</li>

<li>menu2</li>

<li>menu3</li>

<li>menu4</li>

</ul>

</nav>

</header>


</div>


</body>

</html>




*********************************************************************

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
/***************** wrap ****************/
.wrap {
width: 900px;
margin: 0 auto;
}
header {
width: 900px;
height: 80px;
background-image: url("./images/common/totoro_2.png");
margin: 0 auto;
}
#topLogo {
width: 100px;
height: 80px;
margin-left: 10px;
float: left;
}
#topLogo > img {
width: 100%;
height: 100%;
}
#gnb {
width: 400px;
height: 80px;
margin-left: 140px;
float: left;
}
#gnb li {
list-style: none;
width: 100px;
height: 80px;
line-height: 80px;
letter-spacing: 2px;
float: left;
color: white;
}
#gnb2 {
width: 140px;
height: 80px;
margin-left: 50px;
float: left;
}
#gnb2 li {
list-style: none;
height: 80px;
line-height: 80px;
float: left;
margin-left: 20px;
color: white;
}
#s {
clear: both;
width: 900px;
margin: 0 auto;
}
#s img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 전체 랩 -->
<div class="wrap"></div>
<!-- header -->
<header>
<div id="topLogo">
<img src="./images/common/top_logo.png">
</div>
<nav id="gnb">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</nav>
<nav id="gnb2">
<ul>
<li>Login</li>
<li>Join</li>
</ul>
</nav>
</header>
<!-- 전체 section -->
<section id="s">
<section>
<img src="./images/common/main.jpg">
</section>
<section></section>
</section>
<!-- footer -->
<footer></footer>
</body>
</html>


************************************************************************************


자손선택자, 후손선택자를 이용하면 id, class 지정을 줄일 수 있다.



**************************************************************************8


카페참고


http://cafe.naver.com/0100100101010101

















블로그 이미지

테시리

,

아파치 톰켓 설치


홈페이지


http://tomcat.apache.org/download-80.cgi




다운로드



프레퍼런스>서버>런타임인바이런먼트>에드

아파치톰켓8.0>넥스트>브라우즈>압축해제폴더경로

apache-tomcat-8.0.24 폴더까지>확인

JRE를 JDK1.8.0_51로 변경>피니시>OK




*********************************************

1.

절대경로 : 절대 위치가 기준

/img : 루트(하드디스크C) 기준


이클립스의 webcontent가 개발할때 루트폴더 


이제부터 경로를 "img/logo.png" 이런식으로 하기?연습



상대경로 : 자기 자신이 기준

img : 현재위치에 있는 img 폴더

./img : 현재위치에 있는 img 폴더


../img : 한단계 위에 있는 img 폴더



2.프로젝트 만들때 폴더 구성

webcontent

indxex.html 파일

images폴더

common폴더 : 사이트 전체 공통

main 폴더 : 메인에서 쓰는 이미지

board 폴더 : 버튼 등 게시판 전용 이미지

htmlinfo 폴더 : XHTML 에 대해 서브 메뉴 이미지

qna폴더 : 묻고 답하기 메뉴 이미지

pds 폴더 : 자료실 서브 메뉴 이미지

member폴더 : 회원가입, 로그인 등 회원관련 이미지

... 나머지 이미지

css폴더

reset.css    초기화 파일?

base.css    모든 페이지 공통 css

layout.css    구조를 만들때 쓸 css   

main.css    index 에 쓰는 css?

..(그외 css)

js폴더 (자바스크립트 , j query 파일 폴더)

htmlinfo폴더

qna폴더

pds폴더

member폴더

... 나머지 서브메뉴폴더





*************************************************************

cssreset


http://cssreset.com/


초기화 파일



resetcss.txt


************************************************************


CSS


1. 임베디드방식


2. 외부방식


extenal 방식(link)


@import 방식




@import 요소는 구버전의 웹브라우저에서는 해석하지 못하므로 사용에 주의



***********************************************************************

자손선택자 후손선택자


자손과 후손


자손 : 바로밑


후손 : 밑밑, 밑밑밑



자손에 상속


#부모아이디 > 자손태그{


}


#P > div{


}



후손에 상속


#부모아이디 자손태그{




#P div{


}





















블로그 이미지

테시리

,

CSS


선택자 : *(all), tag, id, class

background : image, color, repeat

border : style, color, width

marginm padding : 상하좌우

font


display 속성 : 화면에 보여지는 영역이 인라인이냐 블럭이냐를 판단해 준다.

display : inline, block, inline-block




블록태그 : 밑으로 쌓이는 것

인라인 태그 : 옆으로 쌓이는 것, 인라인태그는 컨테츠가 가진 크기만큼만 크기가 할당. width와 height를 늘려도 늘어나지 않는다.



대표적인 인라인태그 : span 

div는 블록태그

li 태그도 블록태그다.


span 태그에 css로 속성을 display : block 으로 바꿔주면 속성이 블럭으로 바뀐다. ( width, height 값을 변경하면 크기가 변하게 됨.)


div 태그에 display : inline 으로 바꿔주면 속성이 인라인으로바꿈( 컨텐츠 값이 있어야 브라우저에 보임)



inline-block 으로 속성을 바꾸면 , inline 속성과 block 속성을 모두 가지고 있다. 크기 조절도되고 옆으로 붙음


******************************

연습1


<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>


<style type="text/css">


span{

width: 200px;

height: 200px;

background-color: yellow;

display: block;

}


div{

width: 300px;

height: 300px;

background-color: red;

display:inline-block;

}

#d1{

width: 300px;

height: 300px;

background-color: blue;

display: inline-block;

}

</style>


</head>

<body>


<ol>

<li>iu</li>

<li>suji</li>

</ol>


<ul>

<li>공지사항</li>

<li>사업소개</li>

<li>Q&A</li>

</ul>


<div>aa</div>

<div id="d1">bb</div>


<span>iu</span>

<span>suji</span>

<span>choa</span>


</body>

</html>


****************************

연습2




<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>


<style type="text/css">

*{

font-family: Georgia, "맑은 고딕", Combria; /*글씨체*/

font-size:1em; /*폰트 크기*/

font-style:italic; /*폰트기울기*/

font-weight:bold; /*진하게*/

text-decoration:none; /* 하이퍼링크 걸었을때 밑줄 제거가능 */

line-height:3em; /* 행간의 간격 */

letter-spacing : 1.5px; /* 글자간의 간격 */ 

margin: 0px;

padding: 0px

}

ul{

width: 500px;

height: 80px;

border: 1px solid gray;

margin: 0 auto;

}

li{

text-align:center; /*좌우 중앙정렬, 이미지도 가능하다.*/

line-height: 80px; /*상하 중앙정렬*/

width: 119px;

height: 80px;

border: 1px solid yellow;

display: inline-block; /*속성을 바꿔줌 인라인을 블록으로, 블록을 인라인으로*/

}

</style>


</head>

<body>


<ul>

<li><a href="#">COMPANY</a></li>   <!-- #:현재위치 -->

<li>ARTIST</li>

<li>PR CENTER </li>

<li>AUDITION</li>

</ul>

장고(Django, FAQ 발음으로는 "쟁고"(IPA: [ˈdʒæŋgoː])[2])는 

파이썬으로 작성된 오픈 소스 웹 애플리케이션 프레임워크로, 

모델-뷰-컨트롤러 패턴을 느슨하게 적용한다.

2005년 7월에 BSD 사용 허가서로 공개되었다.




</body>

</html>




*********************************************

FNC 페이지 연습하기 [내코드]




<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>


<style type="text/css">

*{

text-decoration:none;

margin: 0px;

padding: 0px;

}

/* ****************** top 시작 ******************** */

  #top{

  margin-bottom:50px;

  height : 67px;

  background-color: black;

  }

  #tp_div{

 

  border: 1px solid red;

width: 1000px;

height: 67px;

line-height: 67px;

margin: 0 auto;

 

  }

  #top_logo{

  float: left;

 

  }

  #top_menu{

  width: 800px;

  height: 67px;

  margin-left: 170px;

 

  }

 

  ul{

width: 700px;

height: 67px;

border: 1px solid gray;

margin: 0 auto;

}

li{

color:white;

text-align:center; /*좌우 중앙정렬, 이미지도 가능하다.*/

line-height: 67px; /*상하 중앙정렬*/

width: 119px;

height: 67px;

border: 1px solid yellow;

display: inline-block; /*속성을 바꿔줌 인라인을 블록으로, 블록을 인라인으로*/

}

  /* ****************** top 끝 ******************** */

 

  /* ****************** 컨텐츠 시작 ******************** */

  #content_1{

  overflow:hidden;

  width: 1000px;

  height: 475px;

  margin : 0 auto;

background-color: gray;

  }

 

  #c_1{

  width: 1000px;

 

  }

 

 

#content_2{

width: 1000px;

height: 300px;

margin : 10px auto 50px;

}

.c2_a{

width: 300px;

height: 300px;

}

#c2_a_1{

border: 1px solid black;

width: 300px;

height: 300px;

float: left;

margin: 0 auto;

}

#c2_1{

width: 300px;

height: 300px;

}

#c2_a_2{

border: 1px solid black;

width: 300px;

height: 300px;

float: left;

margin: 0 47px;

}

#c2_2{

width: 300px;

height: 300px;

}

#c2_a_3{

width: 302px;

height: 300px;

float: left;

margin: 0 auto;

}

#c2_a_3_1{

border: 1px solid black;

height: 165px;

margin: 0 auto;

}

#c2_3{

width: 300px;

height: 165px;

}

#c2_a_3_2{

border: 1px solid black;

height: 104px;

margin-top: 30px;

}

#c2_4{

width: 300px;

height: 104px;

}

/* ****************** 컨텐츠 끝 ******************** */

/* ****************** 풋 시작 ******************** */

#footer{

height: 80px;

background-color: black;

}

#ft_div{

border: 1px solid red;

width: 1000px;

height: 80px;

margin: 0 auto;

}

#ft_logo{

width: 60px;

height: 25px;

margin : 27px auto;

float: left;

}

#ft_info{

width: 800px;

height: 50px;

border: 1px solid blue;

margin: 0 auto;

float: left;

margin-left: 30px;

margin-top: 27px;

font-size: 11px;

color: white;

}

#ft_select{

width: 80px;

height: 25px;

border: 1px solid purple;

float: right;

margin : 30px auto;

}

/* ****************** 풋 끝 ******************** */

</style>


</head>

<body>

<div id="top">

<div id="tp_div">

<div id="top_logo">

<img src="./img/logo.png">

</div>

<div id="top_menu">

<ul>

<li>COMPANY</li>   <!-- #:현재위치 -->

<li>ARTIST</li>

<li>PR CENTER </li>

<li>AUDITION</li>

</ul>

</div>

</div>

</div>

<div id="content_1"><img id="c_1" src="./img/aoa.png" ></div>

<div id="content_2">

<div id="c2_a_1" class="c2_a"><img id="c2_1" src="./img/c2_1.PNG"></div>

<div id="c2_a_2" class="c2_a"><img id="c2_2" src="./img/c2_2.PNG"></div>

<div id="c2_a_3" class="c2_a">

<div id="c2_a_3_1"><img id="c2_3" src="./img/c2_3.PNG"></div>

<div id="c2_a_3_2"><img id="c2_4" src="./img/c2_4.PNG"></div>

</div>

</div>


<div id="footer">

<div id="ft_div">

<div id="ft_logo"><img src="./img/fnc_logo.png"></div>

<div id="ft_info">

<p>

개인정보취급방침 | 이용약관 | 고객센터/문의하기 (Customer Service)

</p>

서울시 강남구 청담동 111 (주) FNC ENTERTAINMENT  |   TEL. 02) 517-5426   |  FAX. 02) 518-5428<br>

COPYRIGHT © 2014 FNCENT.COM ALL RIGHT RESERVED

</div>

<div id="ft_select">

<select>

<option>CNBLUE</option>

<option>AOA</option>

</select>

</div>

</div>



</div>


</body>

</html>





***************************************************************************

FNC연습2    [선생님 것 보면사 다시하기]






















*****************************************************************************

연습



<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

<style type="text/css">

*{

margin: 0px;

padding: 0px;

}

#wrap{

width: 600px;

height: 100px;

margin: 0 auto;

border: 1px solid gray;

}

li{

border : 1px solid red;

list-style : none;

float: left;

width: 100px;

height: 100px;

line-height: 80px;

margin-right: 30px;

}


</style>


</head>

<body>


<div id="wrap">

<ul>

<li><a href="#">COMPANY</a></li>

<li><a href="#">ARTIST</a></li>

<li><a href="#">PM CENTER</a></li>

<li><a href="#">AUDITION</a></li>

</ul>

</div>



</body>

</html>





********************************************************************

절대위치1 연습



<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

<style type="text/css">

#d1{

position : absolute;

top:100px;

left:100px;

width: 100px;

height: 100px;

background-color: red;

}

#d2{

position : absolute;

top:150px;

left:150px;

width: 100px;

height: 100px;

background-color: blue;

}

#d3{

position : absolute;

top:200px;

left:200px;

width: 100px;

height: 100px;

background-color: yellow;

}

</style>


</head>

<body>


<div id="d1"></div>

<div id="d2"></div>

<div id="d3"></div>



</body>

</html>




*******************************************************************

절대위치2 현재화면의 절대위치 , 스크롤 내려도 계속 남아있는 것


<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

<style type="text/css">

#t{

position:fixed;

left:0px;

top:0px;

width: 800px;

height: 80px;

background-color: black;

}



#d1{

width: 100px;

height: 500px;

background-color: red;

}

#d2{

width: 100px;

height: 500px;

background-color: blue;

}

#d3{

width: 100px;

height: 500px;

background-color: yellow;

}

</style>


</head>

<body>

<div id="t"></div>

<div id="d1"></div>

<div id="d2"></div>

<div id="d3"></div>



</body>

</html>




*******************************************************************


static


absolute  : 현재위치 절대값


fixed  :  포지션의 기준을 봐야함, 현재 화면에 대한 절대값



****************************************************************



<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

<style type="text/css">

#t{

position:absolute;

left:100px;

top:100px;

width: 800px;

height: 800px;

background-color: black;

}



#d1{

width: 100px;

height: 100px;

background-color: red;

}

</style>


</head>

<body>

<div id="t">

<div id="d1"></div>

</div>



</body>

</html>


*****************


빨간 박스 포지션 변경 (빨간박스 위치이동)


<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

<style type="text/css">

#t{

position:absolute;

left:100px;

top:100px;

width: 800px;

height: 800px;

background-color: black;

}



#d1{

position :absolute;

left : 100px;

top : 100px;

width: 100px;

height: 100px;

background-color: red;

}

</style>


</head>

<body>

<div id="t">

<div id="d1"></div>

</div>




</body>

</html>


***************



<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

<style type="text/css">

#t{

position:relative;

left:100px;

top:100px;

width: 100px;

height: 100px;

background-color: black;

}



#d1{

position:relative;

left : 100px;

top : 100px;

width: 100px;

height: 100px;

background-color: red;

}

</style>


</head>

<body>

<div id="t"></div>

<div id="d1"></div>




</body>

</html>


*********


<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

<style type="text/css">

#t{

position:relative;

left:100px;

top:100px;

width: 100px;

height: 100px;

background-color: black;

}



#d1{

position:relative;

left : 100px;

top : 100px;

width: 100px;

height: 100px;

background-color: red;

}

</style>


</head>

<body>

<div id="t"><div id="d1"></div></div>



</body>

</html>



************************************************************


absolute와 relative 를 혼용해서 쓸 때 안쪽이 absolute이면 바깥은 relative


==> 바깥 박스는 relative , 안쪽 박스는 absolute




***************************************************************

<태그정리>


div


float, display, position


margin, padding


letter-spacing, line-height


중앙정렬  : block -> margin : 0 auto;

inline -> text-align : center  : 가로정렬

line-height  : 감싸고 있는 태그의 height값과 같은 높이??

vertical-align : table 내에서 먹힘


************************************************************


인코딩 UTF-8


<meta charset="UTF-8">


윈도우즈 > 프레퍼런스 > 웹 > css, html ,jsp 눌러서 인코딩을 UTF-8로 바꿔준다.




************************************************************



<참고>


https://www.fetchpetcare.com/services/



http://www.gianteagle.com/Grocery-Store/Pet-Care/




*******************************************************8


음영주기   opacity


















































































블로그 이미지

테시리

,

HTML / CSS 정리



HTML


<h1>...<h6>    : 제목태그

<p> </p>    : 문단태그

<a href=" "> </a>    : a태그 하이퍼링크

<img src="">    : 이미지태그


<table>

<tr> <td> </td> </tr>    : 테이블태그


<ul>

<li> </li>    : ul태그 (unordered 순서가 없는 리스트태그)

</ul>


<ol>

<li> </li>    : 순서가 있는 리스트태그

</ol>


<div> </div>    : 그룹지정태그

<br>    : 개행문자

<span> </span>    : 텍스트를 따로 묶는 태그 (인라인 안에 특정 부분을 고치고 싶을때?)


<form action="">    : 입력태그

<input type="text">

<input type="password">

<input type="checkbox">

</form>



CSS : 꾸며주는 역할


<예제>

<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

<style type="text/css">

body{

background-color: gray;

}

h1, #t2_1{

color:red;

}

h2{

color:blue;

}

#t1{

color:purple;

}

.s1{

color:yellow;

}

</style>



</head>

<body>

<h1 id="t1">Test1</h1>

<h2 class="s1">sub_test1</h2>

<h1 class="s1">Test2</h1>

<h2 id="t2_1">sub_test2</h2>

<h1>Test3</h1>

</body>

</html>



결과

>

Test1

sub_test1

Test2

sub_test2

Test3




CSS

형식

선택자 { 내용 }


1.모든 선택

 *{

color : red;

}


2.태그선택

 h1 { color : red;  }


3.ID 선택

 #t1 { color : red; }


4.클래스 선택

 .s2 { color : red; }


5.여러 가지 선택

 태그명, #아이디명, ... 클래스명 { color : red  }


속성

1.  background : 배경

background-color: gray;

background-image: url("");

background-repeat: repeat, repeat-x, repeat-y, no-repeat;


2. border : 테두리

border-color : 선의 색

border-style : 선의 종류

border-width : 선의 두께 ( 선의 너비)


3. margin

margin : 10px; -> 상하좌우 10px;

margin : 10px 20px; -> 상하 10px, 좌우 20px;

margin : 10px 20px 30px; -> 

margin : 10px 20px 30px 40px; -> 상 10px  우 20px  하 30px  좌 40px  


4. padding

padding : 10px; -> 상하좌우 10px;

padding : 10px 20px; -> 상하 10px, 좌우 20px;

padding : 10px 20px 30px; -> 

padding : 10px 20px 30px 40px; -> 상 10px  우 20px  하 30px  좌 40px  


마진과 페딩의 차이 : 페딩은 박스 안쪽을 띄울때, 마진은 박스 바깥을 띄울때??



4-1. box-sizing : border-box : 부모의 사이즈는 그대로


*margin*2+padding*2+border*2+content   :  계산을 해야 모바일 페이지를 제작가능(화면을 %에 맞게 계산)



5. 중앙정렬

margin : 0 auto;    단, width 가 계산할 수 있는 값으로 정해져야 한다.



[중앙정렬]


<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

<style type="text/css">

.di {

width: 200px;

height: 300px;

border: 1px solid black;

background-color: gray;

}

#d1 {

margin: 50px auto;

padding: 10px;

}

#d2 {

box-sizing: border-box;

margin: 20px auto;

padding: 10px;

}

</style>

</head>

<body>

<div id="d1" class="di"><h1>d1</h1></div>


<div id="d2" class="di">

<h1>d2</h1>

<div id="d2_1"></div></div>





</body>

</html>



*********************************************************************


박스안에 사진 넣기



사진파일 예쁘당









<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

<style type="text/css">

div {

border: 1px solid black;

width: 1200px;

text-align: center;

}

</style>

</head>

<body>

<div>

IU<br>

<img src="./iuiu.jpg">

</div>


</body>

</html>





********************************************************************************


디자이너들은 자를 가지고 다닌다


cm를 px로 바꾸기 


or


f12 누르면 소스를 볼 수 있다.



먼저 레이아웃을 크게 나눈다.



나눈 것 안에서 다시 가로와 세로로 나눠주면 된다.





#c2_a_1{

margin-right: 50px;

}

#c2_a_2{

margin-right: 50px;

}






CSS의 주석


/*  주석 내용 */



RGB 색상 16진수값 보는 페이지


http://www.w3schools.com/tags/ref_colorpicker.asp


or 네이버 검색 "html 색상표"

http://search.naver.com/search.naver?where=nexearch&query=html+%EC%83%89%EC%83%81%ED%91%9C&sm=top_sug.pre&fbm=1&acr=1&acq=html+%EC%83%89&qdt=0&ie=utf8






*******

띄어쓰기 태그 (스페이스바)

&nbsp;


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;





***********************fnc연습



<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>


<style type="text/css">

*{

margin: 0px;

padding: 0px;

}

/* ****************** top 시작 ******************** */

  #top{

  margin-bottom:50px;

  height : 67px;

  background-color: black;

  }

 

  #top_logo{

 

  }

  /* ****************** top 끝 ******************** */

 

  /* ****************** 컨텐츠 시작 ******************** */

  #content_1{

  overflow:hidden;

  width: 1000px;

  height: 475px;

  margin : 0 auto;

background-color: gray;

  }

 

  #c_1{

  width: 1000px;

 

  }

 

 

#content_2{

width: 1000px;

height: 300px;

margin : 10px auto 50px;

}

.c2_a{

width: 300px;

height: 300px;

}

#c2_a_1{

border: 1px solid black;

width: 300px;

height: 300px;

float: left;

margin: 0 auto;

}

#c2_1{

width: 300px;

height: 300px;

}

#c2_a_2{

border: 1px solid black;

width: 300px;

height: 300px;

float: left;

margin: 0 47px;

}

#c2_2{

width: 300px;

height: 300px;

}

#c2_a_3{

width: 302px;

height: 300px;

float: left;

margin: 0 auto;

}

#c2_a_3_1{

border: 1px solid black;

height: 165px;

margin: 0 auto;

}

#c2_3{

width: 300px;

height: 165px;

}

#c2_a_3_2{

border: 1px solid black;

height: 104px;

margin-top: 30px;

}

#c2_4{

width: 300px;

height: 104px;

}

/* ****************** 컨텐츠 끝 ******************** */

/* ****************** 풋 시작 ******************** */

#footer{

height: 80px;

background-color: black;

}

#ft_div{

border: 1px solid red;

width: 1000px;

height: 80px;

margin: 0 auto;

}

#ft_logo{

width: 60px;

height: 25px;

margin : 27px auto;

float: left;

}

#ft_info{

width: 800px;

height: 50px;

border: 1px solid blue;

margin: 0 auto;

float: left;

margin-left: 30px;

margin-top: 27px;

font-size: 11px;

color: white;

}

#ft_select{

width: 80px;

height: 25px;

border: 1px solid purple;

float: right;

margin : 30px auto;

}

/* ****************** 풋 끝 ******************** */

</style>


</head>

<body>

<div id="top">

<div id="top_logo"><img src="./img/logo.png"></div>


</div>

<div id="content_1"><img id="c_1" src="./img/aoa.png" ></div>

<div id="content_2">

<div id="c2_a_1" class="c2_a"><img id="c2_1" src="./img/c2_1.PNG"></div>

<div id="c2_a_2" class="c2_a"><img id="c2_2" src="./img/c2_2.PNG"></div>

<div id="c2_a_3" class="c2_a">

<div id="c2_a_3_1"><img id="c2_3" src="./img/c2_3.PNG"></div>

<div id="c2_a_3_2"><img id="c2_4" src="./img/c2_4.PNG"></div>

</div>

</div>


<div id="footer">

<div id="ft_div">

<div id="ft_logo"><img src="./img/fnc_logo.png"></div>

<div id="ft_info">

<p>

개인정보취급방침 | 이용약관 | 고객센터/문의하기 (Customer Service)

</p>

서울시 강남구 청담동 111 (주) FNC ENTERTAINMENT  |   TEL. 02) 517-5426   |  FAX. 02) 518-5428<br>

COPYRIGHT © 2014 FNCENT.COM ALL RIGHT RESERVED

</div>

<div id="ft_select">

<select>

<option>CNBLUE</option>

<option>AOA</option>

</select>

</div>

</div>



</div>


</body>

</html>





************************************************************************

















*******************************************


overflow 옵션 공부 ( 사진 자르기 : hidden, scroll, auto )











블로그 이미지

테시리

,

*****


웹컨텐트 폴더 : 루트폴더


웹컨텐트 폴더 구분, 정리 하기 > 한 곳에 때려박으면 나중에 관리하기 힘들어진다. > 상대경로주의할것


*****


CSS3가 현재 개발단계라서 혼용 중


*****

CSS : 색, 크기, 위치, 기타 등등 html을 꾸며주는 요소



1.inline 방식 : html태그 내에 사용 


2.style tag 방식


3.외부파일 방식



***********************


선택자


*********************



<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>


<style type="text/css">

* {

color:red;

}

</style>


</head>

<body>

<p>

<h2>환술사</h2>

'환술'이라 부르는, 속성의 영향력이 강한 마법을 다루는 마법사.

자기 주위의 만물로부터 흙, 바람, 물의 속성원소를 찾아낼 수 있다.

자연에서 온 물건으로 만든 지팡이 '환술 도구'를 소지하고 다니며, 이를 매개로 하여

자신의 에테르나 주위 원소를 마법으로 변환한다.회복이나 강화 등 육체에

직접 작용하는 마법에 특화되어, 고위 환술사는 치유사로서 뛰어난 실력을 발휘한다.

</p>

<p>

<h2>주술사</h2>

'주술'이라 부르는, 파괴적 성향이 강한 마법을 다루는 마법사. 자신의 본성을

성찰하여 내면에 잠재된 힘을 사용할 수 있다. 염주가 달린 '주술 도구'를 소지하고

다니며, 이를 매개로 하여 자신의 에테르를 마법으로 변환한다. 그들이 구사하는

저주와 파괴의 마법은, 칼날보다 거센 날카로움으로 적들에게 치명상을 입힌다.

</p>

<p>

<h2>비술사</h2>

비술이라 부르는 마법으로 사역마를 조종하는 마법사.

남해 제도에서 온 산술을 기반으로 한, 독특한 기하학적 '마법 문양'으로

정신력을 제어한다. 수많은 마법 문양이 그려진 마법 도구 '마도서'를

소지하고 다니며, 이 마도서에 에테르를 주입해 마법을 일으킨다.

또한 보석의 신비를 기술한 '마법 문양'을 통해 사역마 '카벙클'을 만들어 부리기도 한다.

</p>


</body>

</html>



**********************

<style type="text/css">

* {

color:red;

}

</style>


*혹은 body 를 써도 된다. ,,,    * = all의 의미


원하는 부분을 잡으면 그 안의 것들을 바꿔줌



*******************

<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>


<style type="text/css">

h2 {

color:red;

}

</style>


</head>

<body>

<p>

<h2>환술사</h2>

'환술'이라 부르는, 속성의 영향력이 강한 마법을 다루는 마법사.

자기 주위의 만물로부터 흙, 바람, 물의 속성원소를 찾아낼 수 있다.

자연에서 온 물건으로 만든 지팡이 '환술 도구'를 소지하고 다니며, 이를 매개로 하여

자신의 에테르나 주위 원소를 마법으로 변환한다.회복이나 강화 등 육체에

직접 작용하는 마법에 특화되어, 고위 환술사는 치유사로서 뛰어난 실력을 발휘한다.

</p>

<p>

<h2>주술사</h2>

'주술'이라 부르는, 파괴적 성향이 강한 마법을 다루는 마법사. 자신의 본성을

성찰하여 내면에 잠재된 힘을 사용할 수 있다. 염주가 달린 '주술 도구'를 소지하고

다니며, 이를 매개로 하여 자신의 에테르를 마법으로 변환한다. 그들이 구사하는

저주와 파괴의 마법은, 칼날보다 거센 날카로움으로 적들에게 치명상을 입힌다.

</p>

<p>

<h2>비술사</h2>

비술이라 부르는 마법으로 사역마를 조종하는 마법사.

남해 제도에서 온 산술을 기반으로 한, 독특한 기하학적 '마법 문양'으로

정신력을 제어한다. 수많은 마법 문양이 그려진 마법 도구 '마도서'를

소지하고 다니며, 이 마도서에 에테르를 주입해 마법을 일으킨다.

또한 보석의 신비를 기술한 '마법 문양'을 통해 사역마 '카벙클'을 만들어 부리기도 한다.

</p>


</body>

</html>


*********************************


<style type="text/css">

h2 {

color:red;

}

</style>



h2태그 안의 것들만 빨간색으로 바꿔준다.



****************************************



<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>


<style type="text/css">

h2{

color:red;

}

p{

color:blue;

}

</style>



</head>

<body>

<h1>캐릭터</h1>


<h2>환술사</h2>

<p>

'환술'이라 부르는, 속성의 영향력이 강한 마법을 다루는 마법사.

자기 주위의 만물로부터 흙, 바람, 물의 속성원소를 찾아낼 수 있다.

자연에서 온 물건으로 만든 지팡이 '환술 도구'를 소지하고 다니며, 이를 매개로 하여

자신의 에테르나 주위 원소를 마법으로 변환한다.회복이나 강화 등 육체에

직접 작용하는 마법에 특화되어, 고위 환술사는 치유사로서 뛰어난 실력을 발휘한다.

</p>


<h2>주술사</h2>

<p>

'주술'이라 부르는, 파괴적 성향이 강한 마법을 다루는 마법사. 자신의 본성을

성찰하여 내면에 잠재된 힘을 사용할 수 있다. 염주가 달린 '주술 도구'를 소지하고

다니며, 이를 매개로 하여 자신의 에테르를 마법으로 변환한다. 그들이 구사하는

저주와 파괴의 마법은, 칼날보다 거센 날카로움으로 적들에게 치명상을 입힌다.

</p>


<h2>비술사</h2>

<p>

비술이라 부르는 마법으로 사역마를 조종하는 마법사.

남해 제도에서 온 산술을 기반으로 한, 독특한 기하학적 '마법 문양'으로

정신력을 제어한다. 수많은 마법 문양이 그려진 마법 도구 '마도서'를

소지하고 다니며, 이 마도서에 에테르를 주입해 마법을 일으킨다.

또한 보석의 신비를 기술한 '마법 문양'을 통해 사역마 '카벙클'을 만들어 부리기도 한다.

</p>


</body>

</html>






<h2> 태그는 빨강

<p>태그는 파랑으로




****************************************88

<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>


<style type="text/css">

body{

color:green;

}

h2{

color:red;

}

p{

color:blue;

}

</style>



</head>

<body>

<h1>캐릭터</h1>


<h2>환술사</h2>

<p>

'환술'이라 부르는, 속성의 영향력이 강한 마법을 다루는 마법사.

자기 주위의 만물로부터 흙, 바람, 물의 속성원소를 찾아낼 수 있다.

자연에서 온 물건으로 만든 지팡이 '환술 도구'를 소지하고 다니며, 이를 매개로 하여

자신의 에테르나 주위 원소를 마법으로 변환한다.회복이나 강화 등 육체에

직접 작용하는 마법에 특화되어, 고위 환술사는 치유사로서 뛰어난 실력을 발휘한다.

</p>


<h2>주술사</h2>

<p>

'주술'이라 부르는, 파괴적 성향이 강한 마법을 다루는 마법사. 자신의 본성을

성찰하여 내면에 잠재된 힘을 사용할 수 있다. 염주가 달린 '주술 도구'를 소지하고

다니며, 이를 매개로 하여 자신의 에테르를 마법으로 변환한다. 그들이 구사하는

저주와 파괴의 마법은, 칼날보다 거센 날카로움으로 적들에게 치명상을 입힌다.

</p>


<h2>비술사</h2>

<p>

비술이라 부르는 마법으로 사역마를 조종하는 마법사.

남해 제도에서 온 산술을 기반으로 한, 독특한 기하학적 '마법 문양'으로

정신력을 제어한다. 수많은 마법 문양이 그려진 마법 도구 '마도서'를

소지하고 다니며, 이 마도서에 에테르를 주입해 마법을 일으킨다.

또한 보석의 신비를 기술한 '마법 문양'을 통해 사역마 '카벙클'을 만들어 부리기도 한다.

</p>


</body>

</html>






***8



<style type="text/css">

body{

color:green;

}

h2{

color:red;

}

p{

color:blue;

}

</style>


전체는 초록

h2는 레드

p는 파랑



*********************



<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>


<style type="text/css">

body{

color:green;

}

h2{

color:red;

}

p{

color:blue;

}

#f1{

color:gray;

}

</style>



</head>

<body>

<h1>캐릭터</h1>


<h2>환술사</h2>

<p id="f1">

'환술'이라 부르는, 속성의 영향력이 강한 마법을 다루는 마법사.

자기 주위의 만물로부터 흙, 바람, 물의 속성원소를 찾아낼 수 있다.

자연에서 온 물건으로 만든 지팡이 '환술 도구'를 소지하고 다니며, 이를 매개로 하여

자신의 에테르나 주위 원소를 마법으로 변환한다.회복이나 강화 등 육체에

직접 작용하는 마법에 특화되어, 고위 환술사는 치유사로서 뛰어난 실력을 발휘한다.

</p>


<h2>주술사</h2>

<p id="f2">

'주술'이라 부르는, 파괴적 성향이 강한 마법을 다루는 마법사. 자신의 본성을

성찰하여 내면에 잠재된 힘을 사용할 수 있다. 염주가 달린 '주술 도구'를 소지하고

다니며, 이를 매개로 하여 자신의 에테르를 마법으로 변환한다. 그들이 구사하는

저주와 파괴의 마법은, 칼날보다 거센 날카로움으로 적들에게 치명상을 입힌다.

</p>


<h2>비술사</h2>

<p id="f3">

비술이라 부르는 마법으로 사역마를 조종하는 마법사.

남해 제도에서 온 산술을 기반으로 한, 독특한 기하학적 '마법 문양'으로

정신력을 제어한다. 수많은 마법 문양이 그려진 마법 도구 '마도서'를

소지하고 다니며, 이 마도서에 에테르를 주입해 마법을 일으킨다.

또한 보석의 신비를 기술한 '마법 문양'을 통해 사역마 '카벙클'을 만들어 부리기도 한다.

</p>


</body>

</html>




p태그에 id를 주고  #아이디명{   } 으로 꾸며줄 수도 있다. 아이디는 태그보다 우선한다.




방법 두가지

1. 태그를 잡는 방법

2. 태그속성에 아이디를 주고 #아이디로 잡는 방법


+


속성으로 클래스라는 속성 사용


아이디는 중복사용금지, but 클래스는 중복사용허용



*****************************

태그안에 클래스명을 지정 class=" " 하고 위에서  .class이름{  } 으로 호출     





<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>


<style type="text/css">

body{

color:green;

}

h2{

color:red;

}

p{

color:blue;

}

.magic{

color:purple;

}

.knight{

color:teal;

}

.c1{

color:lime;

}

.c2{

color:orange;

}

</style>



</head>

<body>

<h1>캐릭터</h1>

마법사

<h2 class="c1">환술사</h2>

<p class="magic">

'환술'이라 부르는, 속성의 영향력이 강한 마법을 다루는 마법사.

자기 주위의 만물로부터 흙, 바람, 물의 속성원소를 찾아낼 수 있다.

자연에서 온 물건으로 만든 지팡이 '환술 도구'를 소지하고 다니며, 이를 매개로 하여

자신의 에테르나 주위 원소를 마법으로 변환한다.회복이나 강화 등 육체에

직접 작용하는 마법에 특화되어, 고위 환술사는 치유사로서 뛰어난 실력을 발휘한다.

</p>


<h2 class="c1">주술사</h2>

<p class="magic">

'주술'이라 부르는, 파괴적 성향이 강한 마법을 다루는 마법사. 자신의 본성을

성찰하여 내면에 잠재된 힘을 사용할 수 있다. 염주가 달린 '주술 도구'를 소지하고

다니며, 이를 매개로 하여 자신의 에테르를 마법으로 변환한다. 그들이 구사하는

저주와 파괴의 마법은, 칼날보다 거센 날카로움으로 적들에게 치명상을 입힌다.

</p>


<h2 class="c1">비술사</h2>

<p class="magic">

비술이라 부르는 마법으로 사역마를 조종하는 마법사.

남해 제도에서 온 산술을 기반으로 한, 독특한 기하학적 '마법 문양'으로

정신력을 제어한다. 수많은 마법 문양이 그려진 마법 도구 '마도서'를

소지하고 다니며, 이 마도서에 에테르를 주입해 마법을 일으킨다.

또한 보석의 신비를 기술한 '마법 문양'을 통해 사역마 '카벙클'을 만들어 부리기도 한다.

</p>

<hr>

전사

<h2 class="c2">검술사</h2>

<p class="knight">

뻗은 양날’검’부터 휘어진 외날’도’까지 폭넓은 종류의 '한손검'을 주무기로 삼는 투사'

관객에게 보여주는 싸움'이 필요했던 검투사들의 기술을 바탕으로 하고 있기에, 방패로 절묘하게

상대의 공격을 막으며 물 흐르듯 검을 휘둘러 적을 쓰러트리는 방어 중심의 검술이 발달했다.

집단 전투에서는 선봉장이 되어 가장 먼저 공격하러 달려감과 동시에 적을 유인해서

아군을 지키는, 말 그대로 '방패' 역할을 맡는다.

</p>


<h2 class="c2">격투사</h2>

<p class="knight">

전통적인 호신술을 습득한 투사.철저하게 단련된 주먹은 이미 무기나 마찬가지지만,

그 손에 '격투 무기'를 장착하여 파괴력을 더욱 배가시킨다. 육체의 움직임을 방해하는

갑옷을 싫어해서 가벼운 장비를 선호하는 그들은 언뜻 무방비상태로 보이지만,

빠른 몸놀림으로 연속해서 타격을 입히며 적을 확실하게 사지로 몰아넣는다.

</p>


<h2 class="c2">도끼술사</h2>

<p class="knight">

해적이 적 선박 파괴나 상륙작전을 펼칠 때 쓰는 '양손도끼'를 주무기로 쓰는 투사.

예로부터 해적들의 무기라는 인상이 강하지만, 각 도시 간의 전쟁이나 강력한

마물의 토벌전 등에서 큰 활약을 펼쳐 영웅으로 추앙 받았으며 역사에 이름을

남긴 도끼술사도 많다. 극한까지 단련된 육체로 거대한 전투도끼를 힘껏 휘두르는

호쾌한 전투 스타일을 보이며, 적진 한가운데로 태연하게 뛰어드는

그 배짱이야말로 도끼술사의 가장 강한 무기라 할 수 있을 것이다.

</p>

</body>

</html>




********************************************************


아이디와 클래스사용 예제



<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>


<style type="text/css">

body{

color:green;

}

h2{

color:red;

}

p{

color:blue;

}

.magic{

color:purple;

}

.knight{

color:teal;

}

.c1{

color:lime;

}

.c2{

color:orange;

}

#a1{

color:navy;

}

#a2{

color:fuchsia;

}

</style>



</head>

<body>

<h1 id="a1">캐릭터</h1>

<h1>마법사</h1>

<h2 class="c1">환술사</h2>

<p class="magic">

'환술'이라 부르는, 속성의 영향력이 강한 마법을 다루는 마법사.

자기 주위의 만물로부터 흙, 바람, 물의 속성원소를 찾아낼 수 있다.

자연에서 온 물건으로 만든 지팡이 '환술 도구'를 소지하고 다니며, 이를 매개로 하여

자신의 에테르나 주위 원소를 마법으로 변환한다.회복이나 강화 등 육체에

직접 작용하는 마법에 특화되어, 고위 환술사는 치유사로서 뛰어난 실력을 발휘한다.

</p>


<h2 class="c1">주술사</h2>

<p class="magic">

'주술'이라 부르는, 파괴적 성향이 강한 마법을 다루는 마법사. 자신의 본성을

성찰하여 내면에 잠재된 힘을 사용할 수 있다. 염주가 달린 '주술 도구'를 소지하고

다니며, 이를 매개로 하여 자신의 에테르를 마법으로 변환한다. 그들이 구사하는

저주와 파괴의 마법은, 칼날보다 거센 날카로움으로 적들에게 치명상을 입힌다.

</p>


<h2 class="c1">비술사</h2>

<p class="magic">

비술이라 부르는 마법으로 사역마를 조종하는 마법사.

남해 제도에서 온 산술을 기반으로 한, 독특한 기하학적 '마법 문양'으로

정신력을 제어한다. 수많은 마법 문양이 그려진 마법 도구 '마도서'를

소지하고 다니며, 이 마도서에 에테르를 주입해 마법을 일으킨다.

또한 보석의 신비를 기술한 '마법 문양'을 통해 사역마 '카벙클'을 만들어 부리기도 한다.

</p>

<hr>

<h1 id="a2">전사</h1>

<h2 class="c2">검술사</h2>

<p class="knight">

뻗은 양날’검’부터 휘어진 외날’도’까지 폭넓은 종류의 '한손검'을 주무기로 삼는 투사'

관객에게 보여주는 싸움'이 필요했던 검투사들의 기술을 바탕으로 하고 있기에, 방패로 절묘하게

상대의 공격을 막으며 물 흐르듯 검을 휘둘러 적을 쓰러트리는 방어 중심의 검술이 발달했다.

집단 전투에서는 선봉장이 되어 가장 먼저 공격하러 달려감과 동시에 적을 유인해서

아군을 지키는, 말 그대로 '방패' 역할을 맡는다.

</p>


<h2 class="c2">격투사</h2>

<p class="knight">

전통적인 호신술을 습득한 투사.철저하게 단련된 주먹은 이미 무기나 마찬가지지만,

그 손에 '격투 무기'를 장착하여 파괴력을 더욱 배가시킨다. 육체의 움직임을 방해하는

갑옷을 싫어해서 가벼운 장비를 선호하는 그들은 언뜻 무방비상태로 보이지만,

빠른 몸놀림으로 연속해서 타격을 입히며 적을 확실하게 사지로 몰아넣는다.

</p>


<h2 class="c2">도끼술사</h2>

<p class="knight">

해적이 적 선박 파괴나 상륙작전을 펼칠 때 쓰는 '양손도끼'를 주무기로 쓰는 투사.

예로부터 해적들의 무기라는 인상이 강하지만, 각 도시 간의 전쟁이나 강력한

마물의 토벌전 등에서 큰 활약을 펼쳐 영웅으로 추앙 받았으며 역사에 이름을

남긴 도끼술사도 많다. 극한까지 단련된 육체로 거대한 전투도끼를 힘껏 휘두르는

호쾌한 전투 스타일을 보이며, 적진 한가운데로 태연하게 뛰어드는

그 배짱이야말로 도끼술사의 가장 강한 무기라 할 수 있을 것이다.

</p>

</body>

</html>




결과

>

캐릭터

마법사

환술사

'환술'이라 부르는, 속성의 영향력이 강한 마법을 다루는 마법사. 자기 주위의 만물로부터 흙, 바람, 물의 속성원소를 찾아낼 수 있다. 자연에서 온 물건으로 만든 지팡이 '환술 도구'를 소지하고 다니며, 이를 매개로 하여 자신의 에테르나 주위 원소를 마법으로 변환한다.회복이나 강화 등 육체에 직접 작용하는 마법에 특화되어, 고위 환술사는 치유사로서 뛰어난 실력을 발휘한다.

주술사

'주술'이라 부르는, 파괴적 성향이 강한 마법을 다루는 마법사. 자신의 본성을 성찰하여 내면에 잠재된 힘을 사용할 수 있다. 염주가 달린 '주술 도구'를 소지하고 다니며, 이를 매개로 하여 자신의 에테르를 마법으로 변환한다. 그들이 구사하는 저주와 파괴의 마법은, 칼날보다 거센 날카로움으로 적들에게 치명상을 입힌다.

비술사

비술이라 부르는 마법으로 사역마를 조종하는 마법사. 남해 제도에서 온 산술을 기반으로 한, 독특한 기하학적 '마법 문양'으로 정신력을 제어한다. 수많은 마법 문양이 그려진 마법 도구 '마도서'를 소지하고 다니며, 이 마도서에 에테르를 주입해 마법을 일으킨다. 또한 보석의 신비를 기술한 '마법 문양'을 통해 사역마 '카벙클'을 만들어 부리기도 한다.


전사

검술사

뻗은 양날’검’부터 휘어진 외날’도’까지 폭넓은 종류의 '한손검'을 주무기로 삼는 투사' 관객에게 보여주는 싸움'이 필요했던 검투사들의 기술을 바탕으로 하고 있기에, 방패로 절묘하게 상대의 공격을 막으며 물 흐르듯 검을 휘둘러 적을 쓰러트리는 방어 중심의 검술이 발달했다. 집단 전투에서는 선봉장이 되어 가장 먼저 공격하러 달려감과 동시에 적을 유인해서 아군을 지키는, 말 그대로 '방패' 역할을 맡는다.

격투사

전통적인 호신술을 습득한 투사.철저하게 단련된 주먹은 이미 무기나 마찬가지지만, 그 손에 '격투 무기'를 장착하여 파괴력을 더욱 배가시킨다. 육체의 움직임을 방해하는 갑옷을 싫어해서 가벼운 장비를 선호하는 그들은 언뜻 무방비상태로 보이지만, 빠른 몸놀림으로 연속해서 타격을 입히며 적을 확실하게 사지로 몰아넣는다.

도끼술사

해적이 적 선박 파괴나 상륙작전을 펼칠 때 쓰는 '양손도끼'를 주무기로 쓰는 투사. 예로부터 해적들의 무기라는 인상이 강하지만, 각 도시 간의 전쟁이나 강력한 마물의 토벌전 등에서 큰 활약을 펼쳐 영웅으로 추앙 받았으며 역사에 이름을 남긴 도끼술사도 많다. 극한까지 단련된 육체로 거대한 전투도끼를 힘껏 휘두르는 호쾌한 전투 스타일을 보이며, 적진 한가운데로 태연하게 뛰어드는 그 배짱이야말로 도끼술사의 가장 강한 무기라 할 수 있을 것이다.





************************************************************88


테두리


border 옵션



<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<style type="text/css">

p{

border-bottom-color:red;

border-bottom-style:dashed;

border-bottom-width:1px;

border-left-color:blue;

border-left-style:solid;

border-left-width:3px;

border-top-color:gray;

border-top-style:dotted;

border-top-width:medium;

border-right-color:fuchsia;

border-right-style:double;

border-right-width:thick;

}

</style>

<title>Insert title here</title>

</head>

<body>

<p>

abc

</p>

<p>

def</p>

<table border=1>

<tr>

 <td>1.1

 </td>

 <td>1.2

 </td>

 <td>1.3

 </td>

</tr>

<tr>

 <td>2.1

 </td>

 <td>2.2

 </td>

 <td>2.3

 </td>

</tr>

</table>


</body>

</html>





결과

>

abc

def

1.11.21.3
2.12.22.3




**********************************************************


아이디 지정하고 p1만 옵션주기

p2에도 보이지는 않지만 박스가 있다



<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<style type="text/css">

#p1{

border-bottom-color:red;

border-bottom-style:dashed;

border-bottom-width:1px;

border-left-color:blue;

border-left-style:solid;

border-left-width:3px;

border-top-color:gray;

border-top-style:dotted;

border-top-width:medium;

border-right-color:fuchsia;

border-right-style:double;

border-right-width:thick;

}

</style>

<title>Insert title here</title>

</head>

<body>

<p id="p1">

abc

</p>

<p id="p2">

def</p>

<table border=1>

<tr>

 <td>1.1

 </td>

 <td>1.2

 </td>

 <td>1.3

 </td>

</tr>

<tr>

 <td>2.1

 </td>

 <td>2.2

 </td>

 <td>2.3

 </td>

</tr>

</table>


</body>

</html>



결과

>

abc

def

1.11.21.3
2.12.22.3







***************************************************


한줄로 옵션주기

색상,스타일,넓이를 한줄에 



<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<style type="text/css">

#p1{

border-bottom-color:red;

border-bottom-style:dashed;

border-bottom-width:1px;

border-left-color:blue;

border-left-style:solid;

border-left-width:3px;

border-top-color:gray;

border-top-style:dotted;

border-top-width:medium;

border-right-color:fuchsia;

border-right-style:double;

border-right-width:thick;

}

#p2{

border-bottom:red dashed 1px;

border-left:blue solid 3px;

border-top:gray dotted medium;

border-right:fuchsia double thick;

}

</style>

<title>Insert title here</title>

</head>

<body>

<p id="p1">

abc

</p>

<p id="p2">

def</p>

<table border=1>

<tr>

 <td>1.1

 </td>

 <td>1.2

 </td>

 <td>1.3

 </td>

</tr>

<tr>

 <td>2.1

 </td>

 <td>2.2

 </td>

 <td>2.3

 </td>

</tr>

</table>


</body>

</html>




p1과 p2 같은 결과를 주지만 p2 부분이 코드가 간단



abc

def

1.11.21.3
2.12.22.3





*****************************************************8

상하좌우 다 같은 스타일로



<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<style type="text/css">

#p1{

border-bottom-color:red;

border-bottom-style:dashed;

border-bottom-width:1px;

border-left-color:blue;

border-left-style:solid;

border-left-width:3px;

border-top-color:gray;

border-top-style:dotted;

border-top-width:medium;

border-right-color:fuchsia;

border-right-style:double;

border-right-width:thick;

}

#p2{

border-bottom:red dashed 1px;

border-left:blue solid 3px;

border-top:gray dotted medium;

border-right:fuchsia double thick;

}

#p3{

border:red solid 1px;

}

</style>

<title>Insert title here</title>

</head>

<body>

<p id="p1">

abc

</p>

<p id="p2">

def

</p>

<p id="p3">

hij

</p>

<table >

<tr>

 <td>1.1

 </td>

 <td>1.2

 </td>

 <td>1.3

 </td>

</tr>

<tr>

 <td>2.1

 </td>

 <td>2.2

 </td>

 <td>2.3

 </td>

</tr>

</table>


</body>

</html>




abc

def

hij

1.11.21.3
2.12.22.3



********************************************************88





table {

border: blue solid 1px;

border-spacing:0px;

}

td{

border: blue solid 1px;

}



테이블 테두리 간 간격을 0으로



*****************************


table {

border: blue solid 1px;

border-collapse:collapse;

}

td{

border: blue solid 1px;

}


테이블의 선을 두개말고 하나로 만들겠다.



*******************************

높이와 길이 조정


<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<style type="text/css">

#p1{

width:920px;

height:500px;

border-bottom-color:red;

border-bottom-style:dashed;

border-bottom-width:1px;

border-left-color:blue;

border-left-style:solid;

border-left-width:3px;

border-top-color:gray;

border-top-style:dotted;

border-top-width:medium;

border-right-color:fuchsia;

border-right-style:double;

border-right-width:thick;

}

#p2{

border-bottom:red dashed 1px;

border-left:blue solid 3px;

border-top:gray dotted medium;

border-right:fuchsia double thick;

}

#p3{

border:red solid 1px;

}

table {

border: blue solid 1px;

border-collapse:collapse;

}

td{

border: blue solid 1px;

}

</style>

<title>Insert title here</title>

</head>

<body>

<p id="p1">

abc

</p>

<p id="p2">

def

</p>

<p id="p3">

hij

</p>

<table >

<tr>

 <td>1.1

 </td>

 <td>1.2

 </td>

 <td>1.3

 </td>

</tr>

<tr>

 <td>2.1

 </td>

 <td>2.2

 </td>

 <td>2.3

 </td>

</tr>

</table>


</body>

</html>





결과

>

abc

def

hij

1.11.21.3
2.12.22.3











***************************************************************

테이블의 너비 높이 조절




<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<style type="text/css">

#p1{

width:920px;

height:500px;

border-bottom-color:red;

border-bottom-style:dashed;

border-bottom-width:1px;

border-left-color:blue;

border-left-style:solid;

border-left-width:3px;

border-top-color:gray;

border-top-style:dotted;

border-top-width:medium;

border-right-color:fuchsia;

border-right-style:double;

border-right-width:thick;

}

#p2{

border-bottom:red dashed 1px;

border-left:blue solid 3px;

border-top:gray dotted medium;

border-right:fuchsia double thick;

}

#p3{

border:red solid 1px;

}

table {

width:1000px;

height:100px;

border: blue solid 1px;

border-collapse:collapse;

}

td{

border: blue solid 1px;

}

</style>

<title>Insert title here</title>

</head>

<body>

<p id="p1">

abc

</p>

<p id="p2">

def

</p>

<p id="p3">

hij

</p>

<table >

<tr>

 <td>1.1

 </td>

 <td>1.2

 </td>

 <td>1.3

 </td>

</tr>

<tr>

 <td>2.1

 </td>

 <td>2.2

 </td>

 <td>2.3

 </td>

</tr>

</table>


</body>

</html>




결과

>

abc

def

hij

1.11.21.3
2.12.22.3





*********************************************************************


바디에 사진 넣기 , 위치조절


<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<style type="text/css">

body{

background-image:url("./iusignin.jpg"); 

background-repeat:no-repeat;

background-position:center;

}

#p1{

width:920px;

height:500px;

border-bottom-color:red;

border-bottom-style:dashed;

border-bottom-width:1px;

border-left-color:blue;

border-left-style:solid;

border-left-width:3px;

border-top-color:gray;

border-top-style:dotted;

border-top-width:medium;

border-right-color:fuchsia;

border-right-style:double;

border-right-width:thick;

}

#p2{

border-bottom:red dashed 1px;

border-left:blue solid 3px;

border-top:gray dotted medium;

border-right:fuchsia double thick;

}

#p3{

border:red solid 1px;

}

table {

width:1000px;

height:100px;

border: blue solid 1px;

border-collapse:collapse;

}

td{

border: blue solid 1px;

}

</style>

<title>Insert title here</title>

</head>

<body>

<p id="p1">

abc

</p>

<p id="p2">

def

</p>

<p id="p3">

hij

</p>

<table >

<tr>

 <td>1.1

 </td>

 <td>1.2

 </td>

 <td>1.3

 </td>

</tr>

<tr>

 <td>2.1

 </td>

 <td>2.2

 </td>

 <td>2.3

 </td>

</tr>

</table>


</body>

</html>








****************************************************************


박스속성



박스와 박스간의 간격 : margin


박스안의 컨텐트와의 간격 : pedding



*******************************************************************



<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<style type="text/css">

body{

background-image:url("./iusignin.jpg"); 

background-repeat:no-repeat;

background-position:center;

}

#p1{

border-bottom-color:red;

border-bottom-style:dashed;

border-bottom-width:1px;

border-left-color:blue;

border-left-style:solid;

border-left-width:3px;

border-top-color:gray;

border-top-style:dotted;

border-top-width:medium;

border-right-color:fuchsia;

border-right-style:double;

border-right-width:thick;

}

#p2{

width:inherit;

margin-top:100px;

margin-left:100px;

margin-right:100px;

border-bottom:red dashed 1px;

border-left:blue solid 3px;

border-top:gray dotted medium;

border-right:fuchsia double thick;

}

#p3{

border:red solid 1px;

}

table {

width:1000px;

height:100px;

border: blue solid 1px;

border-collapse:collapse;

}

td{

border: blue solid 1px;

}

</style>

<title>Insert title here</title>

</head>

<body>

<p id="p1">

abc

</p>

<p id="p2">

def

</p>

<p id="p3">

hij

</p>

<table >

<tr>

 <td>1.1

 </td>

 <td>1.2

 </td>

 <td>1.3

 </td>

</tr>

<tr>

 <td>2.1

 </td>

 <td>2.2

 </td>

 <td>2.3

 </td>

</tr>

</table>


</body>

</html>


inherit : body를 상속받는다


top : 위에거로부터 간격


left , right : 바디로부터 왼쪽



******************************************************************8


<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<style type="text/css">

body{

background-image:url("./iusignin.jpg"); 

background-repeat:no-repeat;

background-position:center;

}

#p1{

border-bottom-color:red;

border-bottom-style:dashed;

border-bottom-width:1px;

border-left-color:blue;

border-left-style:solid;

border-left-width:3px;

border-top-color:gray;

border-top-style:dotted;

border-top-width:medium;

border-right-color:fuchsia;

border-right-style:double;

border-right-width:thick;

}

#p2{

width:inherit;

margin-top:100px;

margin-left:100px;

margin-right:100px;

border-bottom:red dashed 1px;

border-left:blue solid 3px;

border-top:gray dotted medium;

border-right:fuchsia double thick;

}

#p3{

margin:10px;

border:red solid 1px;

}

table {

width:1000px;

height:100px;

border: blue solid 1px;

border-collapse:collapse;

}

td{

border: blue solid 1px;

}

</style>

<title>Insert title here</title>

</head>

<body>

<p id="p1">

abc

</p>

<p id="p2">

def

</p>

<p id="p3">

hij

</p>

<table >

<tr>

 <td>1.1

 </td>

 <td>1.2

 </td>

 <td>1.3

 </td>

</tr>

<tr>

 <td>2.1

 </td>

 <td>2.2

 </td>

 <td>2.3

 </td>

</tr>

</table>


</body>

</html>




*****


#p3{

margin:10px;

border:red solid 1px;

}


위아래로 10px씩 


*****


#p3{

margin:10px 20px;

border:red solid 1px;

}



위아래 10px


좌우 20px씩



********************************************


#p2{

width:300px;

margin:auto;

border-bottom:red dashed 1px;

border-left:blue solid 3px;

border-top:gray dotted medium;

border-right:fuchsia double thick;

}




중앙정렬 할때는 margin : auto 옵션을 주면 된다.



*******************************************8

테이블 중앙으로 보내기 연습



table {

margin:auto;

width:1000px;

height:100px;

border: blue solid 1px;

border-collapse:collapse;

}



*********************************************



테이블 연습



table{

width:500px;

height:200px;

margin: 100px auto;

border: green; solid 2px;

border-collapse:collapse;

}

td{

border: green solid 2px;

}




margin에 상하는 수치를주고 좌우는 오토

margin: 100px auto


첫번째가 상하, 두번째가 좌우






*******************************************************************


바디 , 문단을 중앙으로 정렬하고 양옆은 여백처리하기



<div> </div> 태그






<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>


<style type="text/css">

body{

color:green;

}

h2{

color:red;

}

p{

color:blue;

}

.magic{

color:purple;

}

.knight{

color:teal;

}

.c1{

color:lime;

}

.c2{

color:orange;

}

#a1{

color:navy;

}

#a2{

color:fuchsia;

}

table{

width:500px;

height:200px;

margin: 100px auto;

border: green; solid 2px;

border-collapse:collapse;

}

td{

border: green solid 2px;

}

div{

border: red 3px solid;

}

#wrap{

width: 1000px;

margin: auto;

}

</style>



</head>

<body>

<div id="wrap">

<h1 id="a1">캐릭터</h1>


<h1>마법사</h1>

<h2 class="c1">환술사</h2>

<p class="magic">

'환술'이라 부르는, 속성의 영향력이 강한 마법을 다루는 마법사.

자기 주위의 만물로부터 흙, 바람, 물의 속성원소를 찾아낼 수 있다.

자연에서 온 물건으로 만든 지팡이 '환술 도구'를 소지하고 다니며, 이를 매개로 하여

자신의 에테르나 주위 원소를 마법으로 변환한다.회복이나 강화 등 육체에

직접 작용하는 마법에 특화되어, 고위 환술사는 치유사로서 뛰어난 실력을 발휘한다.

</p>


<h2 class="c1">주술사</h2>

<p class="magic">

'주술'이라 부르는, 파괴적 성향이 강한 마법을 다루는 마법사. 자신의 본성을

성찰하여 내면에 잠재된 힘을 사용할 수 있다. 염주가 달린 '주술 도구'를 소지하고

다니며, 이를 매개로 하여 자신의 에테르를 마법으로 변환한다. 그들이 구사하는

저주와 파괴의 마법은, 칼날보다 거센 날카로움으로 적들에게 치명상을 입힌다.

</p>


<h2 class="c1">비술사</h2>

<p class="magic">

비술이라 부르는 마법으로 사역마를 조종하는 마법사.

남해 제도에서 온 산술을 기반으로 한, 독특한 기하학적 '마법 문양'으로

정신력을 제어한다. 수많은 마법 문양이 그려진 마법 도구 '마도서'를

소지하고 다니며, 이 마도서에 에테르를 주입해 마법을 일으킨다.

또한 보석의 신비를 기술한 '마법 문양'을 통해 사역마 '카벙클'을 만들어 부리기도 한다.

</p>

<hr>

<h1 id="a2">전사</h1>

<h2 class="c2">검술사</h2>

<p class="knight">

뻗은 양날’검’부터 휘어진 외날’도’까지 폭넓은 종류의 '한손검'을 주무기로 삼는 투사'

관객에게 보여주는 싸움'이 필요했던 검투사들의 기술을 바탕으로 하고 있기에, 방패로 절묘하게

상대의 공격을 막으며 물 흐르듯 검을 휘둘러 적을 쓰러트리는 방어 중심의 검술이 발달했다.

집단 전투에서는 선봉장이 되어 가장 먼저 공격하러 달려감과 동시에 적을 유인해서

아군을 지키는, 말 그대로 '방패' 역할을 맡는다.

</p>


<h2 class="c2">격투사</h2>

<p class="knight">

전통적인 호신술을 습득한 투사.철저하게 단련된 주먹은 이미 무기나 마찬가지지만,

그 손에 '격투 무기'를 장착하여 파괴력을 더욱 배가시킨다. 육체의 움직임을 방해하는

갑옷을 싫어해서 가벼운 장비를 선호하는 그들은 언뜻 무방비상태로 보이지만,

빠른 몸놀림으로 연속해서 타격을 입히며 적을 확실하게 사지로 몰아넣는다.

</p>


<h2 class="c2">도끼술사</h2>

<p class="knight">

해적이 적 선박 파괴나 상륙작전을 펼칠 때 쓰는 '양손도끼'를 주무기로 쓰는 투사.

예로부터 해적들의 무기라는 인상이 강하지만, 각 도시 간의 전쟁이나 강력한

마물의 토벌전 등에서 큰 활약을 펼쳐 영웅으로 추앙 받았으며 역사에 이름을

남긴 도끼술사도 많다. 극한까지 단련된 육체로 거대한 전투도끼를 힘껏 휘두르는

호쾌한 전투 스타일을 보이며, 적진 한가운데로 태연하게 뛰어드는

그 배짱이야말로 도끼술사의 가장 강한 무기라 할 수 있을 것이다.

</p>

<table>

<tr>

<td>1.1</td>

<td>2.1</td>

<td>3.1</td>

</tr>

<tr>

<td>2.1</td>

<td>2.2</td>

<td>2.3</td>

</tr>

</table>





</div>

</body>

</html>






결과

>



Charactor

마법사

환술사

'환술'이라 부르는, 속성의 영향력이 강한 마법을 다루는 마법사. 자기 주위의 만물로부터 흙, 바람, 물의 속성원소를 찾아낼 수 있다. 자연에서 온 물건으로 만든 지팡이 '환술 도구'를 소지하고 다니며, 이를 매개로 하여 자신의 에테르나 주위 원소를 마법으로 변환한다.회복이나 강화 등 육체에 직접 작용하는 마법에 특화되어, 고위 환술사는 치유사로서 뛰어난 실력을 발휘한다.

주술사

'주술'이라 부르는, 파괴적 성향이 강한 마법을 다루는 마법사. 자신의 본성을 성찰하여 내면에 잠재된 힘을 사용할 수 있다. 염주가 달린 '주술 도구'를 소지하고 다니며, 이를 매개로 하여 자신의 에테르를 마법으로 변환한다. 그들이 구사하는 저주와 파괴의 마법은, 칼날보다 거센 날카로움으로 적들에게 치명상을 입힌다.

비술사

비술이라 부르는 마법으로 사역마를 조종하는 마법사. 남해 제도에서 온 산술을 기반으로 한, 독특한 기하학적 '마법 문양'으로 정신력을 제어한다. 수많은 마법 문양이 그려진 마법 도구 '마도서'를 소지하고 다니며, 이 마도서에 에테르를 주입해 마법을 일으킨다. 또한 보석의 신비를 기술한 '마법 문양'을 통해 사역마 '카벙클'을 만들어 부리기도 한다.


전사

검술사

뻗은 양날’검’부터 휘어진 외날’도’까지 폭넓은 종류의 '한손검'을 주무기로 삼는 투사' 관객에게 보여주는 싸움'이 필요했던 검투사들의 기술을 바탕으로 하고 있기에, 방패로 절묘하게 상대의 공격을 막으며 물 흐르듯 검을 휘둘러 적을 쓰러트리는 방어 중심의 검술이 발달했다. 집단 전투에서는 선봉장이 되어 가장 먼저 공격하러 달려감과 동시에 적을 유인해서 아군을 지키는, 말 그대로 '방패' 역할을 맡는다.

격투사

전통적인 호신술을 습득한 투사.철저하게 단련된 주먹은 이미 무기나 마찬가지지만, 그 손에 '격투 무기'를 장착하여 파괴력을 더욱 배가시킨다. 육체의 움직임을 방해하는 갑옷을 싫어해서 가벼운 장비를 선호하는 그들은 언뜻 무방비상태로 보이지만, 빠른 몸놀림으로 연속해서 타격을 입히며 적을 확실하게 사지로 몰아넣는다.

도끼술사

해적이 적 선박 파괴나 상륙작전을 펼칠 때 쓰는 '양손도끼'를 주무기로 쓰는 투사. 예로부터 해적들의 무기라는 인상이 강하지만, 각 도시 간의 전쟁이나 강력한 마물의 토벌전 등에서 큰 활약을 펼쳐 영웅으로 추앙 받았으며 역사에 이름을 남긴 도끼술사도 많다. 극한까지 단련된 육체로 거대한 전투도끼를 힘껏 휘두르는 호쾌한 전투 스타일을 보이며, 적진 한가운데로 태연하게 뛰어드는 그 배짱이야말로 도끼술사의 가장 강한 무기라 할 수 있을 것이다.

1-11-21-3
2-12-22-3







*****************************************

모두 가운데로 정렬한 상태에서

마법사는 왼쪽으로, 전사는 오른쪽으로 정렬



<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>


<style type="text/css">

body{

color:green;

}

h2{

color:red;

}

p{

color:blue;

}

.magic{

color:purple;

}

.knight{

color:teal;

}

.c1{

color:lime;

}

.c2{

color:orange;

}

#a1{

width:200px;

margin : 5px 430px;

color:navy;

}

#a2{

color:fuchsia;

}

table{

width:500px;

height:200px;

margin: 100px auto;

border: green; solid 2px;

border-collapse:collapse;

}

td{

border: green solid 2px;

}

div{

border: red 3px solid;

}

#wrap{

width: 1000px;

margin: auto;

}

#wrapmagic{

margin-left:6px;

width: 700px;

}

#wrapknight{

margin-left: 290px;

width: 700px;

}

</style>



</head>

<body>

<div id="wrap">

<h1 id="a1">캐릭터</h1>


<div id="wrapmagic">

<h1>마법사</h1>

<h2 class="c1">환술사</h2>

<p class="magic">

'환술'이라 부르는, 속성의 영향력이 강한 마법을 다루는 마법사.

자기 주위의 만물로부터 흙, 바람, 물의 속성원소를 찾아낼 수 있다.

자연에서 온 물건으로 만든 지팡이 '환술 도구'를 소지하고 다니며, 이를 매개로 하여

자신의 에테르나 주위 원소를 마법으로 변환한다.회복이나 강화 등 육체에

직접 작용하는 마법에 특화되어, 고위 환술사는 치유사로서 뛰어난 실력을 발휘한다.

</p>


<h2 class="c1">주술사</h2>

<p class="magic">

'주술'이라 부르는, 파괴적 성향이 강한 마법을 다루는 마법사. 자신의 본성을

성찰하여 내면에 잠재된 힘을 사용할 수 있다. 염주가 달린 '주술 도구'를 소지하고

다니며, 이를 매개로 하여 자신의 에테르를 마법으로 변환한다. 그들이 구사하는

저주와 파괴의 마법은, 칼날보다 거센 날카로움으로 적들에게 치명상을 입힌다.

</p>


<h2 class="c1">비술사</h2>

<p class="magic">

비술이라 부르는 마법으로 사역마를 조종하는 마법사.

남해 제도에서 온 산술을 기반으로 한, 독특한 기하학적 '마법 문양'으로

정신력을 제어한다. 수많은 마법 문양이 그려진 마법 도구 '마도서'를

소지하고 다니며, 이 마도서에 에테르를 주입해 마법을 일으킨다.

또한 보석의 신비를 기술한 '마법 문양'을 통해 사역마 '카벙클'을 만들어 부리기도 한다.

</p>

</div>

<hr>

<div id="wrapknight">

<h1 id="a2">전사</h1>

<h2 class="c2">검술사</h2>

<p class="knight">

뻗은 양날’검’부터 휘어진 외날’도’까지 폭넓은 종류의 '한손검'을 주무기로 삼는 투사'

관객에게 보여주는 싸움'이 필요했던 검투사들의 기술을 바탕으로 하고 있기에, 방패로 절묘하게

상대의 공격을 막으며 물 흐르듯 검을 휘둘러 적을 쓰러트리는 방어 중심의 검술이 발달했다.

집단 전투에서는 선봉장이 되어 가장 먼저 공격하러 달려감과 동시에 적을 유인해서

아군을 지키는, 말 그대로 '방패' 역할을 맡는다.

</p>


<h2 class="c2">격투사</h2>

<p class="knight">

전통적인 호신술을 습득한 투사.철저하게 단련된 주먹은 이미 무기나 마찬가지지만,

그 손에 '격투 무기'를 장착하여 파괴력을 더욱 배가시킨다. 육체의 움직임을 방해하는

갑옷을 싫어해서 가벼운 장비를 선호하는 그들은 언뜻 무방비상태로 보이지만,

빠른 몸놀림으로 연속해서 타격을 입히며 적을 확실하게 사지로 몰아넣는다.

</p>


<h2 class="c2">도끼술사</h2>

<p class="knight">

해적이 적 선박 파괴나 상륙작전을 펼칠 때 쓰는 '양손도끼'를 주무기로 쓰는 투사.

예로부터 해적들의 무기라는 인상이 강하지만, 각 도시 간의 전쟁이나 강력한

마물의 토벌전 등에서 큰 활약을 펼쳐 영웅으로 추앙 받았으며 역사에 이름을

남긴 도끼술사도 많다. 극한까지 단련된 육체로 거대한 전투도끼를 힘껏 휘두르는

호쾌한 전투 스타일을 보이며, 적진 한가운데로 태연하게 뛰어드는

그 배짱이야말로 도끼술사의 가장 강한 무기라 할 수 있을 것이다.

</p>

</div>

<table>

<tr>

<td>1.1</td>

<td>2.1</td>

<td>3.1</td>

</tr>

<tr>

<td>2.1</td>

<td>2.2</td>

<td>2.3</td>

</tr>

</table>





</div>

</body>

</html>






결과

>


캐릭터

마법사

환술사

'환술'이라 부르는, 속성의 영향력이 강한 마법을 다루는 마법사. 자기 주위의 만물로부터 흙, 바람, 물의 속성원소를 찾아낼 수 있다. 자연에서 온 물건으로 만든 지팡이 '환술 도구'를 소지하고 다니며, 이를 매개로 하여 자신의 에테르나 주위 원소를 마법으로 변환한다.회복이나 강화 등 육체에 직접 작용하는 마법에 특화되어, 고위 환술사는 치유사로서 뛰어난 실력을 발휘한다.

주술사

'주술'이라 부르는, 파괴적 성향이 강한 마법을 다루는 마법사. 자신의 본성을 성찰하여 내면에 잠재된 힘을 사용할 수 있다. 염주가 달린 '주술 도구'를 소지하고 다니며, 이를 매개로 하여 자신의 에테르를 마법으로 변환한다. 그들이 구사하는 저주와 파괴의 마법은, 칼날보다 거센 날카로움으로 적들에게 치명상을 입힌다.

비술사

비술이라 부르는 마법으로 사역마를 조종하는 마법사. 남해 제도에서 온 산술을 기반으로 한, 독특한 기하학적 '마법 문양'으로 정신력을 제어한다. 수많은 마법 문양이 그려진 마법 도구 '마도서'를 소지하고 다니며, 이 마도서에 에테르를 주입해 마법을 일으킨다. 또한 보석의 신비를 기술한 '마법 문양'을 통해 사역마 '카벙클'을 만들어 부리기도 한다.


전사

검술사

뻗은 양날’검’부터 휘어진 외날’도’까지 폭넓은 종류의 '한손검'을 주무기로 삼는 투사' 관객에게 보여주는 싸움'이 필요했던 검투사들의 기술을 바탕으로 하고 있기에, 방패로 절묘하게 상대의 공격을 막으며 물 흐르듯 검을 휘둘러 적을 쓰러트리는 방어 중심의 검술이 발달했다. 집단 전투에서는 선봉장이 되어 가장 먼저 공격하러 달려감과 동시에 적을 유인해서 아군을 지키는, 말 그대로 '방패' 역할을 맡는다.

격투사

전통적인 호신술을 습득한 투사.철저하게 단련된 주먹은 이미 무기나 마찬가지지만, 그 손에 '격투 무기'를 장착하여 파괴력을 더욱 배가시킨다. 육체의 움직임을 방해하는 갑옷을 싫어해서 가벼운 장비를 선호하는 그들은 언뜻 무방비상태로 보이지만, 빠른 몸놀림으로 연속해서 타격을 입히며 적을 확실하게 사지로 몰아넣는다.

도끼술사

해적이 적 선박 파괴나 상륙작전을 펼칠 때 쓰는 '양손도끼'를 주무기로 쓰는 투사. 예로부터 해적들의 무기라는 인상이 강하지만, 각 도시 간의 전쟁이나 강력한 마물의 토벌전 등에서 큰 활약을 펼쳐 영웅으로 추앙 받았으며 역사에 이름을 남긴 도끼술사도 많다. 극한까지 단련된 육체로 거대한 전투도끼를 힘껏 휘두르는 호쾌한 전투 스타일을 보이며, 적진 한가운데로 태연하게 뛰어드는 그 배짱이야말로 도끼술사의 가장 강한 무기라 할 수 있을 것이다.

1.12.13.1
2.12.22.3





*************************************************************



#wrapmagic{

padding:10px;

margin-left:6px;

width: 700px;

}




padding 옵션을 사용하면 박스에서 문단을 띄움



캐릭터

마법사

환술사

'환술'이라 부르는, 속성의 영향력이 강한 마법을 다루는 마법사. 자기 주위의 만물로부터 흙, 바람, 물의 속성원소를 찾아낼 수 있다. 자연에서 온 물건으로 만든 지팡이 '환술 도구'를 소지하고 다니며, 이를 매개로 하여 자신의 에테르나 주위 원소를 마법으로 변환한다.회복이나 강화 등 육체에 직접 작용하는 마법에 특화되어, 고위 환술사는 치유사로서 뛰어난 실력을 발휘한다.

주술사

'주술'이라 부르는, 파괴적 성향이 강한 마법을 다루는 마법사. 자신의 본성을 성찰하여 내면에 잠재된 힘을 사용할 수 있다. 염주가 달린 '주술 도구'를 소지하고 다니며, 이를 매개로 하여 자신의 에테르를 마법으로 변환한다. 그들이 구사하는 저주와 파괴의 마법은, 칼날보다 거센 날카로움으로 적들에게 치명상을 입힌다.

비술사

비술이라 부르는 마법으로 사역마를 조종하는 마법사. 남해 제도에서 온 산술을 기반으로 한, 독특한 기하학적 '마법 문양'으로 정신력을 제어한다. 수많은 마법 문양이 그려진 마법 도구 '마도서'를 소지하고 다니며, 이 마도서에 에테르를 주입해 마법을 일으킨다. 또한 보석의 신비를 기술한 '마법 문양'을 통해 사역마 '카벙클'을 만들어 부리기도 한다.






약간의 간격이 보인다.








*****************************************************


#wrapmagic{

padding:20px;

margin-left:6px;

width: 700px;

}

#wrapknight{

padding : 20px;

margin-left: 250px;

width: 700px;

}



페딩을 하면 사이즈가 커지므로

뤱나이트의 마진레프트를 그대로 두면 칸을 넘어간다 그래서 칸을 맞춰주기위해 마진레프트 픽셀을 낮춰줌






**********************************************************



#a1{

width: 100px;

margin: 0 auto;

color:navy;

}


a1아이디 걸어둔 문자를 가운데로


캐릭터






***********************************************************


문단에 특정 단어만 색바꾸기


<span>태그사용


<style type="text/css">

#util{

color: red;

}

</style>


<p class="magic">

'환술'이라 부르는, 속성의 영향력이 강한 마법을 다루는 마법사.

자기 주위의 만물로부터 흙, 바람, 물의 속성원소를 찾아낼 수 있다.

자연에서 온 물건으로 만든 지팡이 <span id="util">'환술 도구'</span>를 소지하고 다니며, 이를 매개로 하여

자신의 에테르나 주위 원소를 마법으로 변환한다.회복이나 강화 등 육체에

직접 작용하는 마법에 특화되어, 고위 환술사는 치유사로서 뛰어난 실력을 발휘한다.

</p>



결과

>

'환술'이라 부르는, 속성의 영향력이 강한 마법을 다루는 마법사. 자기 주위의 만물로부터 흙, 바람, 물의 속성원소를 찾아낼 수 있다. 자연에서 온 물건으로 만든 지팡이 '환술 도구'를 소지하고 다니며, 이를 매개로 하여 자신의 에테르나 주위 원소를 마법으로 변환한다.회복이나 강화 등 육체에 직접 작용하는 마법에 특화되어, 고위 환술사는 치유사로서 뛰어난 실력을 발휘한다.







 <span id="util"><b>'환술 도구'</b></span>



<b></b> 는 글씨를 두껍게 강조해준다 




<span>,<b> 는 인라인태그



******************************************





#wrapmagic{

float:left;

padding:10px;

margin-left:6px;

width: 450px;

}



태그는 내려가는 성질을 가지고 있다.

내려가는 흐름을 옆으로 준다.


흐름을 바꾸고자 하는 위치에서 float 옵션을 준다.


전사가 마법사 쪽으로 올라온다.


결과

>

캐릭터

마법사

환술사

'환술'이라 부르는, 속성의 영향력이 강한 마법을 다루는 마법사. 자기 주위의 만물로부터 흙, 바람, 물의 속성원소를 찾아낼 수 있다. 자연에서 온 물건으로 만든 지팡이 '환술 도구'를 소지하고 다니며, 이를 매개로 하여 자신의 에테르나 주위 원소를 마법으로 변환한다.회복이나 강화 등 육체에 직접 작용하는 마법에 특화되어, 고위 환술사는 치유사로서 뛰어난 실력을 발휘한다.

주술사

'주술'이라 부르는, 파괴적 성향이 강한 마법을 다루는 마법사. 자신의 본성을 성찰하여 내면에 잠재된 힘을 사용할 수 있다. 염주가 달린 '주술 도구'를 소지하고 다니며, 이를 매개로 하여 자신의 에테르를 마법으로 변환한다. 그들이 구사하는 저주와 파괴의 마법은, 칼날보다 거센 날카로움으로 적들에게 치명상을 입힌다.

비술사

비술이라 부르는 마법으로 사역마를 조종하는 마법사. 남해 제도에서 온 산술을 기반으로 한, 독특한 기하학적 '마법 문양'으로 정신력을 제어한다. 수많은 마법 문양이 그려진 마법 도구 '마도서'를 소지하고 다니며, 이 마도서에 에테르를 주입해 마법을 일으킨다. 또한 보석의 신비를 기술한 '마법 문양'을 통해 사역마 '카벙클'을 만들어 부리기도 한다.


전사

검술사

뻗은 양날’검’부터 휘어진 외날’도’까지 폭넓은 종류의 '한손검'을 주무기로 삼는 투사' 관객에게 보여주는 싸움'이 필요했던 검투사들의 기술을 바탕으로 하고 있기에, 방패로 절묘하게 상대의 공격을 막으며 물 흐르듯 검을 휘둘러 적을 쓰러트리는 방어 중심의 검술이 발달했다. 집단 전투에서는 선봉장이 되어 가장 먼저 공격하러 달려감과 동시에 적을 유인해서 아군을 지키는, 말 그대로 '방패' 역할을 맡는다.

격투사

전통적인 호신술을 습득한 투사.철저하게 단련된 주먹은 이미 무기나 마찬가지지만, 그 손에 '격투 무기'를 장착하여 파괴력을 더욱 배가시킨다. 육체의 움직임을 방해하는 갑옷을 싫어해서 가벼운 장비를 선호하는 그들은 언뜻 무방비상태로 보이지만, 빠른 몸놀림으로 연속해서 타격을 입히며 적을 확실하게 사지로 몰아넣는다.

도끼술사

해적이 적 선박 파괴나 상륙작전을 펼칠 때 쓰는 '양손도끼'를 주무기로 쓰는 투사. 예로부터 해적들의 무기라는 인상이 강하지만, 각 도시 간의 전쟁이나 강력한 마물의 토벌전 등에서 큰 활약을 펼쳐 영웅으로 추앙 받았으며 역사에 이름을 남긴 도끼술사도 많다. 극한까지 단련된 육체로 거대한 전투도끼를 힘껏 휘두르는 호쾌한 전투 스타일을 보이며, 적진 한가운데로 태연하게 뛰어드는 그 배짱이야말로 도끼술사의 가장 강한 무기라 할 수 있을 것이다.

1.12.13.1
2.12.22.3


***************************************************************



반응형 웹페이지


float 옵션을 줘서 메뉴를 움직이게 해준다.  pc와 모바일에서 보여주는 화면이 다르다 



float 개념 파악하기





**********************************************************


































블로그 이미지

테시리

,