본문 바로가기
ICIA 수업일지

2021.07.20 수업일지

by 주성씨 2021. 7. 24.

- HTML(HyperText Markup Language) review

 

01_File Tag)

    <!-- fieldset ; 묶음 -->
    <!-- size ; 박스 사이즈 지정 -->
    <!-- maxlength ; 문자 최대 갯수 지정 -->
    <!-- disabled ; 입력을 못하게 막아둠 -->
    <!-- value ; 선 입력값을 지정해줌 -->
    <!-- readonly ; 읽거나 드래그 할 수 있지만 훼손은 안됨
    disabled와 같이 못씀 (disabled="disabled") -->
    <!-- placeholder ; 입력란에 해당 칸의 용도를 설명해줌 -->
    <fieldset>
        <legend>text & password & search</legend>
        ID : <input type="text" value="Lee" maxlength="10" placeholder="아이디"><br>
        PW : <input type="password" maxlength="10" placeholder="비밀번호"><br>
    </fieldset>

 

    <!-- checkbox ; 체크 표시 칸을 생성 -->
    <!-- name ; 서버에 전송하기 위한 이름. 이름은 동일하게 설정 -->
    <!-- value ; 서버에 전송하기 위한 값 -->
    <!-- radio ; 오직 하나만 체크 가능. only one -->
    <!-- checked ; 기본 체크값 설정 -->
    <fieldset>
        <legend>checkbox & radio</legend>
        <input type="checkbox" name="Hobby" value="movie" checked>영화<br>
        <input type="checkbox" name="Hobby" value="music">음악<br>
        <input type="checkbox" name="Hobby" value="travel">여행<br>
        <hr>
        <input type="radio" name="gender" value="male" checked>남자<br>
        <input type="radio" name="gender" value="female">여자<br>
    </fieldset>

 

    <!-- hidden ; 정보는 존재하지만 시각적으로 보이지 않게 숨긴다 -->
    <fieldset>
        <legend>hidden & text</legend>
        First Name : <input type="hidden" name="fn" value="Joo-Sung"><br>
        Last Name : <input type="hidden" name="ln" value="Lee"><br>
    </fieldset>

 

    <!-- file ; 업로드 폼을 만들어줌 -->
    <!-- multiple ; 파일을 여러게 업로드할 수 있게 설정 -->
    <fieldset>
        <legend>File tag</legend>
        <form action="upload">
            select file : <input type="file" name="img" multiple>
            <input type="submit">
        </form>

    </fieldset>

 

    <fieldset>
        <legend>button image</legend>
        <form action="login">
            First Name : <input type="text" name="fn" value="Joo-Sung"><br>
            Last Name : <input type="text" name="ln" value="Lee"><br>
            <!-- <button>전송</button> ; 이렇게 써도 되지만 -->
            <input type="image" src="btn.png" alt="버튼" width="50">
        </form>
    </fieldset>

 

    <!-- id ; 수많은 element 중에 특정값을 특정하기 위한것. 유니크해야한다. -->
    <fieldset>
        <legend>select option</legend>
        <form action="">
            <!-- select 부모 option 자식 -->
            <!-- selected 특정 select를 고정하고 싶을때 -->
            <!-- multiple ; 다중 선택 -->
            <select name="cars" id="cars" multiple>
                <option value="Volkswagen">VW</option>
                <option value="MercedesBenz" selected>BZ</option>
                <option value="Audi">AD</option>
                <option value="BMW">BW</option>
            </select>
            <input type="submit" value="전송">
        </form>
    </fieldset>

 

    <fieldset>
        <legend>color</legend>
        색상 선택 : <input type="color" name="favcolor"><br>
        <input type="submit" value="전송">
    </fieldset>

 

    <fieldset>
        <legend>date & month</legend>
        <!-- date ; 달력으로 날짜 선택 -->
        date : <input type="date" name="bday"><br>
        <!-- month ; 달력으로 월까지만 선택 -->
        month : <input type="month" name="bdaymonth"><br>
        <!-- datetime-local ; 시간까지 선택 가능 -->
        birthday : <input type="datetime-local" name="bdaytime"><br>
    </fieldset>

 

    <fieldset>
        <form action="">
            <!-- submit 버튼일때 입력값 요구 메시지 나옴 -->
            <!-- required ; 필수적으로 입력하게 설정 -->
            ID : <input type="text" name="id" required><br>
            PW : <input type="text" name="password" required><br>
            <!-- email ; 이메일 유효성 검사 설정 -->
            E-Mail : <input type="text" name="email"><br>
            <input type="submit" value="제출">
        </form>
    </fieldset>

 

    <fieldset>
        <legend>number & range</legend>
        <form action="">
            <!-- value ; 값 고정 -->
            NUMBER(1~10) : 
            <input type="number" id="number" name="qty" min="1" max="10" value="5"><br>
            <!-- step ; 증감 범위 고정 -->
            RANGE(0~10) : 
            <input type="range" id="range" name="point" min="0" max="10" value="0" step="2"><br>
            <input type="button" value="전송" onclick="valueinfo()">
        </form>
    </fieldset>

    <script>
        // javascript 영역
        // number & range에서 선택했던 값을 서버전송전에 화면에 출력
        function valueinfo() {
            // document 현재 웹페이지 문서
            // getElementById 고유한 유니크한 id값을 출력
            // var 변수
            var num1=document.getElementById("number").value;
            var num2=document.getElementById("range").value;
            alert("number : "+num1+"\n range : "+num2);
        }
    </script>

 

    <fieldset>
        <legend> text, time, reset, url & reset </legend>
        <form action="">
            ID : <input type="text"><br>
            TIme : <input type="time"><br>
            URL : <input type="url"><br>
            WEEK : <input type="week"><br>
            <input type="submit" value="전송">
            <input type="reset" value="취소">
        </form>
    </fieldset>

 

02_form)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <!-- onsubmit="return check()" submit 검증 -->
    <form action="url" name="loginfrm" method="POST" onsubmit="return check()">
        ID : <input type="text" id="id" name="id"><br>
        PW : <input type="text" id="password" name="password"><br>
        <!-- 서버 전송 버튼 -->
        <!-- submit 검증은 form 란에 작성 -->
        <input type="submit" value="submit로그인">
        <!-- 일반버튼 -->
        <input type="button" value="button로그인" onclick="check()">
    </form>

    <script>
        // id, pw 유효성 검사
        function check() {
            var id = document.getElementById("id").value;
            console.log(id);
            var pw = document.getElementById("password").value;
            console.log(pw);
            if (id == "" || pw == "") {
                //서버로 보내지 않음
                return false;
            }
            //서버로 보냄
            return true;
            // form 데이터를 서버로 전송
            // document.loginfrm.submit();
        }
    </script>
</body>

</html>

 

 

위와 같이 나오면 잘 들어간 것이다.

 

03_select)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <legend>select option</legend>
    <form action="">
        <!-- select 부모 option 자식 -->
        <!-- selected 특정 select를 고정하고 싶을때 -->
        <!-- multiple ; 다중 선택 -->
        <select name="cars" id="cars">
            <option value="Volkswagen">VW</option>
            <option value="MercedesBenz" selected>BZ</option>
            <option value="Audi">AD</option>
            <option value="BMW">BW</option>
        </select>
        <input type="submit" value="전송">
    </form>

    <!-- 옵션에서 선택하고 싶은 값이 없는 경우 -->
    <form action="url">
        <input list="browsers" name="browser">
        <datalist id="browsers">
            <option value="Volkswagen">볼크스바겐</option>
            <option value="MercedesBenz">메르세데즈밴츠</option>
            <option value="Audi">아우디</option>
            <option value="BMW">비엠떠블유</option>
        </datalist>
        <button>전송</button>
    </form>
</body>

</html>

select와 다르게 옵션에 있는 값 이외에 데이터를 입력할 수 있다.

 

현대, 기아를 입력해보았다. 해당 값은 브라우저에 있는 쿠키값이니 신경쓰지 않아도 된다.

 

- CSS (Cascading Style Sheets) ; html을 보다 세련되게 표현

현직에서는 다르겠지만 간이 프로젝트 진행시 기능설계 후 하는게 좋다.

1. 해당 태그에 직접 설정 - 인라인 CSS - line에 직접 설정하는 것
라인에 직접하는 작업이라 번거로울 수 있다.

2. html 문서 내에 따로 설정 - head tag 안에 style tag를 통해서 설정한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS TEST</title>
    <!-- head tag 안 style tag에 아래와 같이 설정한다. -->
    <style>
        body{background-color: blueviolet;}
        h1{color:blue;}
        p{color:blue;}
    </style>
</head>
<body>
    <!-- Inline CSS ; 라인에 직접 CSS -->
    <h1 style="color: red;">This is a head1</h1>
    <p>This is a Paragraph1 </p>
    <h1>This is a head2</h1>
    <p>This is a Paragraph2</p>
</body>
</html>

3. CSS 파일을 외부에서 불러옴

myStyle.css

body {
    background-color: blueviolet;
}

h1 {
    color: blue;
}

p {
    color: blue;
}

 

01_test.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS TEST</title>
    <!-- head tag 안 style tag에 아래와 같이 설정한다. -->
    <link rel="stylesheet" href="myStyle.css">
</head>

<body>
    <!-- Inline CSS ; 라인에 직접 CSS -->
    <h1>This is a head1</h1>
    <p>This is a Paragraph1 </p>
    <h1>This is a head2</h1>
    <p>This is a Paragraph2</p>
</body>

</html>

 

단위가 있다면 단위를 반드시 지정해줘야한다.

- selector 자리에 h1만 오는것이 아니라 ID(유니크), Class가 오기도 한다.

 

02_selector01

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Selector test</title>
    <style>
        h3 {
            color: red;
        }

        b {
            color: yellow;
            background-color: yellowgreen;
        }

        #param1 {
            color: aliceblue;
        }

        .bClass {
            font-size: xx-large;
            color: antiquewhite;
        }
        /* 특정 태그에 있는 한놈만 지정해서 스타일 지정하고 싶을때 */
        /* 이런 방법도 있지만 id를 이용하는게 더 효율적이다. */
        p.bClass {
            font-size: xx-small;
            color: red;
        }
        /* 특정 태그에 있는 한놈만 지정해서 스타일 지정하고 싶을때 */
        /* text-align: center ; 가운데로 정렬 */
        p.pClass {
            text-align: center;
        }
    </style>
</head>

<body>
    <h3>제목 h3 태그</h3>
    <!-- id는 유니크해야 한다. 중복값 X -->
    <b id="param1">아이디가 있는 요소</b><br>
    <!-- class는 중복이 가능하다. -->
    <b class="bClass">클래스가 bClass</b><br>
    <b class="bClass">클래스가 bClass</b><br>

    <p class="bClass">클래스는 중복될 수 있다.</p>
    <p class="pClass">클래스는 중복될 수 있다.</p>
    <p>클래스는 중복될 수 있다.</p>
</body>

</html>

 

02_selector02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Seletor test2</title>
    <style>
        h1,h2,p {
            text-align: center;
            color: red;
        }
    </style>
</head>
<body>
    <h1>Hello world</h1>
    <h2>Goodbye world</h2>
    <p>this is a Paragraph</p>
</body>
</html>

 

02_selector03

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Selector test3</title>
    <style>
        /* h3를 제외(~)한 동일계층의 div */
        h3~div {
            font-size: 20px;
            color: rosybrown;
        }

        /* h3를 제외한 동일계층의 div 중 1개 */
        h3+div {
            font-weight: 900;
            color: black;
        }

        /* list의 자식중에 첫번째 */
        li:nth-child(1) {
            color: red;
        }

        /* list의 자식 중 첫번째 */
        li:first-child {
            color: red;
        }

        /* list의 자식 중 마지막 */
        li:last-child {
            color: blue;
        }

        /* list의 자식 중 짝수. odd 홀수 */
        li:nth-child(even) {
            color: brown;
        }

        /* 반응 선택자 */
        div:hover {
            width: 300px;
            height: 30px;
            background-color: red;
            color: yellow;
        }
        input{
            background-color: lightgray;
        }
        /* focus 될때 색이 변경되게 설정 */
        input:focus{
            background-color: lightsteelblue;
        }
    </style>
</head>

<body>
    로그인 영역<br>
    <div>
        ID : <input type="text"><br>
        PW : <input type="password">
    </div>
    <ul>
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
        <li>jquery</li>
    </ul>

    <!-- division -->
    <h3>DIV 태그들</h3>
    <div>DIV01</div>
    <div>DIV02</div>
    <div>DIV03</div>
    <div>DIV04</div>
    <div>DIV05</div>
    <div class="over"> 반응선택자 </div>
</body>

</html>

※ 참고
even number : 짝수
odd number : 홀수

 

02_selector04

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Selector test4</title>
    <style>
        /* ul tag 중 li tag만 선택 */
        /* 공백 : 후손(자식포함모두) 선택자 */
        /* > : 자식 선택자 */
        ul li {
            color: red;
        }

        ul>li {
            color: blue;
        }

        /* 특정 아이디를 가지는 tag의 자손 범위 설정 */
        #lecture li {
            border: 1px solid red;
            color: blue;
            margin: 50px;
        }
        
        ul,ol {background-color: yellowgreen;}
    </style>
</head>

<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>

    <ol id="lecture">
        <li>HTML</li>
        <li>CSS
            <ol>
                <li>아이디 선택자</li>
                <li>클래스 선택자</li>
            </ol>
        </li>
        <li>JavaScript</li>
    </ol>

</body>

</html>

 

02_selector05

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Selector test5</title>
    <style>
        li {
            color: red;
        }

        #idsel {
            color: blue;
        }

        .classsel {
            color: green;
        }

        .classX {
            color: yellow;
        }
    </style>
</head>

<body>
    <ul>
        <li style="color:powderblue">html</li>
        <li id="idsel">css</li>
        <li class="classsel">javascript</li>
        <li class="classX" class="classsel">jquery</li>
    </ul>
    <h3>선택자 우선순위(cascading)</h3>
    <ol>
        <li>sytle attribute - Inline CSS</li>
        <li>id 선택자 - 금</li>
        <li>class 선택자 - 은</li>
        <li>tag 선택자 - 동</li>
    </ol>

</body>

</html>

 

02_selector06

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* color : anything !important ; 우선순위를 가장 최상위로 추천 안함 */
        h1 {
            color: red;
        }

        h1 {
            color: blue;
        }

        div {
            color: coral;
        }

        #example {
            color: gold;
        }

        .examples {
            color: silver;
        }

        #example.examples {
            color: red;
        }

        /* 반응 선택자 */
        /* 클릭 전 */
        a:link {
            color: sandybrown;
            text-decoration: none;
        }
        /* 클릭 후 */
        a:visited {
            color: orange;
            text-decoration: none;
        }
        /* 마우스 호버 */
        a:hover{
            color: orangered;
            text-decoration: underline;
        }
        /* 링크 활성화시 */
        a:active {
            color: black;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div id="example" id="testid" class="examples">example</div>
    <h1>소스 순서에 따른 우선순위</h1>
    <a href="http://www.google.com">구글</a>
</body>

</html>

- 마우스 클릭 시 글자 색 및 배경색 활성화는 위의 순서가 중요하니 기억해두도록 하자.

저작자표시

'ICIA 수업일지' 카테고리의 다른 글

2021.07.22 수업일지  (0) 2021.07.24
2021.07.21 수업일지  (0) 2021.07.24
2021.07.19 수업일지  (0) 2021.07.24
2021.07.16 수업일지  (0) 2021.07.17
2021.07.15 수업일지  (0) 2021.07.17

관련글

티스토리툴바