*****
웹컨텐트 폴더 : 루트폴더
웹컨텐트 폴더 구분, 정리 하기 > 한 곳에 때려박으면 나중에 관리하기 힘들어진다. > 상대경로주의할것
*****
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>
****************************************
<!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.1 | 1.2 | 1.3 |
| 2.1 | 2.2 | 2.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.1 | 1.2 | 1.3 |
| 2.1 | 2.2 | 2.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.1 | 1.2 | 1.3 |
| 2.1 | 2.2 | 2.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.1 | 1.2 | 1.3 |
| 2.1 | 2.2 | 2.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.1 | 1.2 | 1.3 |
| 2.1 | 2.2 | 2.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.1 | 1.2 | 1.3 |
| 2.1 | 2.2 | 2.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-1 | 1-2 | 1-3 |
| 2-1 | 2-2 | 2-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.1 | 2.1 | 3.1 |
| 2.1 | 2.2 | 2.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.1 | 2.1 | 3.1 |
| 2.1 | 2.2 | 2.3 |
***************************************************************
반응형 웹페이지
float 옵션을 줘서 메뉴를 움직이게 해준다. pc와 모바일에서 보여주는 화면이 다르다
float 개념 파악하기
**********************************************************
'프로그래밍, 통계학 > CSS' 카테고리의 다른 글
| [31일차]2015.08.20.목, 페이지만들기 (0) | 2015.08.20 |
|---|---|
| [30일차]2015.08.19.수, 자손선택자, 후손선택자 (0) | 2015.08.19 |
| [29일차]2015.08.18.화, HTML/CSS 연습연습 ,페이지 만들기 (0) | 2015.08.18 |
| [28일차]2015.08.17.월, HTML, CSS 연습 (0) | 2015.08.17 |
테시리