HTML 5 + CSS + 자바스크립트 Day02

주세환·2023년 3월 22일
CSSHTML 5JavaScript
0

HTML 5

목록 보기
2/12

HTML 5

입력 양식 태그

입력양식

<body>
    <!-- 반드시 form 태그 내 입력양식을 넣어야 함! -->
    <form>
        <input type="text" name="search">
        <input type="submit">
    </form>
</body>

fe11_inputs.html이다.

위와 같은 텍스트박스와 제출버튼이 생성된다.

데이터 전달 방식

<body>
 <input type="text" name="userid">
        <input type="password" name="password">
        <input type="submit">
</body>

fe11_inputs.html에 이렇게 추가해보자

이렇게 나오나, 제출을 눌러도 아무런 기능이 없다.

<body>
    <!-- 반드시 form 태그 내 입력양식을 넣어야 함! -->
    <form action="./fe11_inputs.html" method="get">
        <input type="text" name="userid">
        <input type="password" name="password">
        <input type="submit">
    </form>
</body>

fe11_inputs.html을 수정해보자

아이디와 비밀번호 asdf로 하니 url에 userid와 password가 적혀있다.

<body>
    <!-- 반드시 form 태그 내 입력양식을 넣어야 함! -->
    <form action="./fe11_inputs.html" method="post">
        <input type="text" name="userid">
        <input type="password" name="password">
        <input type="submit">
    </form>
</body>

method를 get에서 post로 바꿔보자.

로그인을 해도 ~.html 뒤에 아무것도 적히지 않는다.

입력양식 종류


뿐만 아니라

input에 color, date도 있다.

예제

<body>
    <form action="" method="get">
        <!-- 사용자 입력양식 -->
        <input type="text" name="text" value="text"><br>
        <input type="password" name="pass" value="12345"><br>
        <input type="file" name="profile"><br>
        <input type="checkbox" name="fruit" value="사과">사과
        <input type="checkbox" name="fruit" value="바나나">바나나
        <input type="checkbox" name="fruit" value="파인애플">파인애플<br>
        <input type="radio" name="gender" value="남자">남자
        <input type="radio" name="gender" value="여자">여자<br>
    </form>
</body>

fe12_form_basic.html이다

이렇게 나온다. checkbox는 각각 체크할 수 있고, radio는 gender라는 이름으로 묶었기 때문에 한 번에 하나만 체크할 수 있다. 그렇지 않으면 여러개를 동시에 체크할 수 있다.

        <!-- 히든양식 -->
        <input type="hidden" name="code" value="TH1234">

위 코드를 추가해도

바뀌는 것이 없다. 하지만

페이지 소스 보기를 누르면

추가된 것을 볼 수 있다.

        <!-- 버튼 -->
        <input type="button" value="클릭">
        <input type="reset" value="초기화">
        <input type="submit" value="승인">

버튼을 추가하게 되면,

아래 버튼이 3개 생긴다.
클릭은 아무런 기능이 없다.

초기화는 체크된 항목이 모두 사라진다.


위 상태에서 승인을 누르게되면

url이 바뀐 것이 보인다. submit이 됐다는 뜻이다.

        <input type="image" src="https://placehold.it/100x100">
        <br>
        <img src="https://placehold.it/200x100">

위 코드를 추가해보자.

100x100은 버튼 취급이라 클릭하는 곳마다 x축,y축이 url에 표시된다.
200x100은 단순히 이미지라 아무런 기능이 없다.

<body>
    <form method="get">
        <select name="snack">
            <option>김밥</option>
            <option>떡볶이</option>
            <option>순대</option>
            <option>어묵</option>
        </select>
        
        <input type="submit" value="제출">
    </form>
</body>

fe13_form_select.html이다.

이렇게 콤보박스가 생성된다.

<select name="snack" multiple="multiple">

select에 multiple을 추가하게 되면

Ctrl을 누르며 여러가지를 선택할 수 있다.

<body>
    <form method="get">
        <select name="snack">
            <option value="">--선택--</option>
            <option value="kimbab">김밥</option>
            <option value="ddukboki">떡볶이</option>
            <option value="soondae">순대</option>
            <option value="fishball">어묵</option>
        </select>
        
        <input type="submit" value="제출">
    </form>
</body>

이렇게 수정해보자.

하나씩 선택할 수 있고,

김밥을 선택해서 제출을 해보니 url에 김밥이 아닌 kimbab으로 바뀐 모습을 볼 수 있다.

<body>
    <form method="get">
        <select name="snack" multiple="multiple">
            <option value="">--선택--</option>
            <option value="kimbab">김밥</option>
            <option value="ddukboki">떡볶이</option>
            <option value="soondae">순대</option>
            <option value="fishball">어묵</option>
        </select>
        
        <input type="submit" value="제출">
    </form>
</body>

여기서 다시 multiple을 추가해보자.

이런 모습을 볼 수 있고 선택하지 않은 상태에서 제출을 누르게되면

url에 ? 하나만 추가된 모습을 볼 수 있다.

        <select name="media">
            <optgroup label="html5">
                <option value="mt">Multimedia Tag</option>
                <option value="co">Connectivity</option>
                <option value="da">Device Access</option>
            </optgroup>
            <optgroup label="css3">
                <option value="an">Animation</option>
                <option value="3d">3D Transform</option>
            </optgroup>
        </select>

select, 그 안에 optgroup, option을 추가해보자.

사진처럼 새로 추가된 모습을 볼 수 있다.
이제 선택해서 제출을 눌러보자.

떡볶이와 Device Access를 선택하여 제출을 눌러보았다.
url에 snack select에 포함된 떡볶이의 value값인 ddukboki, media select에 포함된 Device Access의 value값인 da가 추가되었다.

 <input type="email" name="email"><br>

email을 추가하였다.

내 이메일을 적어서 제출을 눌렀다. url에 sefani08%40naver.com이 추가되었다.
%40은 @를 뜻한다.

HTML 5 문서 구조화

공간 분할 태그

<body>
    <div>첫번째</div>
    <div>두번째</div>
    <div>세번째</div>
    <div>네번째</div>
    <div>다섯번째</div>

    <span>1st</span>
    <span>2nd</span>
    <span>3rd</span>
    <span>4th</span>
    <span>5th</span>
</body>

fe14_division.html이다.

div는 블록 형식으로(세로), span은 인라인 형식으로(가로) 분할된다.

시맨틱 태그

<body>
    <header>
        <h1>시멘틱 웹</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">메뉴1</a></li>
            <li><a href="#">메뉴2</a></li>
            <li><a href="#">메뉴3</a></li>
            <li><a href="#">메뉴4</a></li>
        </ul>
    </nav>
    <section>
        <article>
            <h2>Lorem ipsum</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur labore doloribus modi odit odio tempora ratione, vitae ea veniam totam cumque, inventore hic accusantium quam veritatis quo, dolorem unde molestiae.</p>
        </article>
    </section>
</body>

fe15_semantic.html을 생성하였다.

메뉴 1~4 아무거나 누르면 url에 #하나가 추가된다.

<body>
    <header>
        <h1>시멘틱 웹</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">메뉴1</a></li>
            <li><a href="#">메뉴2</a></li>
            <li><a href="#">메뉴3</a></li>
            <li><a href="#">메뉴4</a></li>
        </ul>
    </nav>
    <section>
        <article>
            <h2>Lorem ipsum</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur labore doloribus modi odit odio tempora ratione, vitae ea veniam totam cumque, inventore hic accusantium quam veritatis quo, dolorem unde molestiae.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur labore doloribus modi odit odio tempora ratione, vitae ea veniam totam cumque, inventore hic accusantium quam veritatis quo, dolorem unde molestiae.</p>
        </article>
        <article>
            <h2>Lorem ipsum</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur labore doloribus modi odit odio tempora ratione, vitae ea veniam totam cumque, inventore hic accusantium quam veritatis quo, dolorem unde molestiae.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur labore doloribus modi odit odio tempora ratione, vitae ea veniam totam cumque, inventore hic accusantium quam veritatis quo, dolorem unde molestiae.</p>
        </article>
    </section>
    <footer>
        <address>부산광역시</address>
    </footer>
</body>

조금 더 추가하였다.


위처럼 생성이 된다.

CSS 3 기초

선택자의 용도와 사용법

CSS 3 개요

<head>
    <meta charset='utf-8'>
    <title>CSS</title>
    <style>
        h1{ color: red }
    </style>
</head>
<body>
    <h1>Hello CSS</h1>
</body>

fe16_cssstart.html이다.

Hello CSS

<head>
    <meta charset='utf-8'>
    <title>CSS</title>
    <style>
        h1{ color: red;
            background-color: brown; }
    </style>
</head>
<body>
    <h1>Hello CSS</h1>
    <h1>Hi, There~</h1>
</body>

이렇게 수정하였다.

h1에 color, background-color을 정의하였으니 모든 h1에 적용이 된다.

CSS 선택자 종류

기본 선택자

종류가 매우 많다..

예제

<head>
    <meta charset='utf-8'>
    <title>CSS 선택자</title>
    <style>
        *{
            color: chocolate;
        }
    </style>
</head>
<body>
    <a href="#a0">첫번째로</a>
    <a href="#a1">두번째로</a>
    <a href="#a2">세번째로</a>
    <!-- 반드시 form 태그 내 입력양식을 넣어야 함!! -->
    <form action="./fe11_inputs.html" method="post">
        <input type="text" name="userid">
        <input type="password" name="password">
        <input type="submit">
        <input type="color" name="interior">
        <input type="date" name="interior">
    <h1 id="a0">첫번째</h1>  
    <h2>부제목</h2>  
    <p><b>Lorem ipsum</b> dolor sit amet, <i>consectetur</i> adipisicing elit, sed do eiusmod tempor <small>incididunt</small> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <del>log<sub>2</sub>n</del>, 2<sup>2</sup></p>
    <h1 id="a1">두번째</h1>    
    <h3>소제목</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <h1 id="a2">세번째</h1>    
    <h4>소소제목</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>

fe17_cssselector.html이다.

style에 *을 적었으니 모든 항목에 대해 적용이 된다.

        h1 {color: red; font-size: 50px; font-style: italic;}
        p {color: blue; }

style에 *~을 지우고 위처럼 수정하였다.

위처럼 변경되었다.

주황색으로 표기된 곳이 margin이다.

초록색으로 표기된 곳은 padding이다

        h1 {color: red; font-size: 50px; margin: 100px;}
        p {color: blue; margin: 10px; padding: 20px;}

이렇게 margin과 padding을 수정하면

이렇게 바뀐다.

        h1 {color: red; font-size: 50px; margin: 100px;}
        p {color: blue; margin-left: 20px; margin-top: 30px; margin-right:10px; margin-bottom: 5px;
        padding-bottom:12px;}

margin을 상하좌우 각각 설정하였다.


사진처럼 margin, padding의 공간이 바뀐 걸 볼 수 있다

body, h1, h2, p {margin: 0px; padding:0px;}

이렇게 style을 여러개 한 번에 적용할 수 있다.

아이디 선택자

<head>
    <meta charset='utf-8'>
    <title>ID 선택자</title>
    <style>
        * {
            margin: 0; padding: 0;
        }

        #header {
            width: 1024px; margin: 0 auto;
            background-color: red;
            padding: 5px; 
        }

        #wrap {
            width: 1024px; margin: 0px auto;
            overflow: hidden;
        }
        #aside {
            width: 190px; float: right;
            background-color: blue;
            padding: 5px;
        }

        #content {
            width: 814px; float: left;
            background-color: #00FF00;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1>#header 영역</h1>
    </div>
    <div id="wrap">
        <div id="aside">
            <h2>#aside 영역</h2>
        </div>
        <div id="content">
            <h2># content 영역</h2>
        </div>
    </div>
</body>

fe18_idselector.html이다.

이렇게 표시된다.

aside와 content 픽셀 합이 1024에서 1만 커져도 위아래로 분리된다.

클래스 선택자

            .summer{
            color:aqua;
        }
        
    <div>
        <ul>
            <li>딸기</li>
            <li class="summer">애플망고</li>
            <li>바나나</li>
            <li class="summer">수박</li>
        </ul>
    </div>

파일을 새로 만들지 않고 fe18_idselector.html 파일에
.summer은 style에 추가하고
div를 추가하였다.


class="summer"를 추가한 항목만 aqua색상으로 바뀐 모습을 볼 수 있다.

        .item{
            font-size: 50px;
            font-style: unset;
        }
        
        <h1 class="item header">동해물과 백두산이 마르고 닳도록</h1>

위를 추가하였다.

대따 크게 나온다.

        .bound {
            width: 800px;
            border-width: 3px;
            border-style: solid;
            border-color: #808080;
        }
        
        <h1 class="item bound">동해물과 백두산이 마르고 닳도록</h1>

스타일에 .bound를 추가하고 아래 h1을 수정하였다.

아래와 같이 테두리가 생겼다.

        </div>
        <div id="content" class="bound">
            <h2># content 영역</h2>
        </div>

id에 클래스 bound를 추가해도

이렇게 가능하다. 초록색 content 영역에 테두리가 생긴 것을 볼 수 있다.

            /* border-width: 3px;
            border-style: solid;
            border-color: #808080; */
            border: 3px solid #808080;

주석처리를 한 것을 주석처리 하지 않은 것으로 대체할 수 있다.

속성 선택자

    <style>
        input[type='text']{
            border-width: 2px;
            border-color: darkorange;
        }
        input[type='password']{
            border-width: 2px;
            border-color: red;
            background-color: salmon;
        }
        input[type='submit']{
            font-weight: bolder;
            font-size: 15px;
            background-color: aquamarine;
        }
    </style>
<body>
    <form method="get">
        <table>
            <tr>
                <td>아이디</td>
                <td><input type="text" name="id"></td>
            </tr>
            <tr>
                <td>패스워드</td>
                <td><input type="password" name="pass"></td>
            </tr>
        </table>
        <input type="submit" value="로그인">
    </form>
</body>

fe19_attributeselector.html이다.

이렇게 만들어진다.

후손 선택자와 자손 선택자

<head>
    <meta charset='utf-8'>
    <title>자손/후손 선택자</title>
    <style>
        /* #header h1, h2{ color: violet;} 후손 선택자 */
        #header > h1{ color: tomato; } /*자손 선택자*/
        #section > p { color: teal; }
        #header > #nav > h1{ color: violet; }
    </style>
</head>
<body>
    <div id="header">
        <h1 class="title">Lorem ipsum</h1>
        <div id="nav">
            <h1>Navigation</h1>
            <div>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos dolorum dolores perferendis natus, quod consectetur maiores voluptas vero minus et dolorem architecto accusamus iure quaerat nam ex repellendus, fuga reiciendis.</p>
                <h1>sub Title</h1>
            </div>
            <h2>작은 제목</h2>
        </div>
    </div>
    <div id="section">
        <h1 class="title">Lorem ipsum</h1>
        <p class="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur quidem, sunt officia facilis laboriosam velit repudiandae! Iure sunt, consectetur sit quasi non molestiae eos praesentium, repellendus earum dolore ratione consequatur?</p>
    </div>
</body>

fe20_descendant.html이다.

header의 h1은 tomato색,
section의 p는 teal색,
header의 nav의 h1은 violet색

<head>
    <meta charset='utf-8'>
    <title>시간표 테이블</title>
    <style>
        table th {
            color: red;
        }
    </style>
</head>
<head>
    <meta charset='utf-8'>
    <title>시간표 테이블</title>
    <style>
        table th {
            color: red;
            background-color: gainsboro;
        }
    </style>
</head>

day1의 테이블을 가져와서 style을 추가했다.

이렇게 th의 글자색, 배경색이 바뀌게 된다.

반응/상태/구조 선택자

반응 선택자

<head>
    <meta charset='utf-8'>
    <title>반응/상태/구조 선택자</title>
    <style>
        input[type='text']:hover {
            background-color: coral;
        }
        input[type='text']:focus{
            background-color: gray;
        }
        input[type='button']:hover{
            background-color: coral;
        }
        input[type='button']:active{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <input type="text" name="id"><br>
    <input type="button" value="클릭">
</body>

가만히 있을 때

마우스 커서를 올렸을 때

클릭할 때

상태 선택자


가만히 있을 때

마우스 커서를 올렸을 때

클릭했을 때

구조 선택자

    <style>
        ul{
            overflow: hidden;
        }
        li{
            list-style: none; /* 앞에 점 삭제*/
            float: left; /*옆으로 나열 */
            padding: 10px;
        }
        li:nth-child(2n+1){ /*홀수 메뉴*/
            background-color: silver;
        }
        li:nth-child(2n){ /*짝수 메뉴*/
            background-color: lightsteelblue;
        }
        li:first-child{
            border-radius: 10px 0 0 10px; /* 순서대로 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 */
        }
        li:last-child{
            border-radius: 0 10px 10px 0; /* 순서대로 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 */
        }
        li:hover{
            color: white;
        }
    </style>
</head>
<body>
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Product</li>
        <li>Service</li>
        <li>Portfolio</li>
        <li>Board</li>
        <li>Contact</li>
    </ul>    
</body>

fe23_nav.html이다.


홀수, 짝수 각각 배경색을 정하고 양쪽 끝에 round를 생성하고 마우스 커서를 갖다대면 글자색이 흰색으로 변한다.

CSS3 단위

        #first{
            background-color: rgb(255, 0, 0);
            float:left;
            width: 100px; height: 100px;
        }
        #second{
            background-color: #ff0000; 
            float:left;
            width: 100px; height: 100px;
        }
        #third{
            background-color: rgba(255, 0, 0, 0.5); 
            float:left;
            width: 100px; height: 100px;
        }

style에 위 코드를 추가하고

    <div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>
    <input type="color">

body에 위 코드를 추가하면

위 사진처럼 나온다.

CSS 3 속성

박스 속성

박스 크기와 여백


<head>
    <meta charset='utf-8'>
    <title>CSS 박스영역</title>
    <style>
        *{ margin: 0; padding: 0; }
        div{
            width:  100px; height: 100px;
            background-color: rgba(255, 0, 0, 0.5);
            border: 20px solid;
            border-color: crimson;
            margin: 10px 0 0 30px; 
            padding: 10px 50px 20px 30px;
            /* top - right - buttom - left 순서*/
        }
        p {
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>
        <p>뽀로로</p>
    </div>
</body>

fe24_boxproperty.html이다.

이렇게 보인다.

박스 테두리

border-width : 테두리 두께
border-style : 테두리 형태
border-color : 테두리 색상

dotted : 점선
dashed : 긴 점선
solid : 실선
double : 두 줄
등등

박스 여백 부분 조정

        .box{
            width: 450px;
            background-color: aliceblue;
            border-width: 5px;
            border-color: black;
            border-style: dashed;
            border-radius: 50px 20px 30px 10px;
        }
        
        <div class="box">
        <h1>Lorem ipsum dolor sit amet.</h1>
 	    </div>

스타일에 .box, body에 div를 추가하였다

이렇게 나온다.

가시 속성

display 속성

display : none - 보이지 않음
display : block - 속성을 block으로 변경

profile
주세환
이전 포스트

HTML 5 + CSS + 자바스크립트 Day01

다음 포스트

HTML 5 + CSS + 자바스크립트 Day03

0개의 댓글