728x90
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Site</title>
</head>
<body>
<h1>경일아카데미</h1> <!-- 제목, bold -->
<h2>경일아카데미</h2>
<h3>경일아카데미</h3>
<h4>경일아카데미</h4>
<h5>경일아카데미</h5>
<h6>경일아카데미</h6>
<a href="http://naver.com">경일아카데미</a>
<div>이곳은 영역입니다.</div>
<span>이곳은 영역입니다</span>
<ul>
<li>안녕하세요 1</li> <!-- list -->
<li>안녕하세요 2</li>
<li>안녕하세요 3</li>
<li>안녕하세요 4</li>
</ul>
<input type="text" placeholder="아이디를 입력하세요" />
<input type="password" placeholder="패스워드를 입력하세요" /><br />
한 칸 띄기<br />
<p>
문단 나누기
</p>
<button>버튼</button>
<input type="button" value="버튼" />
<br />
<input type="radio" name="gender" value="male">남자
<input type="radio" name="gender" value="female">여자
</body>
</html>한글 깨짐현상 발생 시 인코딩 확인
>> <head>태그 내에 <meta charset="UTF-8" />추가
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Site2</title>
</head>
<body>
<ul>
<li>아이디: <input type="text" placeholder="아이디를 입력하세요" /></li>
<li>비밀번호: <input type="password" placeholder="패스워드를 입력하세요" /></li>
<li>비밀번호 확인: <input type="password" placeholder="패스워드를 다시 입력하세요" /></li>
<li>생년월일: <input type="text" placeholder="생년월일을 입력하세요" /></li>
<li>성별: <input type="radio" name="gender" value="male">남자 <input type="radio" name="gender" value="female" /></li>
<li>전화번호: <input type="text" size=6>-<input type="text" size=6>-<input type="text" size=6></li>
<li>취미: <input type="checkbox" name="hobby" value="book">독서 <input type="checkbox" name="hobby" value="walk">산책 <input type="checkbox" name="hobby" value="tv">TV </li>
<li><input type="button" value="회원가입하기"></li>
</ul>
</body>
input radio, checkbox 의 속성으로 name을 그룹별로 같게 써줘야한다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Site2</title>
<style>
*{ margin:0; padding:0;} /* 전체 마진 패딩 없애기 */
ul,li{ list-style: none;} /* list구분자 없애기 */
ul{
width:100%;
}
ul{
background: red;
text-align:center;
}
div{
width:300px;
}
#btn {
margin-top: 10px;
background:#333;
border: 1px solid #666;
color: #000;
width:300px;
height:30px;
}
</style>
<script type="text/javascript">
function frm_chk(){
alert("회원가입완료")
}
</script>
</head>
<body>
<div>
<ul>
<li><span>아이디</span><input type="text" placeholder="아이디를 입력하세요" /></li>
<li><span>비밀번호</span><input type="password" placeholder="패스워드를 입력하세요" /></li>
<li><span>비밀번호 확인</span> <input type="password" placeholder="패스워드를 다시 입력하세요" /></li>
<li>생년월일<input type="text" placeholder="생년월일을 입력하세요" /></li>
<li>성별<input type="radio" name="gender" value="male">남자 <input type="radio" name="gender" value="female" /></li>
<li>전화번호<input type="text" size=6>-<input type="text" size=6>-<input type="text" size=6></li>
<li>취미<input type="checkbox" name="hobby" value="book">독서 <input type="checkbox" name="hobby" value="walk">산책 <input type="checkbox" name="hobby" value="tv">TV </li>
<input id="btn" type="button" value="회원가입하기" onclick="frm_chk()">
</ul>
</div>
</body>
html에 CSS를 적용하는 방법 :
1. css파일 연결
2. head태그 내에 style태그 작성 후 선택자로 적용
3. 각 태그 내에 style속성 작성
반응형
'웹UI > HTML_CSS' 카테고리의 다른 글
| 2021.03.09) HTML/CSS - block style css의 float 속성 (0) | 2021.03.09 |
|---|---|
| 2021.03.08) HTML/CSS - div, span/선택자, margin, padding (0) | 2021.03.08 |
| HTML - div와 span (0) | 2021.03.04 |
| css 폰트 (font-family), 줄간격(line-height) (0) | 2021.01.12 |
| HTML 블록(block)& 인라인(inline) (0) | 2021.01.10 |
댓글