글자색, 크기, 테두리색 변경)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- css 내용은 style 태그안에 작성 -->
<style type="text/css">
/* 디자인을 변경하려면 우선 적으로 디자인을 변경할 태그를 선택해야 한다. */
/* 디자인을 변경할 때는 먼저 디작인을 적용할 태그를 선택할 수 있어야 함. */
/* 이러한 태그를 선택하는 방법을 '선택자'라고 합니다. */
/* h1태그를 선택함. */
/* 태그선택자 : 해당 문서 안의 모든 동일 태그에 디자인 적용 */
h1{
color: teal; /* 글자 색 */
border: 3px solid fuchsia;
}
h3{
color: blue;
}
</style>
</head>
<body>
<h1>Hello~ CSS~</h1>
<h1>Hello~ CSS~</h1>
<h3>Hello~ HTML~</h3>
</body>
</html>
class를 이용한 스타일 변경)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* ID 선택자 */
/* ID 속성값이 firstDiv인 태그 선택. */
#firstDiv{
color :red;
}
/* class 선택자 */
/* class 속성이 blueDiv인 태그 선택. */
.blueDiv{
color: blue;
}
</style>
</head>
<body>
<div id="firstDiv">첫번째 div</div>
<div class="blueDiv">두번째 div</div>
<div class="blueDiv">세번째 div</div>
</body>
</html>
자식 선택자를 이용한 스타일변경)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 자식 선택자 */
/* id속성이 div1인 태그으이 자식 div를 선택 */
#div1 > div{
background-color: lime;
}
/* 자손 선택자 */
/* class가 div2인 태그의 자손 div 태그를 선택. */
.div2 div{
background-color: orange;
}
</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>
목록을 만드는 태그 ul ol)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 특정 n번째 자식을 지정하는 선택자 */
/* ul 태그의 자식 중 첫번째 li태그 선택. */
ul > li:first-child{
font-size: 22px;
font-style: italic;
font-weight: bold;
}
/* ul 태그의 자식 중 마지막 li태그 선택. */
ul > li:last-child {
color: silver;
}
ul > li:nth-child(3) {
border: 1px solid red;
}
#secondUL > 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>
<ul id="secondUL">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
</body>
</html>
마우스 포인터 할당시 색 변경)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* hover 선택한 태그에 마우스를 올리면 디자인 적용 */
div:hover{
background-color: lime;
}
</style>
</head>
<body>
<div>div 태그입니다.</div>
</body>
</html>
div 태그입니다.
결과물
=================================================================================
간단한 로그인 화면과 회원가입화면 게시판화면 만들기 )
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
background-color: #f2f2f2;
border-radius: 10px;
width: 500px;
margin: 0 auto;
margin-top: 100px;
padding-top: 20px;
padding-bottom: 20px;
}
table{
/* border: 1px solid;
border-collapse: collapse; */
width: 300px;
margin: 0 auto;
text-align: center;
}
/* link - 아직 클릭하지 않은 경우 red 색상 설정 */
a:link { color: #000000; text-decoration: none;}
/* visited - 한번 클릭하거나 전에 클릭한적 있을 경우 #c71d44 설정 */
a:visited { color: #000000; text-decoration: none;}
</style>
</head>
<body>
<div>
<br>
<table>
<colgroup>
<col width="30%">
<col width="70%">
</colgroup>
<tr>
<td style="text-align: right;">I D </td>
<td><input type="text" placeholder="Input your Id"></td>
</tr>
<tr>
<td style="text-align: right;">P W</td>
<td><input type="password" placeholder="Input your PASSWORD"></td>
</tr>
<tr>
<td colspan="2">
<a href="board.html">LOGIN</a>
<a href="join.html">JOIN</a>
</td>
</tr>
</table>
<br>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.container{
width: 600px;
/* 가운데 정렬 */
margin: 0 auto;
margin-top: 70px;
}
#secondTR > td:nth-child(2) {
text-align:left;
color: blue;
}
table{
/* 테두리 생성 */
/* border-top : 1px solid #cecdcf; */
/* 이중선제거 */
border-collapse: collapse;
width: 600px;
}
thead > tr{
font-weight: bold;
text-align: center;
height: 40px;
background-color: #a76027;
color: white;
}
thead > tr > td{
border-top: 1px solid #cecdcf;
}
tbody > tr{
text-align: center;
height: 30px;
}
tbody > tr:nth-child(even){
background-color: #cee3f6;
}
tbody > tr:hover{
background-color: #dddddd;
}
td{
border-bottom: 1px solid #cecdcf;
}
</style>
</head>
<body>
<div class="container">
<div>
<h1>샘플 게시판</h1>
</div>
<div>
<table>
<colgroup>
<col width="10%">
<col width="*">
<col width="10%">
<col width="15%">
<col width="10%">
<col width="10%">
</colgroup>
<thead>
<tr bgcolor="#f7f7f7">
<td>번호</td>
<td>제목</td>
<td>작성자</td>
<td>날짜</td>
<td>조회수</td>
<td>댓글수</td>
</tr>
</thead>
<tbody>
<tr id="secondTR">
<td>165</td>
<td>새 스티커 상품이 출시되었네요~</td>
<td>admin</td>
<td>2013.06.21</td>
<td>2</td>
<td>0</td>
</tr>
<tr id="secondTR">
<td>163</td>
<td>입문자를 위한 안내</td>
<td>admin</td>
<td>2013.06.21</td>
<td>3</td>
<td>0</td>
</tr>
<tr id="secondTR">
<td>134</td>
<td>웹사이트 만들 때 유용한 도구들</td>
<td>admin</td>
<td>2013.06.21</td>
<td>3</td>
<td>0</td>
</tr>
<tr id="secondTR">
<td>131</td>
<td>안녕하세요! 좋은 아침입니다.</td>
<td>admin</td>
<td>2013.06.21</td>
<td>1</td>
<td>0</td>
</tr>
<tr id="secondTR">
<td>129</td>
<td>워드프레스 게시판 사용법 1</td>
<td>admin</td>
<td>2013.06.21</td>
<td>1</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<table style="margin: auto">
<tr>
<td>
<input type="button" value="뒤로가기" onclick="location.href='login.html';">
<input type="button" value="뒤로가기" onclick="alert(5)";>
</td>
</tr>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.container{
margin: 0 auto; /* 상하여백 좌우여백 */
}
table{
margin: 0 auto;
border: 2px solid;
border-collapse: collapse;
}
tr > td:nth-child(1) {
text-align: center;
}
tr, td{
border: 2px solid;
}
.redFont{
color: red;
font-size: 12px;
font-style: italic;
}
textarea{
resize: none;
}
</style>
</head>
<body>
<div class="container">
<table>
<colgroup>
<col width="25%">
<col width="*">
</colgroup>
<tr>
<td colspan="2" style="background-color: #cee3f6; font-weight: bold;">
<span class="redFont">(*필수입력)</span>
회원기본정보
</td>
</tr>
<tr>
<td>
<span class="redFont">*</span>아이디:
</td>
<td>
<input type="text" placeholder="4~12자의 영문 대소문자, 수자만 입력"; style="width: 220px">
<input type="button" value="아이디 검사">
</td>
</tr>
<tr>
<td>
<span class="redFont">*</span>비밀번호:
</td>
<td>
<input type="password">
4~12자의 영문 대소문자와 숫자로만 입력
</td>
</tr>
<tr>
<td>
<span class="redFont">*</span>비밀번호확인:
</td>
<td>
<input type="password">
<input type="button" value="비밀번호 확인">
</td>
</tr>
<tr>
<td>
<span class="redFont">*</span>메일주소:
</td>
<td>
<input type="text" style="width: 200px">
<input type="button" value="메일 확인">
예)id@domain.com
</td>
</tr>
<tr>
<td>
<span class="redFont">*</span>이름:
</td>
<td>
<input type="text" style="width: 200px">
</td>
</tr>
<tr>
<td colspan="2" style="background-color: #cee3f6; font-weight: bold;">
개인 신상 정보
</td>
</tr>
<tr>
<td>
<span class="redFont">*</span>주민등록번호:
</td>
<td>
<input type="text" style="width: 80px">
-
<input type="text" style="width: 80px">
<input type="button" value="확인">
예)123456-1234567
</td>
</tr>
<tr>
<td>
생일:
</td>
<td>
<div>
<input type="text" style="width: 80px">년
<input type="text" style="width: 50px">월
<input type="text" style="width: 50px">일
</div>
</td>
</tr>
<tr>
<td>
주소:
</td>
<td>
<div>
<input type="text" id="postcode" size="5" readonly>
<input type="button" value="우편번호 찾기" onclick="checkPost()">
</div>
<div>
<input type="text" id="address" size="23" placeholder="주소" readonly>
<input type="text" id="detailAddress" size="23" placeholder="상세주소">
</div>
</td>
</tr>
<tr>
<td>
관심분야:
</td>
<td>
<div>
<input type="checkbox">컴퓨터
<input type="checkbox">인터넷
<input type="checkbox">여행
<input type="checkbox">영화감삼
<input type="checkbox">음악감상
</div>
</td>
</tr>
<tr>
<td>
자기소개:
</td>
<td>
<textarea rows="5" cols="55"></textarea>
</td>
</tr>
</table>
</div>
<div style="margin-top:10px; text-align: center; height: 50px;">
<input type="button" value="뒤로가기" onclick="location.href='login.html'">
</div>
</body>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function checkPost() {
console.log("우편번호")
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ''; // 주소 변수
var extraAddr = ''; // 참고항목 변수
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
addr = data.jibunAddress;
}
// 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
if(data.userSelectedType === 'R'){
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
extraAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if(data.buildingName !== '' && data.apartment === 'Y'){
extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('postcode').value = data.zonecode;
document.getElementById("address").value = addr;
// 커서를 상세주소 필드로 이동한다.
document.getElementById("detailAddress").focus();
}
}).open();
}
function passwordcheck() {
let password = $("#password").val()
let id = $("#id").text()
let jsonData = { // Body에 첨부할 json 데이터
"id":id,
"password":password,
"result":1
};
$.ajax({
type: "POST",
url: '/post/detail/password',
contentType: "application/json",
data: JSON.stringify(jsonData),
success: function (response) {
if(response["result"] == 1){
$("#changediv").show();
}else{
alert("비밀번호가 틀립니다.")
}
}
})
}
</script>
</html>
'코딩 > HTML' 카테고리의 다른 글
| 23.02.15 Servlet (0) | 2023.02.15 |
|---|---|
| 23.02.13 Jsp, Form (0) | 2023.02.13 |
| 23.02.08 HTML 기본적인 태그들 (0) | 2023.02.08 |
댓글