html (2)

프로그래밍/수업일지

수업일지 33일차 (23/11/6)

728x90

 

수업내용 정리 (VSCode - CSS)

 

1. 해당 태그에 직접 설정

<body>
    <!-- 인라인 방식: 다른 것보다 우선순위가 높지만 관리가 힘들다.
        같은 디자인을 입력하고 싶을 때 코드가 길어지고 귀찮음 -->
    <div style="color:rgb(118,118,180); margin: 40px; border: 1px solid rgb(25,25,112);">영역</div>
</body>
</html>
  • 인라인 방식
  • 다른 것보다 우선 순위가 높지만 관리가 힘들다.
  • 같은 디자인을 여러번 입력하고 싶을 때, 코드가 길어지고 귀찮다.

 

2. css 링크로 설정

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/myStyle.css">
    <!-- rel: 링크에 대한 관계 -->
</head>
<body>
    <div>영역2</div>
</body>
</html>
/* css */
div{
    color: rgb(118,118,180);
    margin: 100px;
    padding: 40;
    border: 1px solid rgb(25,25,112);
}
  • 링크를 직접 타이핑해도 되지만 ./ 치면 해당 폴더의 파일들이 뜨니 여기서 선택하는 것이 편하다.

 

 

3. 선택자

<body>
    <div>
        <ul>
            <li>사과</li>
            <li>딸기</li>
            <li id="orange" class="orange">오렌지</li>
        </ul>
        <div>당근</div>
        <p>토마토</p>
        <span class="orange">오렌지</span>
    </div>
</body>

 

 3-1) 기본 선택자

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 전체 선택자 */
        *{color: rgb(118,118,180)}
        /* 태그 선택자 */
        li{color: rgb(25,25,112);}
        /* 클래스 선택자 */
        .orange{color: rgb(0,0,0);}
        /* 아이디 선택자 */
        #orange{color: rgb(255,255,255);}
    </style>
</head>

  • 아이디>클래스>태그>전체 순으로 우선 순위를 가진다.
  • 밑으로 내려가면 동일한 부분은 덮어쓰기한다.

 

 3-2) 복합 선택자

    <style>
        /* 일치 선택자: 순서 바뀌면 안 됨 */
        /* span태그이면서 class가 oragne인것 / 띄어쓰기하면 전혀 다른 의미가 되어버림 */
        span.orange{
            color: rgb(25,25,118);
        }
        /* 자식 선택자 */
        ul>.orange{color: rgb(118,118,180);}
        /* 하위(후손) 선택자: 자식선택자보다 많이 사용 / div >후손< 중 클래스가 orange인 */
        div .orange{color: aliceblue;}
    </style>

  • 띄어쓰기에 주의할 것

 

 3-3) 복합 선택자2

<body>
    <ul>
        <li>딸기</li>
        <li>수박</li>
        <li class="orange">오렌지</li>
        <li>망고</li>
        <li>사과</li>
      </ul>
</body>
    <style>
        /* 인접 형제 선택자: .orange의 다음 형제 요소를 하나 선택 */
        .orange+li{
            color: rgb(118,118,180);
        }
        /* 일반 형제 선택자: .orange의 다음 형제 요소들을 선택 */
        .orange~li{
            color: rgb(25,25,120);
        }
    </style>

 

 

 

4. 선택자

 4-1) 가상클래스

.box{
    width: 100px;
    height: 100px;
    background-color: rgb(118, 118, 180);
    transition: 1s;
}
/* hover: 마우스를 올렸을때 */ /*hover, focus는 외울것*/
.box:hover{
    width: 300px;
    background-color: rgb(210, 222, 240);
}
.box:active{
    width: 300px;
    background-color: aliceblue;
}
.box:focus{
    width: 300px;
    background-color: aquamarine;
}
a:hover{
    color: rgb(118, 118, 180);
}
a:active{
    color: rgb(210, 222, 240);
}
a:active{
    color: aliceblue;
}
input:focus{
    background-color: azure;
}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/main.css">
</head>

<body>
    <div class="box" tabindex="1">tabindex속성으로 foucs 선택자 사용</div> <!--tabindex -1 : tab키 불가-->
    <a href="https://www.naver.com">네이버</a><br>
    <input type="text" name="id" />
</body>

 

 4-2) 가상클래스2

<body>
    <div class="fruits">
        <span>딸기</span>
        <span>수박</span>
        <div>오렌지</div>
        <p>망고</p>
        <h3>사과</h3>
      </div>
</body>
        /* .fruits의 후손 중에서 span이 첫 자식이면 선택 */
        .fruits span:first-child{
            color: rgb(118,118,180);
        }
        /* .fruits의 후손 중에서 div가 첫 자식이면 선택 (없음) */
        .fruits div:first-child{
            color: rgb(25,25,112);
        }
        /* .fruits의 후손 중에서 h3이 첫 자식이면 선택 */
        .fruits h3:first-child{
            color: rgb(155, 180, 222);
        }
        /* .fruits의 후손 중에서 두번째 자식을 선택 */
        .fruits *:nth-child(2){
            color: rgb(151, 199, 159);
        }
        /* .fruits의 후손 중에서 짝수번째 자식을 선택 */
        /* n은 0,1,2,....., 짝수번째 선택 */
        .fruits *:nth-child(2n){
            color: rgb(228, 166, 214);
        }
        /* .fruits의 후손 중에서 홀수번째 자식을 선택 / 1+2n 안 됨 */
        .fruits *:nth-child(2n+1){
            color: rgb(228, 166, 214);
        }
        /* .fruits의 후손 중에서 span이 아닌 자식 선택(부정선택자) */
        .fruits *:not(span){
            color: rgb(228, 166, 214);
        }

 

 4-3) 속성

<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>Document</title>
    <style>
        /* 속성 선택자 */
        [disabled] {color: red;}

        [type] {color: blue;}

        /*따옴표 쓰는 것을 권장 */
        [type="password"] {color: aqua;}

        /*data속성 선택자 */
        [data-fruit-name] {color: coral;}

        button,
        [type="button"] {color: brown;}
    </style>
</head>

<body>
    <input type="text" value="cha">
    <input type="password" value="1234">
    <input type="text" value="ABCD" disabled>
    <span data-fruit-name="apple">사과</span>
    <button>btn1</button>
    <input type="button" value="btn2">
</body>

 

 4-4) 스타일 상속

<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>Document</title>
  <style>
    .animal {
      color: red;
    }

    /*강제 상속 css  */
    .parent {
      width: 300px;
      height: 200px;
      background-color: red;
    }

    .child {
      width: 100px;
      height: inherit;
      /*부모크기를 강제 상속함*/
      background-color: inherit;
      /*부모색상을 강제 상속함*/
      position: fixed;
      top: 100px;
      right: 10px;
    }
  </style>
</head>

<body>
  <!-- 상속되는 CSS 속성들
   -모든 글자/문자 관련 속성들!
   (모든 글자/문자 속성은 아님 주의!)
   font-style: 글자 기울기
   font-weight: 글자 두께
   font-size: 글자 크기
   line-height: 줄 높이(간격)
   font-family: 폰트(글꼴)
   color: 글자 색상
   text-align: 정렬
  ... -->
  <div class="ecosystem">생태계
    <div class="animal">동물
      <div class="tiger">호랑이</div>
      <div class="lion">사자</div>
      <div class="elephant">코끼리</div>
    </div>
    <div class="plant">식물</div>
  </div>
  <H3>강제 상속</H3>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>

 

 4-5) 우선순위

<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>Document</title>
  <style>
    div{color: red !important;  } /* 무한메달*/
    #color_yellow{color:yellow;}  /* 금메달*/
    .color_green{color:green;}   /* 은메달*/
    div{color:blue;}             /* 동메달*/
    *{color:darkblue;}          /* 참가메달*/
    body{color:violet;}         /* 상속은 메달없음*/
  </style>
</head>

<body>
  <!-- 점수가 높은 선언이 우선함
  점수가 같으면 가장 마지막에 해석된 선언이 우선함 -->
  <div id="color_yellow" class="color_green"
    style="color: orange;">  <!--인라인: 특메달-->
    Hello world!
  </div>
</body>

 

 4-6) 우선순위2

<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>Document</title>
  <style>
    div{ font-size:70px;   }
    div.hello{color:green;}
    .hello{color:red !important;} /*인라인CSS와 함께 권장하지 않음*/
    *{ /*참가상*/   }
    div{ /*동메달*/   }
    .hello{/*은메달*/    }
    #hello{ /*금메달*/   }
  </style>
</head>

<body>
  <div id="hello" class="hello" style="color: orange">Hello World!</div>
</body>

 

 

5. 너비

<body>
 <div>DIV</div>
 <span>SPAN</span>
 <span>SPAN</span>
 <hr>
 <div class="parent">
  <div class="child"></div>
 </div> 
</body>
  <style>
     /* div의 기본값: width:auto; 브라우저 너비만큼 
        div의 기본값: height:auto; 컨텐츠 높이만큼 */
     /* div{
      width: 100px;
      height: 100px;
      background-color: orange; 
    }  */

    /* span의 기본값: width:auto; 컨텐츠(글자) 너비만큼 
       span의 기본값: height:auto; 기본값: 컨텐츠(글자) 높이만큼
       span은 보통 글자를 제어하므로 width, height적용되지 않음*/
    /* span{
       width: 100px; 
      height: 100px;
      background-color: aqua; 
    }*/

    /**** 위의 div css 주석후 실행 ****/
    .parent{
      /* 자식에서 max width 설정시 부모width는 auto 또는 크게 설정할것*/
      width:auto; 
      /* 자식에서 min width 설정시 부모width는 작게 설정할것*/
      /* width: 300px;  */
      height: 200px;
      background-color: blue;
    } 
    /*자식 div가 위로 배치됨*/
    .child{
      /*max(min)-width설정시 삭제 또는 width:auto로 설정*/
      /* width: 300px; */
      /*부모 너비(높이)를 벗어나지 않음, 기본값: none */
      max-width: 500px ;
      /*부모 너비(높이)를 벗어날 수 있음, 기본값: 0 */
      /* min-width: 400px; */
      height: 100px;
      background-color: yellow;
    }
  </style>

 

 

6. CSS 단위

<body>
  <div class="parent">
    <div class="child"></div>
   </div> 
</body>
  <style>
    /* px, %, em(요소글꼴의 크기), rem(root(html)요소 글꼴의 크기), vw,vh)
    0px==0%==0em==0rem==0  따라서 단위를 붙이지 않는다. */
    html{
      /* font-size: 16px; 브라우저 기본값 후손으로 상속됨*/
    }
    .parent{
      width: 300px; 
      height: 200px;
      background-color: blue;
      /* font-size: 10px; */
    }
    .child{
      /* width: 200px; */
      /* width: 50%; */
      /* width: 20em;   글꼴크기*20  */
      width: 20rem;   /*root(html)태그 글꼴크기*20  */
      height: 100px;
      background-color: yellow;
    }
  </style>

 

 

7. 여백

<body>
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>

 7-1) 외부

  <style>
    .container .item{
      width: 100px;
      height: 100px;
      background-color:  orange;
      border: 4px solid red;
      /* 브라우저가 여백을 계산, 가로너비가 있을때 가운데 정렬됨 */
      /* margin: 0;  기본값 */
      /* margin: auto;   */
      /* 다른 여백에서도 사용되는 규칙 */
      /* margin-top,margin-bottom,margin-left,margin-right:10px */
      /* margin: 10px;  */
      /*top,bottom:10px, left,right:20px */
      /* margin: 10px 20px ; */
      /* top:10px, left,right:20px, bottom:30px  */
      /* margin: 10px 20px 30px; */
      /* top:10px, right:20px, bottom:30px, right:40px(시계방향) */
      /* margin: 10px 20px 30px 40px; */
      /* 음수값으로 겹치게 할수 있음 */
      /* margin:-20px 10px; */
    }
  </style>

 

 7-2) 내부

  <style>
    .container .item{
      width: 100px;
      height: 100px;
      background-color: orange;
      border: 4px solid red;
    }
    .container .item:first-child{
      /* margin과 같은 방식으로 여백지정 */
      padding: 20px;
    }
  </style>

 

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

'프로그래밍 > 수업일지' 카테고리의 다른 글

수업일지 35일차 (23/11/8) - VSCode (CSS)  (0) 2023.11.08
수업일지 34일차 (23/11/7)  (0) 2023.11.07
수업일지 32일차 (23/11/3) - VSCode (html)  (0) 2023.11.04
수업일지 31일차 (23/11/2) - Jdbc  (1) 2023.11.02
수업일지 30일차 (23/11/1) - Jdbc  (2) 2023.11.01
프로그래밍/수업일지

수업일지 32일차 (23/11/3) - VSCode (html)

728x90

 

수업내용 정리 (VSCode - html)

 

0. 시작

더보기
  • 새 파일을 누르면 파일 이름을 적을 수 있게 되는데 이때 파일 이름 뒤에 파일 형식을 꼭 적어야 한다.

 

 

  • 아무것도 없는 상태에서 !(느낌표)를 치고 enter를 치면 자동으로 기본값이 생성된다.
  • html>head+body / html>(head+body) 이라고 치고 enter를 치면 html 안에 head와 body가 생성된다. (부모>자식 / 부모>자식+자식 으로 생각하면 된다.)

 

  • <nn>, </nn> : 시작, 끝 태그 | <nn/> : 시작과 끝 태그

 

 

1. H Tag

  • 강조
  • 1~6까지 가능하고, 숫자가 클수록 글자의 크기가 작아진다.
<head>
	<title>제목</title>
</head>
<body>
	<h1>큰 제목</h1>
	<h2>두번째 큰 제목</h2>
	<h3>세번째 큰 제목</h3>
</body>

 

 

2. A Tag

  • 하이퍼 링크 태그 / 링크 이동에 사용
<body>
	<a href="http://www.naver.com" target="_blank">네이버</a>
</body>
  • href: 링크 주소 입력. 인터넷 주소가 아닌 파일 주소도 가능하다. (./ : 해당 파일 위치의 파일들을 작성할 수 있다.)
  • target: 링크를 열 때 해당 창을 바꿀지, 아니면 새 창으로 띄울지 정함. target을 안 적으면 해당 창을 바꾸는 것이 기본 설정이다. (_blank: 새 창)
  • >네이버< : 네이버 자리가 링크를 이동할 때 보여지는 이름

 

 

2. Table

  • caption: 테이블 제목
  • tr: 행
  • th: 열 / 칼럼 글자를 굵게 만듦
  • td: 열 / 일반 데이터
  • colspan / rowspan: 열 / 행 합침
    <table border="1" align="center" width="200" hight="150">
        <caption>명단</caption>
        <thead>
            <tr align="center">
                <th>firstName</th>
                <th>lastName</th>
                <th>Point</th>
            </tr> <!-- tr>th*3 -->
        </thead>
        <tbody>
            <tr align="center">
                <td>홍길동</td>
                <td>길동</td>
                <td>100</td>
            </tr> <!-- tr>td*3 -->
            <tr>
                <td>이</td>
                <td>순신</td>
                <td>100</td>
            </tr> <!-- tr>td*3 -->
            <tr>
                <td>신</td>
                <td>사임당</td>
                <td>100</td>
            </tr> <!-- tr>td*3 -->
        </tbody>
    </table>

  • table 안에 tr, tr 안에 th와 td를 넣어 사용한다.
  • tr>td*3 실행 시 행 하나, 열 세 개가 자동 생성된다.
  • table에 붙어있는 border, align 등은 원래 head에서 style을 통해 넣어야 하지만 연습 겸 table에 넣었다.

 

<table border="1" align="center" width="200" hight="150">
    <caption>명단</caption>
    <thead>
        <tr align="center">
            <th colspan="2">Name</th>
            <!-- <th>lastName</th> -->
           <th>Point</th>
        </tr> <!-- tr>th*3 -->
    </thead>
    <tbody>
        <tr align="center">
            <td colspan="2">홍길동</td>
            <!-- <td>길동</td> -->
            <td rowspan="3">100</td>
        </tr> <!-- tr>td*3 -->
        <tr>
            <td>이</td>
            <td>순신</td>
            <!-- <td>100</td> -->
        </tr> <!-- tr>td*3 -->
        <tr>
            <td>신</td>
            <td>사임당</td>
            <!-- <td>100</td> -->
        </tr> <!-- tr>td*3 -->
    </tbody>
</table>

  • colspan이나 rowspan을 사용하면 합쳐지는 위치의 다른 칸은 지워줘야 한다.

 

 

3. List

  • ul - 순서가 없는 리스트
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{padding: 10px; border: 1px solid rgb(118, 118, 180);}
    </style>
</head>
<body>
    <h2>ul - 순서가 없는 리스트</h2>
    <ul style="list-style-type: none;"> <!-- css 속성 = css문법-->
        <a href="http://www.naver.com" target="_blank"><li>html</li></a>
        <a href="./02_table.html" target="_blank"><li>css</li></a>
        <li><a href="http://www.chrome.com">java</a></li>
        <a href="http://www.nexon.com" target="_blank"><li>javaScript</li>
        <li>jQuery</li></a>
    </ul>
</body>

  • ul>li*5 실행 시 하나의 리스트에 5칸이 생긴다.
  • a 태그 를 통해 링크를 넣을 수 있다.
  • a 태그를 li 안에 넣으면 글씨만 링크로 이동할 수 있도록 하고, 밖에 넣으면 네모칸 전체가 링크로 이동할 수 있도록 한다.
  • 링크는 아무거나 넣었다.

 

  • ol
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            list-style-type: none;
            float: left;
            padding: 20px;
            background-color: rgb(118, 118, 180);
        }
        li:hover{
            background-color: rgb(20, 20, 118);
        }
    </style>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JAVASCRIPT</li>
        <li>JQUERY</li>
    </ul>
</body>

  • style을 통해 네모 칸의 크기를 지정할 수 있다.
  • li:hover을 통해 칸에 마우스가 올라가면 색이 바뀌게 설정할 수도 있다.

 

  • li - 순서가 있는 리스트
<body>
    <h2>ol - 순서가 있는 리스트</h2>
    <ol style="list-style-type: lower-roman;">
        <li>html</li>
        <li>css</li>
        <li>js</li>
        <li>jq</li>
    </ol>
</body>

  • ol>li*4 실행 시 하나의 리스트에 4까지의 순서가 생긴다.
  • list-style-tye으로 순서를 다르게 표기할 수 있다. 설정 안 할 시 기본타입(1. 2. 3.)으로 나온다.

 

  • 더블 리스트
<body>
    <ul>
      <li>Java</li>
      <li>DB</li>
      <ul>
        <li>오라클</li>
        <li>MySQL</li>
      </ul>
      <li>Front-End</li>
      <ul>
        <li>html</li>
        <li>css</li>
        <li>js</li>
        <li>jq</li>
      </ul>
    </ul>
  </body>

  • list 안에 list를 넣어 더블 리스트를 만들 수도 있다.

 

 

4. i - Frame

  • 다른 url의 페이지를 삽입한다.
<body>
    <h1>iFrame.html</h1>
    <iFrame src="06_menuList.html" frameborder="1" width="500"></iFrame>
</body>

  • 입력한 링크의 페이지를 보여준다.

 

 

5. Input

  • 입력 폼 (<input type="n" ~~></form> n 자리에 타입을 적는다.)
  • text: 텍스트를 적는 칸을 생성
  • password: 텍스트를 적으면 암호화되어 보인다.
    <fieldset>
        <legend>text&password&hidden&button</legend>
        <form action="access" method="get">
            아이디: <input type="text" id="id" name="userId" value="aa"> <br>
            비밀번호: <input type="password" id="pw" name="userPw"> <br>
            hidden: <input type="hidden" name="point" value="100">
            <input type="submit" value="로그인">
            <!-- method="get"  // 보안처리 안 함
                file:///C:/data/vsCode/HTML/access?userId=aa&userPw=aa&point=100
                /요청url/쿼리스트링: ?파라미터명=값&파라미터명=값&파라미터명=값 -->
            <!-- method="post" // 보안처리
                file:///C:/data/vsCode/HTML/access -->
            <button>서버전송</button>   <!--서버전송버튼-->
            <input type="button" value="그냥버튼" onclick="alert('경고창')">
            <input type="button" onclick="showIdPw()" value="아이디, 비번 출력">
        </form>
    </fieldset>
    <script>
        // 자바스크립트js
        function showIdPw(){
            let id=document.getElementById('id');
            console.log('id: ', id.value);
            let pw=document.getElementById('pw').value;
            console.log('pw: ', pw); // 오브젝트와 적을때는 콤마(,)를 사용해야함
        }
    </script>

  • id: 중복이 안 되고, 중복해서 적으면 처음 적은 애만 적용된다. 서버(파라미터) 전달용
  • name / value: 중복이 가능하다. 식별용

 

  • checkbox: fieldset 내의 타입 checkbox 중 택 다
  • radio: fieldset 내의 타입 radio 중 택 1
    <fieldset>
        <legend> checkbox & radio & label</legend>
        <!--선택사항(택 다)-->
        <input id="apple" name="fruit" type="checkbox" value="사과">
        <label for="apple">Apple</label>
        <input id="grape" name="fruit" type="checkbox" value="포도">
        <!--fruit라는 파라미터에 체크한값(value) 저장-->
        <label for="grape">Grape</label> <br>

        <!--택 1-->
        성별: <input type="radio" name="gender" value="male"> 남자
        <input type="radio" name="gender" value="female" checked> 여자
    </fieldset>

  • label이 아니라 input 뒤에 이름을 붙여도 똑같이 나오지만 체크박스를 클릭해야만 체크가 되므로 불편하다. label로 묶으면 글자를 클릭해도 체크박스에 체크가 되므로 사용자가 편하게 사용할 수 있게 된다.
  • chexked: 기본적으로 선택되게 만든다.

 

  • file: 파일을 올린다.
    <fieldset>
        <legend>file</legend>
        <input type="file" name="attach">
        <!--파일 선택-->
    </fieldset>

 

  • select: select 내 option 중 택 1
    <fieldset>
        차: <select name="cars">
            <!--선택-->
            <option value="default">선택하시오</option>
            <option value="volvo">볼보</option>
            <option value="kia">기아</option>
            <option value="porshe">포르쉐</option>
            <option value="benz">벤츠</option>
        </select>
    </fieldset>

  • selected / default: 기본적으로 선택되게 만든다.

 

  • submit: 값을 서버에 전송하는 버튼
    <fieldset>
        <legend>e-mail & url</legend>
        <form action="test">
            email: <input type="email" name="email"> <br>
            url: <input type="url"> <br>
            <input type="submit" value="전송">
            <!--form 태그 안에 있는 값을 서버에 submit(전송)함-->
        </form>
    </fieldset>

 

 

6. form

<body>
    <form id="frm" name="loginForm" method="get"></form>
    <input type="text" name="id" id="id" placeholder="아이디입력하셈">
    <input type="password" name="pw" id="pw" placeholder="비밀번호입력하셈">
    <button>전송1</button>
    <input type="submit" value="전송2">
    <input type="button" value="버튼" onclick="check()"> <!--검증용-->
</body>
<script>
    function check(){
        let idElem=document.getElementById('id');
        console.dir(idElem);

        let id=idElem.value;
        let pw=document.getElementById('pw').value;
        console.log(id.length, pw.length);

        if(id.length<4 || id.length>6){
            alert('아이디 길이는 4~6자');
            return false;
        }
        let pwLen=pw.length;
        if(pwLen<4 || pwLen>6){
            alert('비밀번호 길이는 4~6자');
            return false;
        }
        document.loginForm.submit();    // name이 loginForm인 것을 서버로 전송
    };
</script>

alert

  • placeholder: 도움말
  • 전송1, 전송2는 서버에 바로 전송한다.
  • 버튼은 일반 버튼을 검증 후 맞으면 서버에 전송하도록 메소드를 사용했다. (주로 사용!)

 

 

전체 피드백

  • html을 할 때마다 내 길이 아닌 것 같다는 생각만 든다..자바가 더 재밌는듯 ㅠㅠ 

 

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

'프로그래밍 > 수업일지' 카테고리의 다른 글

수업일지 34일차 (23/11/7)  (0) 2023.11.07
수업일지 33일차 (23/11/6)  (0) 2023.11.06
수업일지 31일차 (23/11/2) - Jdbc  (1) 2023.11.02
수업일지 30일차 (23/11/1) - Jdbc  (2) 2023.11.01
수업일지 29일차 (23/10/31) - Jdbc  (1) 2023.10.31
1

티스토리툴바