데일리로그C:
article thumbnail
Published 2022. 12. 27. 17:30
221227_네이버,영역태그 JAVA/html

<22.12.27 1교시>

rowspan 바닥 합치기
colspan 벽 합치기

아파트 table 층 tr 방 td

아파트 width 300 height 300

 

각 방마다 다른 내용물이 들어가면 크기 달라짐(내용물에 맞게)

각 방마다 동일하려면  width, height 설정하면됨(맨 위층(기준점)에만 설정)
  ㄴ> <td width=100> 

높이는 퍼센트 적용 잘 안됨ㅠㅠ

여백 조절 
1. padding : 전체값이랑 내용물 사이의 여백 조절(시계방향으로)
2. margin

<hr> 선긋기 : 위아래 여백 가짐

 

<22.12.27 2교시>

<tbody> : 시청각장애인에게 바디, 헤드 어딘지 알려주는 자동태그

개발자도구-검사 :F12

<img> 태그 : 기본 여백가짐  --> 여백 없앨려면 display : block ;

<table> 태그 여백 없애기 --> border-spacing : 0px ;

<input> : 입력창 역할, 테두리 기본으로 가짐(border 0으로)

 

<22.12.27 3교시>

<a> 태그 : 하이퍼링크
   --> <a href=" " > : 링크 넣기
   --> 밑줄 없애기 : text-decoration: none;

a:link : 방문 전 링크 상태(한번도 클릭 안한상태)

a:visited : 방문 후 링크 상태(한번 클릭 한 상태)

a:hover : 마우스 오버 했을 때 링크 상태

a:active : 클릭 했을 때 링크 상태

&nbsp; : 스페이스 역할

 

<22.12.27 4교시>

사진 크기 -> 우측마우스 검사 들어가서 url에 커서 올리면 뜸

 

 

<22.12.27 5교시>

<div> : 위아래 여백없음, 내용물 유무 상관 없음, 
 ㄴ> <div style="height: 10px; border:1px solid red"></div>   =   <table><tr><td height=10> </td> </tr> </table> 

< 태그이름  valign=위치> : 정렬  -->  잘 사용 X

&gt; : 우측화살표
&lt; : 좌측화살표


<22.12.27 8교시>

input상자 <input>

 

seclect(여러가지 선택상자)
   <seclect name="abc">
          <option value="1">1</option>

<center> : 중앙정렬 태그

 

* 자식들 각 크기 주기 * 

 

!!!! 총정리 !!!!
영역 잡는 태그
1. <table>
2. <div> : 100% content(박스형태), block속성, 여백  X, <br> 포함   --> 영역나누기
3. <span> : 글자길이만큼만(크기설정X)(줄 형태), inline속성, 좌우여백 있음, <br> 포함X
4. <p> : 100% content, block속성, 상하 여백(margin) 있음  --> 텍스트 적기

 

 

1227_01.html --> 쭉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            padding: 0px;
            margin:0px;
        }
        .table_search {
            border: 2px solid #04CF5C;
        }
        img {
            display: block;
        }
        table, td {
            border-spacing: 0px;
            
        }
        .search_key {
            width: 95%;
            height:36px;
            font-weight: bold;
            border: 0px;
        }
        .top_right {
            font-size: 9px;
        }
        a {
            text-decoration: none;
        }
        a:link { color: red;}
        a:visited { color: #04CF5C; }
        a:hover { color:blue; }
        a:active { color:aqua; }
        
        .table_border {
            border: 1px solid #E5E5E5;
        }

        #login {
            text-align: center;
            color:white;
            background-color: #19CE60;
        }
        #a {
            font-size: 12px;
            color: #808080;
        }
        #b {
            font-size: 12px;
        }
       
    </style>
    
</head>
<body>
   <!--컨텐츠-->
    <table border="0" width=100% height=150>
        <tr>
            <td align=center>
                <table width=1200 border=0>
                    <tr>
                        <td width=300></td>
                        <td width=600></td>
                        <td width=300 align="right" class="top_right">
                            <a href="1226_01.html">네이버를시작페이지로</a>
                            쥬니어네이버
                            해피빈
                                
                        </td>
                    </tr>
                    <tr>
                        <td><img src="img/logo.PNG"></td>
                        <td>
                            <table width=100% height=55 border=0 class="table_search">
                                <tr>
                                    <td><input class="search_key" style="padding-left: 20px"></td>
                                    <td width=50 style="background-color: #04CF5C " align="center"><img src="img/search.PNG"></td>
                                </tr>
                            </table>
                        </td>
                        <td></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <hr>
    <!--메뉴-->
    <table border="0" width=100% height=40>
        <tr>
            <td align=center>
               <table width=1100 border=0>
                   <tr>
                       <td width=850>
                          <b>
                           <a href="">메일</a>&nbsp;&nbsp;
                           <a href="">카페</a>&nbsp;&nbsp;
                           <a href="">블로그</a>&nbsp;&nbsp;
                           <a href="">지식iN</a>&nbsp;&nbsp;
                           <a href="">쇼핑</a>&nbsp;&nbsp;
                           <a href="">쇼핑Live</a>&nbsp;&nbsp;
                           <a href="">Pay</a>&nbsp;&nbsp;
                           <a href="">TV</a>&nbsp;&nbsp;
                          </b>
                        
                       </td>
                       <td width=250 align=right><img src="img/menu_right.PNG"></td>
                   </tr>
               </table>
            </td>
        </tr>
    </table>
    <hr>
    <div style="height: 10px; border:0px solid red"></div>
    <!--컨텐츠-->
    <table border="0" width=100%>
        <tr>
            <td align=center>
               <table width=1100 border=0>
                   <tr>
                        <td width=720 valign=top>
                          <div class="table_border" style="width:750ox"; height:135px></div>
                          <table>
                              <tr>
                                   <td>
                                       <div class="table_border" style="width:750ox"><img src="img/main_banner_01.jpg" width=750 height=130></div>
                                        <div style="height=15px"></div>
                                        
                                       <table class="table_border" height=45 width=100%>
                                           <tr>
                                               <td>'만 나이 통일법' 공포…내년 6월 28일 본격 시행 </td>
                                           </tr>
                                      </table>
                                   </td>
                              </tr>      
                          </table>  
                        </td>                                 
                        <td width=20></td>
                        <td width=360 valign=top>
                          <!--로그인-->
                          <table height=135 width="100%"  style="padding: 10px; background-color:#F7F9FA" class="table_border">
                              <tr id="a">
                                  <td colspan="4">네이버를 더 안전하고 편리하게 이용하세요</td>
                              </tr>
                              <tr id="login">
                                  <td colspan="4" rowspan="1"><span style="font-weight: bolder">NAVER</span> 로그인</td>
                              </tr>
                              <tr id="b">
                                  <td>@ 아이디</td>
                                  <td>@ 비밀번호찾기</td>
                                  <td width="70"></td>
                                  <td>@ 회원가입</td>
                              </tr>
                          </table>
                          
                          <div style="height=15px"></div>
                          <table class="table_border" width=100% height=45>
                              <tr>
                                  <td>
                                      <table>
                                          <tr>
                                              <td style="padding:10px;width: 260px">증시 뭐시기</td>
                                              <td align=center width=20 height=20 class="table_border">&lt;</td>
                                              <td align=center width=20 height=20 class="table_border">&gt;</td>
                                              <td></td>
                                          </tr>
                                      </table>
                                  </td>
                              </tr>
                          </table>
                          <table>
                              <tr>
                                  <td height=400px></td>
                              </tr>
                          </table>
                          
                       </td>
                   </tr>
                </table>
            </td>
        </tr>
    </table>
    
    <!--카피라이터-->
     
      <table border="0" width=100% style="background-color: #FAFBFC; border-top:1px solid gray"> 
        <tr>
            <td align=center>
              <!--배너3개영역-->
               <table width=1100 border=0>
                   <tr>
                      <!--배너3개 1번쨰-->
                       <td width=40>
                           <table style="align=center">
                               <tr>
                                   <td style="padding-right: 20px"><img src="img/footer_banner_01.PNG"></td>
                                   <td style="padding-right: 20px"><img src="img/footer_banner_02.PNG"></td>
                                   <td><img src="img/footer_banner_03.PNG"></td>
                               </tr>
                           </table>
                       </td>
                   </tr>
               </table>

            </td>
        </tr>
    </table>
    
          
                
    
</body>
</html>

1227_02.html  --> 5교시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <style>
        
    </style>
    
</head>
<body>
    <img src="img/gallery_list.PNG">
    
    <table>
        <tr>
            <td><img src="img/01.jpg" width=100><br><span style="font-weight: bold"> <a href="https://ssl.pstatic.net/melona/libs/1417/1417479/d9cc27e518e67b35e4a9_20220407140203238.jpg">브랜드속옷의정석</a></span><br>브라세트61%</td>
            <td><img src="img/02.jpg" width=100><br><span style="font-weight: bold">게승이지웨어SET</span><br>52%SALE</td>
            <td><img src="img/03.jpg" width=100><br><span style="font-weight: bold">이게뭐길래?</span><br>만든사람천재야?</td>
        </tr>
        <tr>
            <td><img src="img/04.jpg" width=100><br><span style="font-weight: bold">더리얼랩 오메가3</span><br>지금 62% 할인 중</td>
            <td><img src="img/05.jpg" width=100><br><span style="font-weight: bold">역대급~반응폭발!</span><br>추워져도 에쁘게</td>
            <td><img src="img/06.jpg" width=100><br><span style="font-weight: bold">2022 마지막!</span><br>최대984%결산세일</td>
        </tr>
    </table>
</body>
</html>
1227_03.html --> 8교시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>네이버 회원가입</title>
    
    <style>
        .input_01 {
            border: 0px solid red;
            height:33px;
            width:98%;
        }
        
        body {
            background-color: #F5F6F7;
        }
        
        select {
            border: 0px solid red;
            height:33px;
            width:100%;
        }
    </style>
    
    
</head>
<body>
   
<center>
    <table border=0 width=400>
        <tr>
            <td style="font-size:80px; color: green; font-weight: bolder; text-align: center"> NAVER </td>
        </tr>
        
        <tr>
             <td height=20px></td>
        </tr>
        
        <tr>
            <td style="font-weight: bold ; align:center">
                아이디
            </td>   
        </tr>
        
        <tr>
            <td> 
               <table width=100%  border=0 style="border: 1px solid #DADADA; background-color: white">
                   <tr>
                       <td> <input class="input_01"> </td>
                       <td style="text-align: right; padding-right:13px; width=100%">@naver.com</td>
                   </tr>
               </table>
                
            </td> 
            
        </tr>

        <tr>
             <td height=20px></td>
        </tr>
        
        <tr>
            <td style="font-weight: bold ; align:center">
                비밀번호
            </td>   
        </tr>
        
        <tr>
            <td> 
               <table width=100%  border=0 style="border: 1px solid #DADADA; background-color: white">
                   <tr>
                       <td> <input class="input_01"> </td>
                   </tr>
               </table>
                
            </td> 
            
        </tr>
        
        <tr>
             <td height=20px></td>
        </tr>
        
        <tr>
            <td style="font-weight: bold ; align:center">
                비밀번호 재확인
            </td>   
        </tr>
        
        <tr>
            <td> 
               <table width=100%  border=0 style="border: 1px solid #DADADA; background-color: white">
                   <tr>
                       <td> <input class="input_01"> </td>
                   </tr>
               </table>
                
            </td> 
            
        </tr>
        
        <tr>
             <td height=20px></td>
        </tr>
        
        <tr>
            <td style="font-weight: bold ; align:center">
                이름
            </td>   
        </tr>
        
        <tr>
            <td> 
               <table width=100%  border=0 style="border: 1px solid #DADADA; background-color: white">
                   <tr>
                       <td> <input class="input_01"> </td>
                   </tr>
               </table>
                
            </td> 
            
        </tr>
        
        <tr>
             <td height=20px></td>
        </tr>
        
        <tr>
            <td style="font-weight: bold ; align:center">
                생년월일
            </td>   
        </tr>
        
        <tr>
            <td> 
               <table width=100%  border=0>
                   <tr>
                       <td style="width:130px; border:1px solid #DADADA; background-color: white"> <input class="input_01" placeholder="년(4자)"> </td>
                       <td width=10></td>
                       <td style="width:130px;background-color: white;border:1px solid #DADADA;"> 
                          <select name="mm" >
                              <option value="0">월</option>
                              <option value="1">1</option>
                              <option value="2">2</option>
                              <option value="3">3</option>
                              <option value="4">4</option>
                              <option value="5">5</option>
                              <option value="6">6</option>
                              <option value="7">7</option>
                              <option value="8">8</option>
                              <option value="9">9</option>
                              <option value="10">10</option>
                          </select> 
                       </td>
                       <td width=10></td>
                       <td style="width:130px;border:1px solid #DADADA; background-color: white"> <input class="input_01" placeholder="일"> </td>
                   </tr>
                   
               </table>
                
            </td> 
            
        </tr>
        
        <tr>
             <td height=20px></td>
        </tr>
        
        <tr>
            <td style="font-weight: bold ; align:center">
                성별
            </td>   
        </tr>
        
        <tr>
            <td> 
               <table width=100%  border=0 style="border: 1px solid #DADADA; background-color: white">
                   <tr>
                       <td> 
                             <select name="sex">
                                 <option value="0">성별</option>
                                 <option value="1">남</option>
                                 <option value="2">여</option>
                                 <option value="3">선택안함</option>
                             </select> 
                       </td>
                   </tr>
               </table>
                
            </td> 
            
        </tr>
        
        <tr>
             <td height=20px></td>
        </tr>
        
        <tr>
            <td style="font-weight: bold ; align:center">
                본인 확인 이메일<span style="color:#8E8E8E; font-size: 12px">&nbsp;(선택)</span>
            </td>   
        </tr>
        
        <tr>
            <td> 
               <table width=100%  border=0 style="border: 1px solid #DADADA; background-color: white">
                   <tr>
                       <td> <input class="input_01" placeholder="선택입력"> </td>
                   </tr>
               </table>
                
            </td> 
            
        </tr>
        
        <tr>
             <td height=20px></td>
        </tr>
        
         <tr>
            <td style="font-weight: bold ; align:center">
                휴대전화
            </td>   
        </tr>
        
        <tr>
            <td> 
               <table width=100%  border=0 style="border: 1px solid #DADADA; background-color: white">
                   <tr>
                       <td> 
                           <select name="phone">
                               <option value="1"> 가나+233 </option>
                               <option value="1"> 가봉+241</option>
                               <option value="1"> 대한민국+82</option>
                           </select>
                       </td>
                   </tr>
               </table>
            </td> 
        </tr>
        
        <tr>
            <td> 
               <table width=100%  border=0 style="border: 0px solid #DADADA;">
                   <tr>
                       <td width=285 style="background-color: white; border: 1px solid #DADADA"> <input class="input_01" placeholder="전화번호 입력"> </td>
                       <td width=5> </td>
                       <td width=100 style="color: white; background-color: #03C75A;font-size: 13px; text-align: center;">인증번호 받기</td>
                   </tr>
               </table>
            </td> 
        </tr>
        
        <tr>
            <td> 
               <table width=100%  border=0 style="border: 1px solid #DADADA; background-color: white">
                   <tr>
                       <td> <input class="input_01" placeholder="인증번호 입력하세요"> </td>
                   </tr>
               </table>
                
            </td> 
            
        </tr>
        
        <tr>
             <td height=50px></td>
        </tr>
        
        <tr>    
            <td height=40px style="font-size:20px; color: white; background-color: #03C75A; text-align: center; "> 가입하기 </td>
        </tr>
        
        <tr>
             <td height=20px></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
221228_CSS  (2) 2022.12.28
221226_ html  (0) 2022.12.26
profile

데일리로그C:

@망밍

포스팅이 도움됐다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

profile on loading

Loading...

검색 태그

5주차
웹개발
적응중..
Robo3T
데이터베이스
코딩오류
.value
그림
4주차
AWS
스파르타
좋아연
MongoDB
몽고DB
포뇨
PROJECT
개발일지
앱개발
파이썬
on속성
CSS
모두의책리뷰
나홀로메모장
메디방
자바스크립트
서버
코딩
3주차
짱구인형
HTML

티스토리툴바