<22.12.28 1교시 ~4교시>
<input placeholder="내용"> : input상자에 내용 입력하기 전에 보이는 글자
테두리 둥글게 : border-radius
<div> 와 <span> 차이점 파악하기!! --> 221227 필기 마지막부분 참고!!
밑줄 넣을 때
1. <hr> 태그 : 기본 width 100%임
2.
<tr>
<td style="border-top:1px solid red; height:1px;"> </td>
</tr>
글자 | 글자 --> 사이 밑줄 만들려면
: <div style="width:20px; height:20px; border-right:1px solid red"> </div> (표 테두리 오른쪽만 설정하는 느낌으로)
background-image: url(img/good.png) --> 가로(width),세로(height) 길이 사진 크기랑 똑같이 하기!!
on~~~~ 시작하는 속성은 자바스크립트임
1. onclick --> 클릭할수있게 해줌
2. cursor:pointer --> 커서 뜨게 해줌
vertical-align : 수직 정렬
이미지 정렬
img {
display: block; // width 가 100%되게함
margin-left: auto;
margin-right: auto;
width: @%;
}
<22.12.28 5교시>
border-collapse : 테이블 선을 단선으로!!
<태그 cellpadding=0 cellspacing=0> = <style> table { border-spacing:0px; } </style>
<22.12.28 6교시>
압축 : 반디집
<22.12.28 7교시~8교시>
table { border-spacing : 0px } : 이미지 여백 없애기
띄어쓰기
1228_01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>네이버 비밀번호찾기</title>
<style>
table {
}
.input_01 {
border: 0px solid red;
height:35px;
width:300px;
padding-left: 10px;
}
</style>
</head>
<body>
<center>
<table border=0px width=400>
<tr>
<td style="font-size: 40px; color: #03C75A; font-weight: bolder; padding-top:80px ; padding-bottom:15px; text-align: center">NAVER</td>
</tr>
<tr>
<td style="font=size:30px; font-weight: bold; padding-bottom: 35px; text-align: center">비밀번호를 찾고자하는 아이디를 입력해주세요. </td>
</tr>
<tr>
<td>
<table width=100% border=0 style="border: 1px solid #BBBBBD; border-radius: 5px; background-color: white; ">
<tr>
<td> <div style="padding: 20px, 5px">이미지<input class="input_01" placeholder="네이버 아이디 또는 단체 아이디" style="font-size: 15px; "></div> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height=10px> </td>
</tr>
<tr>
<td height=40px style="font-size:20px; color: white; background-color: #03C75A; text-align: center; border-radius: 5px;">다음 </td>
</tr>
<tr>
<td height=30px> </td>
</tr>
<tr>
<td style="font-size: 15px; text-align: center; color: #B2B2B2; ">아이디가 기억나지 않는다면? <a href="https://nid.naver.com/user2/help/idInquiry?menu=idinquiry" style="color: #09AA5C; text-decoration: none;">아이디 찾기</a> </td>
</tr>
<tr>
<td height=50px> </td>
</tr>
<tr>
<td style="font-size: 13px; text-align: center; color:#B2B2B2" >
<span style="font-weight: bolder">NAVER</span> <span style="width:12px; height:12px; border-right:1px solid #B2B2B2 "> </span> 회원정보 고객센터
</td>
</tr>
</table>
</center>
</body>
</html>
1228_02.html --> 5교시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>네이버 뉴스</title>
<style>
img {
border-radius: 7px;
}
</style>
</head>
<body>
<img src="img/news_banner.PNG">
<table border=0px width=350>
<tr>
<td colspan="2" height=15px></td>
</tr>
<tr>
<td><span style="font-weight: bold;">국제신문</span> <span style="color: #A0A0A0; font-size: 12px;">12월 28일 10:16</span> </td>
<td style="width:52px; height: 25px; background-image: url(img/good.PNG);text-align: right; vertical-align: top;">
<span style="font-size: 11px; color: #4978F4; font-weight: bold; padding-right: 7px; padding-bottom:10px; ">구독</span>
</td>
</tr>
<tr>
<td colspan="2" height=10px> </td>
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td ><img src="img/news_01.PNG" style="width: 120px; height: 90; "></td>
<td style="padding-left: 10px;"><span style="font-size: 13px;">출소한 김경수 "원하지 않은 선물, 준 자 받은 자 다 난...</span> <br> <span style="font-size: 10px; color: #767678">"원하지 않았던 선물이라 고맙다고 할 수도 없고 그렇다고...</span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" height=15px> </td>
</tr>
<tr>
<td colspan="2" style="border-top:2px solid #EFEFF0; height: 1px "></td>
</tr>
</table>
<table border=0px width=350>
<tr>
<td colspan="2" height=15px></td>
</tr>
<tr>
<td><span style="font-weight: bold;">매일경제</span> <span style="color: #A0A0A0; font-size: 12px;">12월 28일 10:25</span> </td>
<td style="width:52px; height: 25px; background-image: url(img/good.PNG);text-align: right; vertical-align: top;">
<span style="font-size: 11px; color: #4978F4; font-weight: bold; padding-right: 7px; padding-bottom:10px; ">구독</span>
</td>
</tr>
<tr>
<td colspan="2" height=10px> </td>
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td ><img src="img/news_01.PNG" style="width: 120px; height: 90; "></td>
<td style="padding-left: 10px;"><span style="font-size: 13px;">100m 협곡에 추락한 커플 살린 현대차..."정말 훌륭한...</span> <br> <span style="font-size: 10px; color: #767678">운전 중에 100m 아래 협곡으로 떨어진 한 커플이 현대차...</span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" height=15px> </td>
</tr>
<tr>
<td colspan="2" style="border-top:2px solid #EFEFF0; height: 1px "></td>
</tr>
</table>
<div style="width:52px; height: 25px; background-image: url(img/good.PNG)">
<table>
<tr>
<td style="font-size: 10px; color: #4978F4; font-weight: bold; padding: 4px 0px 0px 23px">구독</td>
</tr>
</table>
</div>
</body>
</html>
1228_03.html --> 6교시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>네이버웹툰</title>
<style>
table {
border-collapse: collapse;
border-color: #E5E5E5;
}
</style>
</head>
<body>
<img src="img/webtoon_01.PNG">
<table width=680 height=230 border=1px>
<tr>
<td width=100 rowspan="2" style="padding-left: 7px; padding-right: 3px">
<span style="font-size: 25px; font-weight: bold;">오늘의</span><br><span style="font-size: 25px; font-weight: bold; color: #00C85E">웹툰</span><br><span style="font-size: 10px; color: #808285">12월 28일 수요일</span><br><br><br> <span style="font-size: 12px; font-weight: bold; color: #808285">인기순 <br> 업데이트순 <br>조회순 <br> 별점순</span>
</td>
<td width=582 height=195 colspan="6"> <img src="img/webtoon_02.PNG"></td>
</tr>
<tr>
<td width=12><</td>
<td>
<table>
<tr>
<td style="border-radius: 100px"><img src="img/webtoon_mini_01.PNG"></td>
<td><span style="font-size: 12px; font-weight: bold;">내 남편과 결혼..</span> <br> <span style="font-size: 10px; font-weight: bold; color: #808285">타임슬립 복수극</span></td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td style="border-radius: 100px"><img src="img/webtoon_mini_02.PNG"></td>
<td><span style="font-size: 12px; font-weight: bold;">전지적 독자..</span> <br> <span style="font-size: 10px; font-weight: bold; color: #808285">멸망하는 세계를 읽..</span></td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td style="border-radius: 100px"><img src="img/webtoon_mini_03.PNG"></td>
<td><span style="font-size: 12px; font-weight: bold;">헬퍼2:킬베로..</span> <br> <span style="font-size: 10px; font-weight: bold; color: #808285">장광님의 과거</span></td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td style="border-radius: 100px"><img src="img/webtoon_mini_04.PNG"></td>
<td><span style="font-size: 12px; font-weight: bold;">격기3반</span> <br> <span style="font-size: 10px; font-weight: bold; color: #808285">본격 MMA 학원물</span></td>
</tr>
</table>
</td>
<td width=12>></td>
</tr>
</table>
</body>
</html>
1228_04.html --> 7교시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Daum cafe</title>
<style>
table {
}
</style>
</head>
<body>
<img src="img/cafe_list.PNG"> <br><br><br>
<table border=0px width=750 height=70>
<tr>
<td width=50><img src="img/cafe_img_01.jpg"></td>
<td width=520><span style="font-size: 20px; padding-left: 25px">1</span> <span style="font-size: 17px; color: ;padding-left: 10px">3년 전 해외팬들 사이에서 유행했던 보정법.jpg</span></td>
<td width=90 style="font-size: 13px; text-align: center;">* 여성시대...</td>
<td width=90 style="font-size: 13px; text-align: center;"> 댓글 <span style="color: red; font-weight: bold;">40</span></td>
</tr>
<tr>
<td colspan="4" style="border-bottom: 1px solid #ECECEC; height:5px;"></td>
</tr>
</table>
<table border=0px width=750 height=70>
<tr>
<td width=50><img src="img/cafe_img_02.jpg"></td>
<td width=520><span style="font-size: 20px; padding-left: 25px">2</span> <span style="font-size: 17px; color: ;padding-left: 10px">오늘 카페 알바하다가 울었음</span></td>
<td width=90 style="font-size: 13px; text-align: center;">* 여성시대...</td>
<td width=90 style="font-size: 13px; text-align: center;"> 댓글 <span style="color: red; font-weight: bold;">73</span></td>
</tr>
<tr>
<td colspan="4" style="border-bottom: 1px solid #ECECEC; height:5px;"></td>
</tr>
</table>
</body>
</html>
1228_05.html --> 7~8교시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cafe24따라하기</title>
<style>
body {
padding: 0px;
margin: 0px;
}
table {
border-spacing: 0px;
}
</style>
</head>
<body>
<center>
<table border=0px width=1100>
<tr>
<td width=110>
<span style="font-size: 13px; font-weight: bold; color: red;">커뮤니티</span>
<span style="width=5px; height=5px; border-right:1px solid;"></span>
<span style="font-size: 12px;color: #91919F; font-weight: bold; "> 쇼핑몰</span>
</td>
<td width=900> </td>
<td width=90>
<span style="font-size: 12px;color: #91919F; font-weight: bold;">새글</span>
<span style="width=5px; height=5px; border-right:1px solid;"></span>
<span style="font-size: 12px;color: #91919F; font-weight: bold; "> 접속자 2</span>
</td>
</tr>
</table>
<hr>
<table border=0px width=1100>
<tr>
<td colspan="7" height=30></td>
</tr>
<tr>
<td width=170><img src="img/cafe_logo.jpg"></td>
<td width=200></td>
<td width=400 style="text-align: center; border: 1px solid red; border-radius: 50px;background-color: red; text-align: right; padding-right: 15px; vertical-align: middle"><img src="img/cafe_01.PNG"></td>
<td width=250></td>
<td width=100 style="font-size: 11px; color: #91919F; font-weight: bold;">
<span style="font-size: 11px; color: #91919F; font-weight: bold;">회원가입</span>
<span style="width=5px; height=5px; border-right:1px solid;"></span>
<span style="font-size: 11px; color: #91919F; font-weight: bold;"> 로그인</span>
</td>
</tr>
<tr>
<td colspan="7" height=30></td>
</tr>
</table>
<table border=0px width=1100 style="border-top:2px solid red; border-bottom: 2px solid red;">
<tr>
<td colspan="7" height=50 style="font-size: 15px; font-weight: bold; padding: 0px 10px;">
SCRIPT JAVA MYSQL JSP JSP2 JQUERY SPRING SPRINGBOOT PHP ANDROID10
</td>
<td style="text-align: center; background-color: red;"><img src="img/cafe_02.PNG"></td>
</tr>
</table>
</center>
</body>
</html>'JAVA > html' 카테고리의 다른 글
| 230102_교재, form, 구구단 (0) | 2023.01.02 |
|---|---|
| 221230_JS, 조건문, 반복문, 짝홀 (1) | 2022.12.30 |
| 221229_로또, dance블로그 (0) | 2022.12.29 |
| 221227_네이버,영역태그 (0) | 2022.12.27 |
| 221226_ html (0) | 2022.12.26 |
