본문 바로가기
IT To do and To was

22년 3월 23일_웹 2번째 시간 및 웹디..공부..

금호동짜세 2022. 3. 23.
728x90
반응형

수요일[시간이 너무 빠르다...]

1. 오늘 수업 정리내용 기재

2. 오늘 기재한 코드 공유

 

1. CSS

form action속성은 처리할 페이지를 지정

background-img : url(':andscpe.jpe);

em은 배수

font-weight
normal이 400의 굵기를 가지고 있음
bold는 700정도의 굵기를 가지고 있음

text-align : 글자의 정렬을지정

text-decoration
취소선 ling-thorgh

*[type]{
type속성을 가지고 있는 것을 다 속하게 함
}

:active {사용자가 마우스로 클릭한 상태}
A태그만 가능
:link{링크상태 _미방문상태}
:visited{링크상태_이미 방문한 상태}

입력 양식의 상태ㅡㄹ 선택하기 위해 사용
:checked {checkbox, radio 태그가 체크된 상태}
:focus {입력 양식에 초점이 맞춰져 있는 상태}
:enabled{입력 가능한 input상태}
:disabled{입력 불가한 input태그의 상태}

구조 선택자 _ 특정위치에 있는 태그를 선택
:first-child{형제관계에서 첫번째로 등장하는태그}
:last-child{형제관계에서 마지막으로 등장하는태그}
:nth-child(수열){형제 관계에서 앞에서 수열 번째로 등장하는 태그 선택}
:nth-last-child(수열){형제 관계에서 뒤에서 수열 번째로 등장하는 태그 선택}


ex)
 .menu > li:first-child{
        background-color: rgba(0,128,0,0.1);
      }
      .menu > li:nth-child(2){
        background-color: rgba(0,0,255,0.1);
      }
      .menu > li:nth-child(3){
        background-color: rgba(128,0,128,0.1);
      }
      .menu > li:last-child{
        background-color: rgba(255,0,0,0.1);
      }
  </style>
</head>

<body>
  <header>
    <h1>건강 음료</h1>
  </header>

  <nav>
    <!-- 메뉴 -->
    <ul class="menu">
      <li><a href="#green">Green</a></li>
      <li><a href="#blue">Blue</a></li>
      <li><a href="#purple">Purple</a></li>
      <li><a href="#red">Red</a></li>
    </ul>
  </nav>

속성선택자
선택자[속성명]
선택자[속성명=속성]

같은 태그이면 바로 아래있는 태그만 선택이됨

margin과 padding은 top부터 오른쪽으로 도는 값이다.
borde - 테두리를 결정하는 속성
border-width 두께
border-stlye 형태
border-color 테두리 색상
위의 순으로 한번에 입력이 가능함 ex)border : 1px solid #999999;


border-radius : 모서리를 둥글게 만드는 스타일
ex) img.클래스이름 {
border-radius:10px 20px 10px 20px;
}

display 
none : 요소를 화면에서 감추기
block : 블록형식으로 표시
inline : 인라인형식으로 표시
inline-block : 인라인 블록 형식으로 표시

inline - 마진속성이 좌우만 적용되고 width, height적용 안됨
inline-block = w,h적용되고  마진 다 적용 가능

visibility : hidden  표시 여부를 결정하는데 공간 점유를 그래도 함

background-imge 이미지 지정 ex) :url(경로);
-size 값이 2개면 가로세로로 지정
-repeat 반복형태 지정 ex)  :no-repeat; | :repeat; | :repeat-y; | :repeat-x;
-attachment 부착형태지정 == fixed; 로하면 스크롤 하여도 배경은 스크롤 되지 않음
-posistion 배경 이미지 위치 지정

background : 이미지(url:("")) 위치 / 사이즈 / 반복여부/ 포지션 / 색상

 

2. 코드 공유

*{padding: 0; margin: 0; font-size: 14px; font-family: "맑은 고딕" sans-serif;
color: #333333;}
img{
    border: none;
}
a{
    text-decoration: none;
}
li{
    list-style: none;
}
h1{

}
.gnb {
    float: reight;
}
.main{
    width: 1200px;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
}
.contents{
    width: 1200px;
    height: 200px;
    margin: 0 auto;

}
.notice, .gallery, .banner{
    width: 400px;
    height: 200px;
}
 *{padding: 0; margin: 0 auto;/*여백 없앰*/
    font-family: "맑은 고딕", sans-serif;}
li{list-style: none;}
a{text-decoration: none;} /*리스트 기호 없앰*/
img{border: none;} /*이미지 링크시 생기는 선 없앰*/

.mainnav{
    top: 0px;
    float: right;
}
.header{
    width: 100%; height: 100px;
    border-top: 5px solid #333333;
    background-color: #22239182;
    border-bottom: 1px solid navy;
    box-sizing: border-box; /*영역안으로 테두리 인사이드*/
}
.main{
    width: 1200px; height: 300px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.contents{
    width: 1200px; height: 300px;
    float: left;
    margin: auto;
}
.notice{
    float: left; width: 400px; height: 250px;

    margin: auto;
}
.tab{
    width: 1200px; height: 350px;
    margin: auto;
    background-color: antiquewhite;
}
.banner{
    float: left; width: 400px; height: 250px;
    padding: 5px 20px 0; box-sizing: border-box;
    margin: auto;
}
.now{
    float: left; width: 400px; height: 250px;
     padding: 5px 20px 0; box-sizing: border-box;
    margin: auto;
}
}
.footer{
    width: 100%; height: 100px;
    float: left;
    background-color: azure;
    margin: 0 auto;
}
.wrap{
    width: 1200px; height: 100%;
    margin: 0 auto;
    background-color: khaki;
}
.header h1{
    float: left; width: 400px; height: 100%;
    padding-top: 27px; box-sizing: border-box;
}
.footer h1{
    float: left; width: 400px; height: 100px;
    padding-top: 30px; box-sizing: border-box;
}
.subnav{
    display: none;
}

.board{
    width: 400px; height: 200px;
    padding: 0 20px;
/*    background-color: aqua;*/
    box-sizing: border-box;
    margin: 20px;
}
.btn{
    width: 1200px; height: 60px;
    padding-top: 10px;
    box-sizing:border-box;
    border-bottom:  1px solid #999999;
}
.btn ul{
    padding-left: 20px;
}
.btn .first{
    margin-left: 0;
}
.btn .first:after{
    content: '|';
    font-size: 20px; font-weight: bold;
    position: relative; top: -3px; left: 20px;
}
.btn li{
    float: left;
    margin: 0 20px;
    height: 50px; 
    line-height: 50px;
}
.btn .first{
    margin-left: 0;
}
.btn a{
    font-size: 24px; font-weight: bold; color: #999;
}
.btn .active{
    color: #222328; border-bottom: 3px solid #222328;
}
.best{
    width: 1200px; height: 290px; background-color: pink;
}
.new{
    display: none;
    width: 1200px; height: 290px; background-color: lightblue;
}
.bwrap{
    width: 100%; height: 150px;
}
.notice{
    width: 100%; height: 150px;
    padding: 0 20px; box-sizing: border-box;
}
.notice h2{
    width: 100%; height: 50px;
    border-bottom: 1px solid #999999; box-sizing: border-box;
    font-size: 18px; font-weight: bold;color: #a37e4b;
    line-height: 50px;
}
.gallery{
    width: 100%; height: 150px;
    display: none;
}

.notice li{
    width: 100%; height: 30px;
    line-height: 30px;
    font-size: 12px;
}
.notice a{
    float: left;
    display: block;
    width: 230px; height: 10px;/*길이가 길경우 width를 크게 설정*/
    padding-left: 10px; box-sizing: border-box;
    font-size: 17px; color: dimgray
}
.notice .date{
    float: right;
    display: block;
    padding-right: 13px; box-sizing: border-box;
    font-size: 16px; color: darkturquoise;
}
.gallery ul{
    padding: 25px 0;
}
.gallery li{
    float: left;
    width: 100px; height: 100px;
    margin: 0 10px;
}
.footer p{
    color: aliceblue;
    float: left; width: 400px; height: 100px;
    text-align: center; line-height: 100px;
}
.snsnav{
    float: right;
    width: 400px; height: 100px;
    line-height: 100px;
}
.snsnav ul{float: right;}
.snsnav li{float: left; margin: auto;}
.snsnav a{color: #fff;}
.gnb{
    float: right; width: 600px; height: 100%
}
.gnb > ul > li {
    float: left; width: 150px; height: 94px;
    line-height: 94px; text-align: center;
    position: relative;
}
.gnb .mainnav{
    font-size: 18px; font-weight: bold; color: #666;
}
.gnb li:hover .mainvav{
    color: #333333;
}
.subnav{
    display: none;
    position: absolute;
    top: 70px; left: 0;
    z-index: 5000;
    width: 150px; line-height: 40px;
    border: 1px solid #666666; box-sizing: border-box;
    background-color: #ffffff;
}
.subnav li{
    width: 100%; height: 40px;
}
.subnav a{
    display: block; width: 100%; height: 100%;
}
.subnav a:hover{
    background-color: #ededed;
    color: #333333;
}
.main ul{
    position: absolute;
    width: 3600px;
    height: 300px;
    left: 0; top: 0;
}
.main li{
    float: left; width: 1200px; height: 300px;
}]
$(document).ready(function(){

   $('.gnb >ul > li').hover(function(){
       $(this).find('.subnav').stop().slideDown('fast');
   },function(){
       $(this).find('.subnav').stop().slideUp('fast');       
   });
    
});

$(document).ready(function(){
    var num = 1;
    setInterval(function(){
        if (num <3){
            num++;
            $('.main ul').animate({
                left :"-=1200"
            },'slow');
        }else{
            num = 1;
            $('main ul').animate({
                left : 0
            },'slow');
        }
    },3000);
});

$(document).ready(function(){
    $('.btn a').click(function(){
        $('.btn a').removeClass('active');
        $(this).addClass('active');
        
        var i = $(this).parent().index();
        $('.bwrap > div').fadeOut(0);
        $('.bwrap > div').eq(i).fadeIn(0);
    });
});		 <!DOCTYPE html>
<html lang="ko">
    <head>
    <meta charset="UTF-8">
    <title>박하률</title>
        <link rel="stylesheet" href="css/common.css">
        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="js/common.js"></script>
    </head>
    <body>
      <div class="header">
       <div class="wrap">
        <h1><a href="#"><img src="imges/rogo.png" alt="임시로고"></a></h1>
        <div class= "gnb">
        
        <ul>
            <li><a href="#" class="mainnav">탑</a>
            <ul class="subnav">
                <li>블라우스</li>
                <li>티</li>
                <li>셔츠</li>
                <li>니트</li>
            </ul>
            </li>
            <li><a href="#" class="mainnav">아우터</a>
                <ul class="subnav">
                    <li>자켓</li>
                    <li>코트</li>
                    <li>가디건</li>
                    <li>머플러</li>
                </ul>
            </li>
            <li><a href="#" class="mainnav">팬츠</a>
                <ul class="subnav">
                    <li>청바지</li>
                    <li>짧은바지</li>
                    <li>긴바지</li>
                    <li>레깅스</li>
                </ul>
            </li>
            <li><a href="#" class="miannav">악세사리</a>
            <ul class="subnav">
                <li>귀고리</li>
                <li>목걸이</li>
                <li>반지</li>
                <li>팔찌</li>
            </ul>
            </li>
        </ul>
        </div>
        </div>
    </div>
        <div class="main">
            <ul>
                <li><a href="#"><img src="imges/main1.png" alt="메인이미지1"></a></li>
                <li><a href="#"><img src="imges/main2.png" alt="메인이미지2"></a></li>
                <li><a href="#"><img src="imges/main3.png" alt="메인이미지3"></a></li>
            </ul>
        </div>
        <div class="tabs">
            <ul class="btn">
                <li class="first"><a href="#tab01" class="active">BEST ITME</a></li>
                <li><a href="#tab02">ARRIVALS</a></li>
            </ul>
            <div class="bwrap">
                <div class="best">
                    <ul>
                        <li><a href="#"><img src="imges/icon01.png" alt="베스트이미지1"><p>포니 앞버튼<br>
                        이게 잘 들어갈까 의문이네<br>
                        처뻔째이미지</p>
                        <del>42,000won</del>/<span class="price">32,800won</span></a></li>
                        <li><a href="#"><img src="imges/icon02.png" alt="베스트이미지2"><p>아 그렇구나<br>
                        텍스트 넣는것도 이리네<br>
                        두번째이미지</p>
                        <del>50,000won</del>/<span class="price">47,800won</span></a></li>
                        <li><a href="#"><img src="imges/icon03.png" alt="베스트이미지3"><p>초콜릿이 크다<br>
                        1분 순삭가능 초콜릿<br>
                        세번째이미지</p>
                        <del>90,000won</del>/<span class="price">89,800won</span></a></li>
                        <li><a href="#"><img src="imges/icon04.png" alt="베스트이미지4"><p>10시가 다되가네<br>
                        스콘을 먹어서 다행이다.<br>
                        네뻔째이미지</p>
                        <del>12,000won</del>/<span class="price">11,800won</span></a></li>
                        <li><a href="#"><img src="imges/icon05.zip" alt="베스트이미지5"><p>배고픈 채로 있을까<br>
                        바나나랑 딸기면<br>
                        다서뻔째이미지</p>
                        <del>89,000won</del>/<span class="price">56,800won</span></a></li>
                    </ul>
                </div>
                <div class="new">
                    
                </div>
            </div>
        </div>
    <div class="contents">
      <div class="notice">
        <h2>공지사항</h2>
        <ul>
            <li>
                <a href="#"></a>
                <span class="date">
                    
                </span>
            </li>
            <li>
                <a href="#">. 여름</a>
                <span class="date">
                    20.11.01
                </span>
            </li>
            <li>
                <a href="#">. 겨울</a>
                <span class="date">
                    21.10.20
                </span>
            </li>
            <li>
                <a href="#">. 가을</a>
                <span class="date">
                    22.01.01
                </span>
            </li>
            <li>
                <a href="#">공지</a>
                <span class="date">
                    22.03.07
                </span>
            </li>
        </ul>
        </div>
        <div class="banner"><a href="#"><img src="imges/banner.png" alt="배너"></a>배너</div>
        <div class="now"><a href="#"><img src="imges/now.png" alt="바로가기"></a></div>
    </div>
    <div class="footer">
       <div class="wrap">
            <h1><a href="#"><img src="imges/footerrogo.png" alt="하단로고"></a></h1>
            <div>Copyright</div>
            <p>hayrulpark.tistory.com</p>
            <div class="snsnav"><ul>
                <li><a href="#">FACEBOOK</a></li>
                <li><a href="#">INSTARGRAM</a></li>
                <li><a href="#">TWITTER</a></li>
            </ul></div>
        </div>
    </div>
    </body>
</html>
<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <!-- meta https-equiv:문서를 랜더링하기 ㅜ이한 각종 문서 헤더 정보표기 -->
  <!-- html 4스타일 -->
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

  <!-- meta : name, content 문서를 잘 검색할 수 있도록 문서에 관한 정보를 제공 -->
  <meta name="keyword" content="HTML, CSS, JavaScript">
  <meta name="description" content="웹 프론트엔드 강의" />
  <meta name="author" content="박하률">
  <title>Bit Lounge 건강음료</title>
  <link rel="stylesheet" href="css/style.css">
  <style>
    h1{
      font-family: "궁서체","신명조",sans-serif;}

      #green{
        color: green;
        /* rgb(0,128,0)  | #00ff00; */
      }
      #blue{
        color: blue;
      }
      #purple{
        color: purple;
      }
      #red{
        color: red;
      }
      .beverage{
        padding: 10px;
        min-height: 150px;
        /* 최소 높이 */
      }
      .beverage.green{
        background-color: rgba(0,128,0,0.1);
        /* #00ff0020 */
      }
      .beverage.blue{
        background-color: #0000FF20;
      }
      .purple{
        background-color: #80008020;
      }
      .red{
        background-color: #FF000020;
      }
      .beverage h2:hover{
        color: aqua;
      }
      .beverage h2{
        font-size: 1.5em;
        margin-bottom: 20px;
      }
      .menu > li:first-child{
        background-color: rgba(0,128,0,0.1);
      }
      .menu > li:nth-child(2){
        background-color: rgba(0,0,255,0.1);
      }
      .menu > li:nth-child(3){
        background-color: rgba(128,0,128,0.1);
      }
      .menu > li:last-child{
        background-color: rgba(255,0,0,0.1);
      }
      h1{
        padding: 0 0 10px;
      }
      .beverage{
        margin: 10px;
        border : 3px solid gray;
        border-style: dashed;
      }
      .seller img{
        border-radius: 20px;
        border-top-left-radius: 40px;
        border-radius: 50%;
      }
      body{
        background: url("images/Landscape.jpg") bottom / 100% no-repeat fixed lightgray;
        background-image: url(images/Landscape.jpg);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: bottom;
        background-size: 100%;

      }
      .beverage img{
        /* float: left; */
        float: right;
        margin: 0 20px;
      }
     
      .menu > li{
        list-style: none;
        float: left;
        width: 100px;
        text-align: center;
        margin-right: 5px;

      }
      nav{
        height: 25px;
      }
  </style>
</head>

<body>
  <header>
    <h1>건강 음료</h1>
  </header>

  <nav>
    <!-- 메뉴 -->
    <ul class="menu">
      <li><a href="#green">Green</a></li>
      <li><a href="#blue">Blue</a></li>
      <li><a href="#purple">Purple</a></li>
      <li><a href="#red">Red</a></li>
    </ul>
  </nav>
    <!-- 판매자 -->
  <div class="seller">
    <h1>판매자</h1>
    <img src="images/Penguins.jpg" alt="판매자">

  </div>

  <section>
    <div id="green" class="green beverage">
      <h2> Green Tea Cooler</h2>
      <img src="./images/green.jpg" alt="Green Tea" title="Green Tea">
      <p>Chock full of vitamins and minerals, this elixir combines the healthful benefits of green tea with a twist of
        chamomile blossoms and ginger root.</p>
    </div>
  </section>
  <section>
    <div id="blue" class="blue beverage">
      <h2> Raspberry Ice Concentration</h2>
      <img src="./images/lightblue.jpg" alt="Raspberry Ice Concentration" title="Raspberry Ice Concentration">
      <p>Combining raspberry juice with lemon grass, citrus peel and rosehips, this icy drink will make your mind feel
        clear and crisp.</p>
    </div>
  </section>
  <section>
    <div id="purple" class="purple beverage">
      <h2> Blueberry Bliss Elixir</h2>
      <img src="./images/blue.jpg" alt="Blueberry Bliss Elixir" title="Blueberry Bliss Elixir">
      <p>ueberries and cherry essence mixed into a base of elderflower herb tea will put you in a relaxed state of bliss
        in no time.</p>
    </div>
  </section>
  <section>
    <div id="red" class="red beverage">
      <h2> Cranberry Antioxidant Blast</h2>
      <img src="./images/red.jpg" alt="Cranberry Antioxidant Blast" title="Cranberry Antioxidant Blast">
      <p> Wake up to the flavors of cranberry and hibiscus in this vitamin C rich elixir.</p>
    </div>
  </section>
  <p><a href="index.html">메인으로 돌아가기</a></p>
</body>

</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>테이블</title>

<style type="text/css" media="screen">
*{margin: 0; padding: 0; font-family: "맑은 고딕", "돋움";
font-size: 12px; color: #333;}
.tbl-ex{
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #333;
    border-collapse: collapse;
    border-left: 0;
    border-right: 0;
}
th{
    border: 1px solid #333;
    padding: 8px;
    background-color: #999;
    font-size: 1.1em;
    color: #fff;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
}
tr td {
    border: 1px dotted #333;
    padding: 8px;
    border-left: 0;
    border-right: 0;
}

.even{
    background-color: #E8ECF6;
}

tr:hover{
    background-color: #fc6;
    cursor: pointer;
}


</style>
</head>
<body>
    <table class="tbl-ex" >
   
        <tr>
            <th>형식</th>
            <th>선택자 이름</th>
            <th>스타일 적용 요소</th>
            <th>호환성</th>
        </tr>
        <tr>
            <td>a</td>
            <td>HTML</td>
            <td>모든 HTML에 적용</td>
            <td>IE4, FF1,Safari 1, 크롬 1,오페라 3.5, CSS1</td>
        </tr>
        <tr class="even">
            <td>.classname</td>
            <td>클래스</td>
            <td>클래스로 정의해 준 HTML 태그</td>
            <td>IE4, FF1,Safari 1, 크롬 1,오페라 3.5, CSS1</td>
        </tr>
        <tr>
            <td>a.classname</td>
            <td>종속 클래스</td>
            <td>특정 HTML 태그에 종속된 클래스</td>
            <td>IE4, FF1,Safari 1, 크롬 1,오페라 3.5, CSS1</td>
        </tr>
        <tr class="even">
            <td>#idname</td>
            <td>아이디</td>
            <td>아이디로 정의해준 HTML 태그</td>
            <td>IE4, FF1,Safari 1, 크롬 1,오페라 3.5, CSS1</td>
        </tr>
        <tr>
            <td>a#idname</td>
            <td>종속아이디</td>
            <td>특정 HTML 태그에 종속된 아이디</td>
            <td>IE4, FF1,Safari 1, 크롬 1,오페라 3.5, CSS1</td>
        </tr>
        <tr class="even">
            <td>*</td>
            <td>전체 선택</td>
            <td>모든 HTML 태그에 적용</td>
            <td>IE4, FF1,Safari 1, 크롬 1,오페라 3.5, CSS2</td>
        </tr>  
    </table>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>리스트 정의하기</title>
<style type="text/css">
*{
    padding: 0; margin: 0; font-family: "맑은 고딕", "돋움"; font-size: 12px; color: #333;
    line-height: 28.8px;
}
ul {
    margin-left: 20px;
    list-style: none;
}
li{
    padding-left: 15px;
    background-image: url(images/bullet11.jpg);
    background-repeat: no-repeat;
    background-position: 0 8px;
}
</style>
</head>
<body>
    <ul class="root" >
        <li>리스트 스타일</li>
        <li>리스트 스타일</li>
            <ul>
                <li>리스트 스타일</li>
                <li>리스트 스타일</li>
                    <ul>
                        <li>리스트 스타일</li>
                        <li>리스트 스타일</li>
                        <li>리스트 스타일</li>
                        <li>리스트 스타일</li>
                    </ul>
                <li>리스트 스타일</li>
                <li>리스트 스타일</li>
            </ul>
        <li>리스트 스타일</li>
        <li>리스트 스타일</li>
    </ul>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>리스트를 이용한 메뉴 만들기</title>
<style type="text/css">
*{
    margin: 0; padding: 0;
}
body{
    font-family: "맑은 고딕", "돋움";
    font-size: 12px;
    color: #333;
   
}
.tab-box{
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 520px;
    height: 520px;
}
ul{
    list-style: none;
    height: 27px;
}
li{
    float: right;
    width: 100px;
    height: 22px;
    border: 1px solid #999;
    background-color: #ccc;
    text-align: center;
    padding-top: 3px;
    margin-right: 2px;
    border-radius: 10px 10px 0px 0px;
}
.tab-box div{
    border: 1px solid #333;
    margin-top: -1px;
    text-align: center;
    line-height: 200px;
    width: 516px;
}
.selected:active{
    background-color: orange;
}
</style>
<script src="" type="text/javascript"></script>
</head>
<body>
<div class="tab-box">
    <ul>
        <li>메뉴 5</li>
        <li class="selected">메뉴 4</li>
        <li>메뉴 3</li>
        <li>메뉴 2</li>    
        <li>메뉴 1</li>
       
    </ul>
    <div>
        탭뷰입니다.
    </div>
</div>    
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>로그인 폼 연습</title>
    <style>
        *{
            padding: 0; margin: 0;
        }
        body{
            font-family: "맑은 고딕", "돋움";
            font-size: 12px;
            color: #333;
        }
        #login-form{
            width: 180px;
            padding: 10px;
            border: 1px solid #666;
            border-radius: 10px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 50px;
        }
        label{
            display: block;
            margin-top: 5px;
            margin-bottom: 3px;
        }
        input{
            display: block;
            width: 155px;
        }
        input[type="image"]{
            margin: 10px;
            margin-left: 60px;
            width: 50px;
        }
    </style>
</head>
<body>
    <form id="login-form">
        <label for="userid">아이디</label>
        <input type="text" name="userid">
        <label for="password">패스워드</label>
        <input type="password" name="password">
        <input type="image" src="./images/login.png" />
    </form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>멤버십 가입</title>
    <style>
        *[type] {
            /* 타입속성을 가진 모든 요소들 */
            background-color: beige;
        }
        input[type="text"]{
            background-color: lightgreen;
        }
        input[type="password"]{
            background-color: lightblue;
        }
        input:enabled{
            background-color: #fff;
        }
        input:disabled{
            background-color: gray;
        }
        input:focus{
            background-color: orange;
        }
       
    </style>
</head>

<body>
    <form action="form.html" name="registerForm" >
        <!-- method : Get(default), Post -->
        <!-- action: 데이터를 처리할 서버의 페이지 -->
        <fieldset>
            <!-- 입력양식의 그룹 -->
            <legend>멤버십 가입</legend>
            <label for="userid">아이디</label>
            <!-- for은 그 아이디를 따라가 활성화시킴 -->
            <input type="text" name="userid" id="userid"><br>
            <label for="passwd">비밀번호</label>
            <input type="password" name="passwd" id="passwd"><br>
            <input type="text" disabled>
            <input type="hidden" name="secret" value="not-shown"><br>
            <!-- hidden은 사용자로부터 입력받은 데이터는 아니지만
                서버에서 반드시 처리할 데이터를 전송하고자 할 때 사용 -->
            <label for="gender">성별</label>
            <!-- radio: 한 개만 선택할 경우 -->
            <input type="radio" name="gender" value="male" checked>남성
            <input type="radio" name="gender" value="female">여성<br>
            <label for="">선호음료</label>
            <input type="checkbox" name="favorite" id="delmont">델몬트
            <input type="checkbox" name="favorite" id="power">파워에이드
            <input type="checkbox" name="favorite" id="americano">아메리카노
            <input type="checkbox" name="favorite" id="latte">라떼 <br>
            <!-- 서버로 전송 시에는 문자열의 배열로 전송됨 -->
            <label for="">통신사</label>
            <select name="telecom" id="">
                <option value="S">SKT</option>
                <option value="k">KT</option>
                <option value="L">LG</option>
                <option value="A">알뜰폰</option>
            </select><br>
            <input type="reset" value="정정">
            <input type="submit" value="멤버십가입">
        </fieldset>
    </form>
</body>

</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>로그인 폼 연습</title>
    <style>
        *{
            padding: 0; margin: 0;
        }
        body{
            font-family: "맑은 고딕", "돋움";
            font-size: 12px;
            color: #333;
        }
        #login-form{
            width: 180px;
            padding: 10px;
            border: 1px solid #666;
            border-radius: 10px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 50px;
        }
        label{
            display: block;
            margin-top: 5px;
            margin-bottom: 3px;
        }
        input{
            display: block;
            width: 155px;
        }
        input[type="image"]{
            margin: 10px;
            margin-left: 60px;
            width: 50px;
        }
    </style>
</head>
<body>
    <form id="login-form">
        <label for="userid">아이디</label>
        <input type="text" name="userid">
        <label for="password">패스워드</label>
        <input type="password" name="password">
        <input type="image" src="./images/login.png" />
    </form>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table 연습</title>
</head>
<body>
    <table border="1">
        <caption>성적표</caption>
        <thead>
            <tr>
                <th>이름</th>
                <th>나이</th>
                <th>점수</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>철수</td>
                <td>23</td>
                <td>80</td>
            </tr>
            <tr>
                <td>영희</td>
                <td>24</td>
                <td>100</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>평균</td>
                <td></td>
                <td>90</td>
            </tr>
        </tfoot>
    </table>

    <h1>확장 테이블</h1>
    <table border="1">
        <tr>
            <td colspan="2">첫</td>
            <!-- <td>두</td> -->
            <td>셋</td>
        </tr>
        <tr>
            <td>2 첫</td>
            <td>2 둘</td>
            <td rowspan="2">3 셋</td>
        </tr>
        <tr>
            <td>3,1</td>
            <td>3,2</td>
            <!-- <td>3,3</td> -->
        </tr>
    </table>
</body>
</html>
fade main  js html
$(document).ready(function(){
    var num = 0;
    $('.main li').eq(0).fadeIn(0);

    setInterval(function(){
        if(num <2){
            num++;
        }else{
            num =0;
           
           
        }
        $('.main li').fadeOut('slow');
        $('.main li').eq(num).fadeIn('slow');
    },3000);
});
 main ul{
width : 100%;
height : 100%;
position : relative;
}
.main li{
width : 100%;
heigth: 100%;
position : absolute; top :0 ; left : 0;}

//yesterday wished to today list
. 행복하기✔

. 좋은일 3가지 기재(옥수수밀크가 아주 맛남, 수업이 졸리지 않았음, 과일이 맛있었음)



 

tomorrow wish list
. 행복하기✔

. 안좋고 거슬렸던 일 3가지 기재



728x90
반응형
저작자표시

'IT To do and To was' 카테고리의 다른 글

22년 3월 25일_js파트 수업 + 웹디 공부  (0) 2022.03.25
22년 3월 24일_ D-2.. 불안하다  (0) 2022.03.24
22년 3월 22일_웹 class 시작  (0) 2022.03.22
22년 3월 21일_깃 약간의 설명, 웹 디자인 기능사...공부  (0) 2022.03.21
22년 3월 20일_웹페이지 제작, c언어 2교시  (0) 2022.03.20

'IT To do and To was' 관련글

티스토리툴바