반응형
link, hover, visited
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선긋기</title>
<style>
#menu{
border-style: dotted;
width: 500px;
height: 50px;
}
#menu > div{
border-style: solid;
border-width: 1px;
border-color: red;
width: 120px;
height: 40px;
text-align: center;
line-height: 40px;
float: left;
border-left-width: 0px;
}
#alphabet > span{
border-style: solid;
border-width: 1px;
width: 120px;
height: 30px;
display: block;
text-align: center;
line-height: 30px;
float: left;
border-right-width: 0px;
}
#num > label{
border-style: solid;
border-width: 1px;
width: 120px;
height: 40px;
display: block;
text-align: center;
line-height: 40px;
border-bottom-width: 0px;
}
#site a{
border: solid 1px brown;
width: 120px;
height: 40px;
display: block;
line-height: 40px;
text-align: center;
text-decoration: none;
border-bottom-width: 0px;
}
/*a 태그는 4가지 속성을 따로 줄 수 있다. 아직 방문x(link), hover, 한번이상방문*/
#site > a:hover{
color: red;
}
#site > a:link{
color: yellow;
}
#site > a:visited{
color: blue;
}
</style>
</head>
<body>
<div id="menu">
<div style="border-left-width: 1px;">뉴스</div>
<div>카페</div>
<div>블로그</div>
<div>메일</div>
</div><br/><br/>
<div id="alphabet">
<span>A</span>
<span style="border-right-width: 1px;">B</span>
</div><br/><br/>
<div id="num">
<label>1</label>
<label>2</label>
<label style="border-bottom-width: 1px;">3</label>
</div><br/><br/>
<div id="site">
<a href="http://www.naver.com">네이버</a>
<a href="http://www.google.co.kr">구글</a>
<a href="http://www.daum.net" style="border-bottom-width: 1px;">다음</a>
</div>
</body>
</html>a태그 - link, hover, visited
margin, padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선긋기</title>
<style>
body{
margin-top: 0px;
margin-left: 0px;
}
#hangul{
border: solid 1px red;
width: 500px;
height: 60px;
margin-top: 10px;
margin-left: 50px;
}
#hangul > label{
border: solid 2px blue;
width: 300px;
height: 30px;
display: block;
margin-top: 20px;
margin-left: 25px;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div id="hangul">
<label>가</label>
</div>
</body>
</html>
방명록 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>방명록</title>
<style>
h2{
border: solid 0px red;
width: 410px;
height: 50px;
text-align: center;
line-height: 50px;
margin: 50px auto;
letter-spacing: 5px;
text-shadow: 5px -5px 3px rgb(0, 204, 255);
}
#form_style{
border: solid 0px blue;
width: 410px;
height: 160px;
margin: 0px auto;
}
#form_style > .title{
border: solid 0px green;
width: 410;
height: 30px;
margin: 2px 0px;
text-align: center;
}
#form_style > .content{
border: solid 0px pink;
width: 410px;
height: 86;
margin: 2px 0px;
}
</style>
</head>
<body>
<h2>방명록</h2>
<form action="#" method="get" id="form_style">
<div class="title">
<label for="irum">이름</label>
<input id="irum" type="text" name="irum" size="12"/>
<label for="pwd">비밀번호</label>
<input id="pwd" type="password" name="pwd" size="12"/>
</div>
<div class="content">
<textarea rows="5" cols="48" name="message"></textarea>
</div>
<div class="title" style="text-align: right;">
<input type="submit" value="확인"/>
<input type="reset" value="취소"/>
</div>
</form>
</body>
</html>border로 레이아웃을 설정해보고 0px로 변경하여 완성함.
반응형
'HTML | CSS' 카테고리의 다른 글
| 가상클래스(필터)선택자 ::after, ::before | 가변길이 em, rem, % (0) | 2023.06.05 |
|---|---|
| [day4-1] 가상클래스(필터) 선택자 nth-child(), first-letter, first-line, selection | focus, disabled, enabled (0) | 2023.06.02 |
| 태그, css, id, class 선택자 | 부모자식(상속) | 속성 선택자 (0) | 2023.06.01 |
| 입력태그<input> | <form> 회원가입폼 만들기 | 시맨틱을 이용해 layout 만들기 (0) | 2023.05.31 |
| 표 만들기 | iFrame (0) | 2023.05.31 |
