폴더 생성하기
./Day02
입력양식 태그
데이터 전송방식 (Get, Post)
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>입력양식 태그</title>
</head>
<body>
<!-- 반드시 form 태그 내 입력양식을 넣어야 함!! -->
<form>
<!-- 'type'에 따라서 input의 용도가 달라짐. -->
<input type="text" name="serch">
<input type="time">
</form>
<!-- action은 보낼 전송위치명, method는 전송방식.
대표적"Get", "Post"로 전송. -->
<!-- Get은 주소에 데이터를 입력해서 전달 -->
<!-- Post는 주소 변경 없이 비밀스럽게 데이터 전달 -->
<form action="./fe11.inputs.html" method="get">
<h3>조회정보</h3>
<input type="text" name="name">
<input type="number" name="age">
<input type="submit">
</form>
<form action="./fe11.inputs.html" method="post">
<h3>로그인</h3>
<input type="text" name="userid">
<input type="password" name="password">
<input type="submit">
</form>
</body>
</html>
초기화면
get의 경우에는 정보가 주소창에 노출되고,
post의 경우에는 입력된 정보를 주소창에 노출시키지않는다.
(주로 데이터의 보안이 필요한 부분에서 post를사용한다.)
예제1. [기본 입력 양식 태그 및 간단한 입력양식 생성]
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>폼 양식</title>
</head>
<body>
<form action="" method="get">
<!-- 사용자 입력양식 -->
<input type="test" name="text"><br>
<input type="password" name="password"><br>
<input type="file" name="profile"><br>
<!-- name은 비슷한 객체끼리 묶어주는 역할 + 추후 값을 불러오는 객체명으로도 활용. -->
<input type="checkbox" name="고양이" value="고양이1">고양이1
<input type="checkbox" name="고양이" value="고양이2">고양이2
<input type="checkbox" name="고양이" value="고양이3">고양이3<br>
<!-- 라디오버튼은 name을 통일하게 해주어야 한개값만 선택이 가능!! -->
<input type="radio" name="gender" value="남자">남자
<input type="radio" name="gender" value="여자">여자<br>
<!-- Hidden양식 웹페이지에는 표시되지 않지만, 페이지에서 소스조회를 하면 보임.-->
<input type="hidden" name="code" value="TH1234">
<!-- 버튼 -->
<input type="button" value="입력하기">
<input type="reset" value="초기화">
<input type="submit" value="승인"> <br>
<!-- input 이미지 클릭 이미지의 x, y값을 전달. -->
<input type="image" src="http://placehold.it/100x100"> <br>
<img src="http://placehold.it/100x100">
<!-- 위의 두 코드는 같은값이다. -->
</form>
</body>
</html>
입력된 정보들은 모두 주소창에 표시되고post, 초기화reset버튼을 누르면 input값들이 모드 default로 되돌아가게된다.
예제2. [선택 가능한 입력 양식]
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>콤보박스</title>
</head>
<body>
<form>
<!-- 선택창 생성하기 select -->
<select name="snack" multiple="multiple">
<option value="">--선택--</option>
<option value="k">김밥</option>
<option value="d">떡볶이</option>
<option value="s">순대</option>
<option value="f">어묵</option>
</select>
<!-- optgroup은 선택창에 그룹을 분류해줌. -->
<select name="media">
<optgroup label="html5">
<option value="mt">Multimedia Tag</option>
<option value="co">Connectivity</option>
<option value="da">Device Access</option>
</optgroup>
<optgroup label="CSS3">
<option>Animation</option>
<option>3D Transform</option>
</optgroup>
</select><br>
<!-- email 주소가 올바른지 검사를 해줌! -->
<input type="email" name="email"><br>
<input type="submit" value="제출">
</form>
</body>
</html>
--선택--값은 null로 지정해두었기에 주소창에 snack값을 받아오지 않는것을 알 수 있다.
<Select>를 이용해서 선택이 가능한 목록을 생성한 뒤, 경우에 따라 한꺼번에 선택이 가능하도록 Multiple 항목을 추가하였다.
이메일 input은 올바른 이메일 형식인지 알려준다.
예제3. [연관 있는 입력 양식 그룹으로 묶기]
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>공간분할</title>
</head>
<body>
<!-- div는 해당 줄에 있는 모든 공간을 선택함. -->
<div>첫번째</div>
<div>두번째</div>
<div>세번째</div>
<div>네번째</div>
<div>다섯번째</div>
<!-- span으로 지정 시, 해당 값의 공간만 선택함 -->
<span>1st</span>
<span>2nd</span>
<span>3rd</span>
<span>4th</span>
<span>5th</span>
</body>
</html>
시멘틱 웹
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>시맨틱웹</title>
</head>
<body>
<!-- header는 head와 다름! -->
<!-- header는 웹페이지의 최상단. -->
<header>
<h1>시멘틱 웹</h1>
</header>
<!-- nav는 부제. -->
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
</ul>
</nav>
<!-- section은 웹페이지 nav밑 중간부분 -->
<section>
<!-- article은 sction안의 내용들. -->
<article>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quod dolore quo, modi natus quasi tempora necessitatibus veritatis, laudantium, magni distinctio molestiae? Unde, quisquam. Molestiae ex deleniti vel aliquid obcaecati.</p>
</article>
<article>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quod dolore quo, modi natus quasi tempora necessitatibus veritatis, laudantium, magni distinctio molestiae? Unde, quisquam. Molestiae ex deleniti vel aliquid obcaecati.</p>
</article>
<!-- 이외에도 section 좌우에 사용하는 aside도 존재함. -->
</section>
<!-- footer는 article 밑에 위치하며, 웹페이지의 최하단 컬럼임. -->
<footer>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quod dolore quo, modi natus quasi tempora necessitatibus veritatis, laudantium, magni distinctio molestiae? Unde, quisquam. Molestiae ex deleniti vel aliquid obcaecati.</p>
</footer>
</body>
</html>
등등..
CSS3 기초
<style>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>CSS</title>
<!-- <style> 추가 -->
<style>
h1{
color: red;
background-color: snow;
}
/* 이 페이지 안에 있는 모든 <h1>은 아래의 스타일로 변경한다! (라는 뜻) */
</style>
</head>
<body>
<h1>hello, css5!</h1>
<h1>Hi there!</h1>
</body>
</html>
Margin, Padding
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<style>
/* '*'표는 all, 즉 전부를 뜻함. */
/* * {
color: chocolate;
} */
h1{
color: red; font-size: 50px; font-style: italic;
}
p{ /* margin은 외부에다 위,아래,좌우 전부에 여백을 주는 것. */
color: blue;
margin-left:20px;
margin-top: 30px;
margin-right: 10px;
margin-bottom: 5px;
/* padding은 내부에 여백을 주는 것. */
padding-bottom: 20px;
}
</style>
</head>
<body>
<a href="#a0">첫번째로</a>
<a href="#a1">두번째로</a>
<a href="#a2">세번째로</a>
<!-- Post는 주소 변경 없이 비밀스럽게 데이터 전달 -->
<form action="./fe11.inputs.html" method="post">
<h3>로그인</h3>
<input type="text" name="userid">
<input type="password" name="password">
<input type="submit">
</form>
<h1 id="a0">첫번째</h1>
<h2>부제목</h2>-
<p><b>Lorem ipsum</b> <del>dolor sit amet,</del> <i>consectetur</i> <small><small>dipisicing elit</small>a</small>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
log<sub>n</sub>2<sup>n</sup>
<h1 id="a1">두번째</h1>
<h3>소제목</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1 id="a2">세번째</h1>
<h4>소소제목</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
사진에서 주황색 부분이 Margin, 초록색 부분이 Padding이다.
ID 선택자 및 class 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>ID 선택자</title>
<style>
/* id 선택자 CSS 코드 예제 */
#header{
/* "auto"는 중간으로 정렬하는 역할을 수행한다. */
/* 1024의 경우, 모니터의 기본 해상도에 맞춰졌기 때문이다. */
width: 1024px; margin: 0 auto;
color: aliceblue;
background-color: hotpink;
padding: 0;
}
#wrap{
width: 1024px; margin: 0px auto;
overflow: hidden;
}
#aside{
width: 400px; margin: 0; float: right;
color: azure;
background-color: salmon;
padding: 0px;
}
#content{
width: 624px; margin: 0; float: left;
color: darksalmon;
background-color: wheat;
}
#wow{
color: aqua;
background-color: darkcyan;
}
/* class 선택자 CSS 코드 예제 */
.summer{
color: palevioletred;
}
</style>
<!-- id 선택자 HTML 예제 -->
</head>
<body>
<div id="header">
<h1>[#header] 태그</h1>
</div>
<div id="wrap">
<div id = "aside">
<h2>[#aside] 영역</h2>
</div>
<div id="content">
<h2>[#content] 영역</h2>
</div>
</div>
<!-- class 선택자 HTML 예제 -->
<div>
<ul>
<li>딸기</li>
<li class="summer">애플망고</li>
<li>바나나</li>
<li class="summer">수박</li>
</ul>
</div>
</body>
</html>id 선택자의 경우에는 <div>의 id값을 #으로 불러와서 개별로 스타일을 설정해 줄 수 있다.
또한,class 선택자의 경우 <li> 항목들의 class 선택자를 .으로 지정하여 class의 스타일을 지정해줄 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>속성 선택자</title>
<style>
input[type="text"]{
border-width: 2px;
border-color: tomato;
}
input[type="password"]{
border-width: 2px;
border-color: red;
background-color: salmon;
}
input[type="submit"]{
border-style: inherit;
background-color: wheat;
}
</style>
</head>
<body>
<form method="get">
<table>
<tr>
<td>아이디</td>
<td><input type="text" name="id"></td>
</tr>
<tr>
<td>패스워드</td>
<td><input type="password" name="pass"></td>
</tr>
</table>
<input type="submit" value="로그인">
</form>
</body>
</html>
위를 활용하여 text박스나 버튼또한 스타일을 바꿔줄 수 있다.
후손 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>자손/후손 선택자</title>
<style>
/* #header h1, #header h2{ color: red; } 후손 선택자*/
#header> h1{ color:tomato; } /* 자손 선택자*/
#section > p {color:deeppink ;}
#header > #nav > h1{color: chocolate;}
</style>
</head>
<body>
<div id="header">
<h1 class="title">Lorem ipsum</h1>
<div id="nav">
<h1>Navigation</h1>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium numquam quae blanditiis eligendi, aut repudiandae dolore dolorum id debitis illo, officiis impedit accusamus expedita quia modi, officia recusandae temporibus doloremque!</p>
<h1>subtitle</h1>
</div>
</div>
</div>
<div id="section">
<h1 class="title">Lorem ipsum</h1>
<p class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo rem, inventore et tenetur, ipsa assumenda dolore quidem, illum ducimus sapiente reiciendis. Expedita laudantium distinctio mollitia sapiente molestias laboriosam assumenda explicabo!</p>
</div>
</body>
</html>
후손 선택자의 경우
#header > h1 와 같은 코드를 활용하여 <div>에 속해있는 자손, 후손 선택자를 개별로 지정하여 스타일을 지정해 줄 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>시간표 테이블</title>
<style>
/* table 밑에 있는 th의 스타일 아래와 같이 변경 =>이라는 뜻 */
/* 이것또한 후손 선택자임 */
table th{
color: tomato;
background-color: antiquewhite;
}
</style>
</head>
<body>
<h1>3학년 1반 시간표</h1>
<hr>
<table border="1">
<thead>
<tr>
<th>요일</th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
</tr>
</thead>
<tbody>
<tr>
<th>1교시</th>
<td>영어</td>
<td>국어</td>
<td>과학</td>
<td>미술</td>
<td>국사</td>
</tr>
<tr>
<th>2교시</th>
<td>도덕</td>
<td>체육</td>
<td>영어</td>
<td>수학</td>
<td>사회</td>
</tr>
<tr>
<th>3교시</th>
<td>물리</td>
<td>화학</td>
<td>세계사</td>
<td>일본어</td>
<td>음악</td>
</tr>
</tbody>
</table>
</body>
</html>
위처럼 <table> 형식에도 적용이가능하며, 원하는 컬럼 부분만 색상을 바꿔줄 수도 있다.
상태 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>반응/상태/구조 선택자</title>
<style>
/* 마우스를 가져다 올릴때 바뀌는 색상 */
input[type="button"]:hover{
background-color: darkgray;
}
/* 클릭했을 때 바뀌는 색상 */
input[type="button"]:active{
background-color: cadetblue;
}
/* 마우스를 가져다 올릴때 바뀌는 색상 */
input[type="text"]:hover{
background-color: aquamarine;
}
/* 입력을 하고 있는 동안의 색깔 */
input[type="text"]:focus{
background-color: cadetblue;
}
</style>
</head>
<body>
<input type="text" name="id"><br>
<input type="button" value="클릭">
</body>
</html>
마우스의 클릭 상태에 따라서 선택자의 스타일을 달리 설정해줄 수도 있다.
구조 선택자 + RGB 색상 입력
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>구조 선택자(메뉴)</title>
<style>
ul{
overflow: hidden;
}
li{
list-style: none; /* 점 삭제 */
float: left; /* 왼쪽기준으로 정렬 */
padding: 10px; /* 10px만큼 간격유지 */
}
li:first-child{
border-radius: 10px 0 0 10px; /* 왼쪽위 오른쪽위 오른쪽아래 왼쪽아래 */
} /* 왼쪽편만 둥글게 됨. */
li:last-child{
border-radius: 0 10px 10px 0;
} /* 오른쪽편만 둥글게 됨. */
li:nth-child(2n+1){ /* 홀수부터 아래의 스타일 적용*/
background-color: sandybrown;
color: white;
}
li:nth-child(2n+2){ /* 짝수부터 아래의 스타일 적용*/
background-color: antiquewhite;
color: slategray;
}
#first{
background-color:rgb(130, 232, 150);
float: left;
width: 100px; height: 100px;
}
#second{
background-color:#82E896;
float: left;
width: 100px; height: 100px;
}
#third{
background-color:rgb(130, 232, 150, 0.5); /* 맨 마지막 숫자는 투명도를 이야기함! */
float: left;
width: 100px; height: 100px;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Product</li>
<li>Service</li>
<li>Portfolio</li>
<li>Board</li>
<li>Contact</li>
</ul>
<div id="first">1. RGB 코드 입력</div>
<div id="second">2. HEX 코드 입력</div>
<div id="third">3. RGBA (투명도) 입력</div>
<input type="color">
</body>
</html>
<body>에서 설정해준 ul,li를 메뉴처럼 활용하여 모서리 부분의 형태를 바꿀수도 있으며, 색상 입력 부분에서 RGB와 RGBA를 이용하여 색상을 설정할 수도 있다.
CSS 고급 (박스영역)
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>CSS 박스영역</title>
<style>
body { margin: 0; padding: 0;} /* body에다 margin과 padding을 0으로 부여해도 div에서 설정이 가능하다. */
div{
width: 100px; height: 100px;
background-color: rgba(255, 0, 0, 0.5);
border: 5px solid ; /* 사이즈는 thick, thin도 가능하나 잘 안쓰는 문법임!! (보통 ''px로 사용함.)*/
border-color: crimson;
margin: 10px 0 0 30px;
/* margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 30px; 같은 내용임! */
padding: 10px 50px 20px 30px;
}
p{
margin: 10px;
}
.box{
width: 450px;
border-width: 5px;
border-color: black;
border-style: dashed;
border-radius: 50px 10px 30px 80px; /* 모서리의 휨 정도 */
background-color: wheat;
display: none; /* 버튼과 상효작용하는 용으로 많이 사용됨. */
}
</style>
</head>
<body>
<div>
<p>뽀로로</p>
</div>
<div class="box">
<h1>Loren ipsum dolor sit amet.</h1>
</div>
</body>
</html>
시작은 미약하지만, 그 끝은 창대하리라