4/29 HTML 수업 정리

💎WEB/Web_Code

˚₊✩‧₊ 4/29 HTML 수업 정리 ˚₊✩‧₊

HYEJU01 2024. 4. 29. 17:22

📍 이론

Live Server : 결과 내용을 미리(즉시) 보여주는 확장 프로그램

Elm Emmet : 코드를 빠르게 입력해주는 확장 프로그램

Auto Rename Tag : 앞뒤 태그명을 같게 해주는 확장 프로그램

inline / block

table , tr 줄 만들기, td 칸 만들기

shift + art + 화살표 : 줄 복사하기

선택자 종류 : id, class, name, tag, 기타 접근자

# / id : 중복 사용 불가 ( 자바스크립트에서 사용 가능)

# class 중복 사용 가능

dix.box : 클래스 자동완성

ctrl + 슬래쉬 : 주석처리

    body {
            width : 400px;
            border : 1px solid red;
        }

        #table1{
            width: inherit; /* 100 % */  부모의 상대적 100%
            background-color: antiquewhite;
            
        }

📍table 실습

css

.wrap {
    position: fixed;
    width:480px;
    height: 100%;
    border: 1px solid red;
    background: url("../img/59.PNG") no-repeat;
    background-size: 100% 100%;
    top : 0; left: 0
 }

 .wrap .box {
    margin-top : 26%;
    margin-left: 10%;
    width: 81%; height: 70%;
    background-color: rgb(255, 238, 238);
    border-radius: 15px;
    overflow: auto;
 }

 .table1{
    width: 100%;
    font-size: 15px;
   
 }
 td {
    background-color: #fff;
    width: 35%;
    text-align: center;
    border-bottom : 1px solid rgb(203, 109, 109);
    padding: 10px;
   
    
 }
 .time {
    width: 10%;
    
    
 }
 caption{
    padding: 20px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    color: brown;
    
 }
 .gap{
    width: 10%;
    background-color: rgb(255, 255, 255);
    
 }

 .t-main > .time, .t-main > .cont {
    background-color: rgb(255, 183, 183);
 }

html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>시간 관리</title>
   <link rel="stylesheet" href="css/index.css">
</head>
<body>

   <div class="wrap">
      <div class="box">
         
         <table class="table1">
            <caption> 나의 시간표...</caption>
            <tr class="t-main">
               <td class="time">시간</td>
               <td class="cont">내용</td>
               <td class="gap">🍀</td>
               <td class="time">시간</td>
               <td class="cont">내용</td>
            </tr>
            <tr class="">
               <td class="time">AM 01:00</td>
               <td class="cont">일어나기</td>
               <td class="gap"></td>
               <td class="time">AM 01:00</td>
               <td class="cont">일어나기</td>
            </tr>
            <tr class="">
               <td class="time">AM 01:00</td>
               <td class="cont">일어나기</td>
               <td class="gap"></td>
               <td class="time">AM 01:00</td>
               <td class="cont">일어나기</td>
            </tr>
            <tr class="">
               <td class="time">AM 01:00</td>
               <td class="cont">일어나기</td>
               <td class="gap"></td>
               <td class="time">AM 01:00</td>
               <td class="cont">일어나기</td>
            </tr>
            <tr class="">
               <td class="time">AM 01:00</td>
               <td class="cont">일어나기</td>
               <td class="gap"></td>
               <td class="time">AM 01:00</td>
               <td class="cont">일어나기</td>
            </tr>
            <tr class="">
               <td class="time">AM 01:00</td>
               <td class="cont">일어나기</td>
               <td class="gap"></td>
               <td class="time">AM 01:00</td>
               <td class="cont">일어나기</td>
            </tr>
            <tr class="">
               <td class="time">AM 01:00</td>
               <td class="cont">일어나기</td>
               <td class="gap"></td>
               <td class="time">AM 01:00</td>
               <td class="cont">일어나기</td>
            </tr>

            <tr class="">
               <td class="time">AM 01:00</td>
               <td class="cont">일어나기</td>
               <td class="gap"></td>
               <td class="time">AM 01:00</td>
               <td class="cont">일어나기</td>
            </tr>
            <tr class="">
               <td class="time">AM 01:00</td>
               <td class="cont">일어나기</td>
               <td class="gap"></td>
               <td class="time">AM 01:00</td>
               <td class="cont">일어나기</td>
            </tr>

            

      
         </table>


      </div>
   </div>
   
</body>
</html>

저작자표시 비영리 변경금지

현재글4/29 HTML 수업 정리

개발일지📝

˚₊✩‧₊ 4/29 HTML 수업 정리 ˚₊✩‧₊

📍 이론

📍table 실습

'💎WEB/Web_Code'의 다른글

티스토리툴바

˚₊✩‧₊ 4/29 HTML 수업 정리 ˚₊✩‧₊

📍 이론

📍table 실습

'💎WEB/Web_Code'의 다른글

관련글

티스토리툴바