[HTML]
1. list
<ul></ul> : 순서가 없는 목록
<ol></ol> : 순서가 있는 목록
<ul>과 <ol>태그는 <li></li>를 포함한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 순서가 없는 목록 -->
<ul> <!-- unordered list -->
<li>오이</li>
<li>감자</li>
<li>당근</li>
</ul>
<!-- 순서가 있는 목록 -->
<ol> <!-- ordered list -->
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
</ol>
</body>
</html>
2. input 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 데이터를 입력 받는 태그들 -->
<input type="text" placeholder="아이디를 입력하세요."><br>
<!-- placeholder는 text 박스에 어떤 값을 입력해야 하는지 알려주는 짧은 도움말이다 -->
<input type="password"><br>
<input type="number"><br>
<input type="date"><br>
<input type="color"><br>
<input type="button" value="확인"><br>
<!-- value 값으로 버튼 안의 텍스트를 정할 수 있다 -->
<input type="checkbox"> 운동<br>
<input type="checkbox"> 독서<br>
<input type="radio" name="grade" checked>A
<input type="radio" name="grade">B
<input type="radio" name="grade">C<br>
<!-- 같은 name값을 가진 radio는 하나만 선택 가능하다 -->
<!-- checked 속성으로 기본으로 선택된 radio를 지정할 수 있다 -->
<textarea rows="5" cols="50"></textarea><br>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</body>
</html>
3. div와 span태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- html파일 내부의 css style태그로 스타일을 정의할 수 있다 -->
<style type="text/css">
div {
background-color: blue;
}
span {
background-color: red;
}
</style>
</head>
<body>
<!-- div와 span 태그는 영역을 지정하는 태그-->
<!-- div : div 태그 안에 내용이 적어도 무조건 한 줄 다 차지 -->
<!-- span : span 태그의 내용만큼만 영역 차지 -->
<div>
안녕하세요<span>안녕하세요</span>안녕하세요
</div>
</body>
</html>
4. table
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1">
<!-- table 내에서 thead, tbody, tfoot 영역을 나눌 수 있다 -->
<!-- thead 영역의 글씨는 진하게 나타난다 -->
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>나이</th>
</tr>
</thead>
<tbody></tbody>
<tr>
<td>1</td>
<td>김자바</td>
<td>20</td>
</tr>
<tr>
<td>1</td>
<td>이자바</td>
<td>30</td>
</tr>
<tfoot>
<tr>
<td colspan="2">평균 나이</td>
<td>25</td>
</tr>
</tfoot>
</table>
</body>
</html>
+) 간단한 회원가입 양식 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
<h3>회원 가입 양식</h3>
</div>
<div>
<table>
<tr>
<td>- 아이디</td>
<td>
<input type="text" placeholder="아이디를 입력하세요.">
</td>
</tr>
<tr>
<td>- 비밀번호</td>
<td>
<input type="password">
</td>
</tr>
<tr>
<td>- 비밀번호 확인</td>
<td>
<input type="password">
</td>
</tr>
<tr>
<td>- 이름</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>- 성별</td>
<td>
<input type="radio" name="gender" checked>여성
<input type="radio" name="gender">남성
</td>
</tr>
<tr>
<td>- 전화번호</td>
<td>
<select>
<option>02</option>
<option>051</option>
<option>052</option>
<option>053</option>
<option>054</option>
</select>
<input type="text">
<input type="text">
</td>
</tr>
<tr>
<td>- 이메일</td>
<td>
<input type="text"> @
<select>
<option>선택</option>
<option>naver.com</option>
<option>hanmail.net</option>
<option>daum.net</option>
<option>nate.com</option>
</select>
</td>
</tr>
<tr>
<td>- 자기소개</td>
<td>
<textarea rows="5" cols="50"></textarea>
</td>
</tr>
</table>
</div>
<input type="button" value="회원가입">
</body>
</html>회원 가입 양식
| - 아이디 | |
| - 비밀번호 | |
| - 비밀번호 확인 | |
| - 이름 | |
| - 성별 | 여성 남성 |
| - 전화번호 | |
| - 이메일 | @ |
| - 자기소개 |
[CSS]
1. 선택자
css은 html head 내부의 style 태그 안에 작성하여 적용할 수 있다.
css를 통해 디자인을 변경하려면 디자인을 적용할 태그를 선택해야 하며, 태그를 선택하는 방법을 선택자라고 한다.
1-1. 태그 선택자(태그명) : 해당 문서 안의 모든 동일 태그에 디자인을 적용함
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 태그 선택자 */
h1 {
color: blue; /* 글자색 */
border: 3px dotted fuchsia;
}
h3 {
color: blue;
}
</style>
</head>
<body>
<h1>Hello CSS!</h1>
<h1>Hello CSS!</h1>
<h2>Hello CSS!</h2>
<h3>Hello CSS!</h3>
</body>
</html>
1-2. id 선택자(#) : 특정한 id 속성값을 가진 태그를 선택하여 디자인을 적용함. id는 중복으로 줄 수 없다!
1-3. class 선택자(.) : 같은 class에 속한 태그를 선택하여 디자인을 적용함. class는 중복으로 줄 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* id 선택자 */
#firstDiv{
color : red
}
/* class 선택자 */
.blueDiv {
color : blue;
}
</style>
</head>
<body>
<div id="firstDiv">첫번째 div</div>
<div class="blueDiv">두번째 div</div>
<div class="blueDiv">세번째 div</div>
</body>
</html>
1-4. 자식 선택자(>)
1-5. 자손 선택자( )
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 자식 선택자 */
/* id속성이 div1인 태그의 자식 div를 선택 */
#div1 > div {
background-color: olive;
}
/* class가 div2인 태그의 자손 div 태그를 선택 */
.div2 div {
color: pink;
}
</style>
</head>
<body>
<div>
<div id="div1">
<div>1</div>
<div>2</div>
</div>
<div class="div2">
<div>
3
<div>3-1</div>
<div>3-2</div>
</div>
<div>4</div>
<div>5</div>
</div>
</div>
</body>
</html>
+) 특정 n번째 자식을 지정하는 선택자(first-child, last-child, nth-child())
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
ul > li:first-child{
font-size: 20px;
font-style: italic;
font-weight: bold;
}
ul > li:last-child {
color: lime;
}
ul > li:nth-child(2) {
border: 1px solid red;
}
ul > li:nth-child(even) {/* 짝수번째 */
font-size: 10px;
}
</style>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
</body>
</html>
+) hover : 선택한 태그에 마우스를 올리면 디자인 적용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div:hover{
background-color: lime;
}
</style>
</head>
<body>
<div>div 태그입니다.</div>
</body>
</html>'TIL' 카테고리의 다른 글
| 230210 [JSP, Servlet] (서버와 클라이언트, 기본 개념) (0) | 2023.02.10 |
|---|---|
| 230209 [CSS] (style) (0) | 2023.02.09 |
| 230207 [Java, Html] (Set / Map / 태그 / table) (0) | 2023.02.07 |
| 230206 [Java] (List / ArrayList) (0) | 2023.02.06 |
| 230203 [Java] (예외처리 / 래퍼 클래스 / 컬렉션 프레임워크) (0) | 2023.02.03 |