IT BLOG

7 분 소요

입력 양식 태그

  • 사용자에게 정보를 입력받는 요소.

  • GET 방식 : 주소에 데이터를 입력해서 전달.

  • POST 방식 : 주소 변경 없이 비밀스럽게 데이터 전달.

  • fieldset , legend 태그로 연관 있는 입력 양식 그룹으로 묶기.

image image

실습

image

<!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>Document</title>
</head>
<body>
    <form>
        <fieldset>
        <legend>신상정보</legend>
        <table>
            <tr>
                <td>
                    <label for="username">이름</label>
                </td>
                <td>
                    <input id="username" type="text" name="username"></input>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="password">패스워드</label>
                </td>
                <td>
                    <input id="password" type="password" name="password"></input>
                </td>
            </tr>
                <td>성별</td>
                <td>
                    <input id="man" type="radio" name="gender" value="m"
                    <label for="man">남자</label>
                    <input id="woman" type="radio" name="gender" value="w"
                    <label for="woman">여자</label>
                </td>
        </table>
        </fieldset>
        <fieldset>
        <legend>선택사항</legend>
        <table>
            </tr>
            <tr>
                <td>메뉴</td>
                <td>
                    <select mutiple="mutiple">
                        <option>김밥</option>
                        <option>떡볶이</option>
                        <option>순대</option>
                        <option>튀김</option>
                        <option>어묵</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>과목</td>
                <td>
                    <select>
                        <optgroup label="HTML5">
                            <option>Multimedia Tag</option>
                            <option>Connectivity</option>
                            <option>Devic Access</option>
                        </optgroup>
                        <optgroup label="CSS3">
                            <option>Animation</option>
                            <option>3D Transform</option>
                        </optgroup>
                    </select>
                </td>
            </tr>
        </table>
        </fieldset>
        <br>
        <input type="submit" value="가입">
    </form>
</body>
</html>

공간 분할 태그

  • CSS로 원하는 레이아웃을 구성하기 위해 공간 분할

  • Div : 블록 형식으로 공간 분할

  • Span : 인라인 형식으로 공간 분할

실습

image

<!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>Document</title>
</head>
<body>
    <div>div태그 - 블록형식</div>
    <div>div태그 - 블록형식</div>
    <div>div태그 - 블록형식</div>
    <div>div태그 - 블록형식</div>
    <div>div태그 - 블록형식</div>
    <div>블록형식 태그 : div, h1~h6, p, 목록, 테이블</div>
    <span>span태그 - 인라인형식</span>
    <span>span태그 - 인라인형식</span>
    <span>span태그 - 인라인형식</span>
    <span>span태그 - 인라인형식</span>
    <span>span태그 - 인라인형식</span>
    <span>span태그 - 인라인형식</span>
    <span>span태그 - 인라인형식</span>
    <div>인라인형식 태그 : span, a, input, 글자형식태그, 입력양식태그</div>
</body>
</html>

시맨틱 태그

  • 시맨틱 웹

    • 특정 태그에 의미를 부여한 웹

    • 프로그램이 코드를 읽고 의미를 인식할 수 있는 지능형 웹

  • header : 머리말(페이지 제목, 페이지 소개)

  • nav : 하이퍼링크들을 모아 둔 내비게이션

  • aside : 본문 흐름에 벗어나는 노트나 팁

  • section : 문서의 장이나 절에 해당하는 내용

  • article : 본문과 독립적인 콘텐츠 영역

  • footer : 꼬리말(저자나 저작권 정보)

실습

  • 시맨틱 태그 실습 전에 배운 것을 먼저 활용해서 만들었다.

image

<!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>Document</title>
</head>
<body>
    <h1>HTML5 기본</h1>
    <ul>
        <li><a href="#">메뉴 - 1</a></li>
        <li><a href="#">메뉴 - 2</a></li>
        <li><a href="#">메뉴 - 3</a></li>
    </ul>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum, optio doloribus? Aspernatur explicabo sapiente ipsa laboriosam quidem deleniti itaque voluptates ea rerum! Repudiandae beatae nobis deserunt dolores perferendis eos facilis.
    Voluptates, nihil id! Earum reperiam harum excepturi laboriosam repellendus aspernatur, obcaecati exercitationem sed magnam, in quaerat sunt possimus sapiente saepe similique sint optio quidem laborum repellat. Pariatur, perferendis.
    Molestiae quisquam quibusdam corrupti exercitationem impedit vitae voluptatum et, architecto aliquid dolor obcaecati! Laboriosam vel ipsam iure qui vitae sit? Ex enim cupiditate, vero eaque temporibus placeat harum rerum nemo?</p>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet quibusdam ullam dolorum quae consequuntur? Beatae, laudantium amet totam suscipit sapiente ratione inventore, magnam possimus, odio voluptate nesciunt fugiat odit quidem?
    Nam impedit id voluptatem sintnt eiente, tenetur, aliquam, illo dicta error sed assumenda. Iusto, dicta laborum alias perspiciatis, itaque rerum et numquam mollitia obcaecati harum ipsam necessitatibus eos aut voluptatum.</p>
    <p>서울특별시 강서구 마곡동</p>
</body>
</html>

실습2

  • 화면에 표시됨은 같으나, 시맨틱 태그를 활용하여 레이아웃을 구성했다.
<!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>Document</title>
</head>
<body>
    <header>
        <h1>HTML5 기본</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">메뉴 - 1</a></li>
            <li><a href="#">메뉴 - 2</a></li>
            <li><a href="#">메뉴 - 3</a></li>
        </ul>
    </nav>
    <section>
        <article>
            <h1>Lorem ipsum dolor sit amet.</h1>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum, optio doloribus? Aspernatur explicabo
                sapiente ipsa laboriosam quidem deleniti itaque voluptates ea rerum! Repudiandae beatae nobis deserunt
                dolores perferendis eos facilis.
                Voluptates, nihil id! Earum reperiam harum excepturi laboriosam repellendus aspernatur, obcaecati
                exercitationem sed magnam, in quaerat sunt possimus sapiente saepe similique sint optio quidem laborum
                repellat. Pariatur, perferendis.
                Molestiae quisquam quibusdam corrupti exercitationem impedit vitae voluptatum et, architecto aliquid
                dolor obcaecati! Laboriosam vel ipsam iure qui vitae sit? Ex enim cupiditate, vero eaque temporibus
                placeat harum rerum nemo?</p>
        </article>
        <article>
            <h1>Lorem ipsum dolor sit amet.</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet quibusdam ullam dolorum quae consequuntur?
                Beatae, laudantium amet totam suscipit sapiente ratione inventore, magnam possimus, odio voluptate
                nesciunt fugiat odit quidem?
                Nam impedit id voluptatem sintnt eiente, tenetur, aliquam, illo dicta error sed assumenda. Iusto, dicta
                laborum alias perspiciatis, itaque rerum et numquam mollitia obcaecati harum ipsam necessitatibus eos
                aut voluptatum.</p>
        </article>
    </section>
    <footer>
        <p>서울특별시 강서구 마곡동</p>
    </footer>
</body>
</html>

Blog 형식의 html 실습

  • Blog 를 생성하는데 CSS 활용전의 html을 형성하였다.

image

<!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>Document</title>
</head>
<body>
    <header>
        <h1>HTML5 Example Preview</h1>
        <h2>한국정보교육원</h2>
    </header>
    <div>
        <ul>
    
            <!--첫 번째 목록-->
            <li>
                <b>HTML5</b>
                <ul>
                    <li><a href="#">데이터</a></li>
                    <li><a href="#">데이터</a></li>
                </ul>
            </li>
            <!--두 번째 목록-->
            <li>
                <b>CSS3</b>
                <ul>
                    <li><a href="#">데이터</a></li>
                    <li><a href="#">데이터</a></li>
                    <li><a href="#">데이터</a></li>
                </ul>
            </li>
            <!--세 번째 목록-->
            <li>
                <b>JavaScript</b>
                <ul>
                    <li><a href="#">데이터</a></li>
                    <li><a href="#">데이터</a></li>
                    <li><a href="#">데이터</a></li>
                    <li><a href="#">데이터</a></li>
                    <li><a href="#">데이터</a></li>
                    <li><a href="#">데이터</a></li>
                    <li><a href="#">데이터</a></li>
                    <li><a href="#">데이터</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div>
        <div>
            <form>
                <input id="search" type="text" name="search"></input>
                <input type="submit" value="검색">
            </form>
        </div>
    </div>
    </nav>
    <div>
        <section>
            <h3>HTTML5 개요와 활용</h3>
            <P>2013년 02월 14일</P>
            <img src="https://via.placeholder.com/430x280" alt="430X280" width="430" height="280">
        </section>
        <article>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi vero ratione cum illo eveniet consectetur modi
                earum sed in, aspernatur quod vitae similique dolores dolorem quia tempore! Doloribus, officiis eos.
                Iusto repudiandae ullam ex esse sunt dolore magnam hic neque. Numquam vel excepturi maiores sed magni
                veritatis
                ipsam sequi ipsa eaque sunt facilis totam, delectus voluptatum maxime, autem culpa corporis?
                Culpa praesentium nostrum perferendis aut est ad odit quas incidunt alias inventore fuga repudiandae vel
                quae,
                quaerat fugit eveniet sunt commodi, veniam voluptatem explicabo cumque nesciunt? Nesciunt fugit fuga culpa!
                Optio sunt doloribus, incidunt repudiandae magni temporibus commodi quam ea veritatis voluptatem sapiente
                dignissimos? Commodi, repellat eum vel saepe tempore sapiente nostrum quis velit sed consequuntur iste
                tenetur
                labore mollitia.
                Consectetur, aspernatur voluptatibus dolores reprehenderit neque asperiores necessitatibus magni voluptatem
                vitae fuga iste nobis sunt dignissimos porro velit rerum sed ad nemo odio architecto quia. Aut error illum
                temporibus repellendus?</p>
        </article>
        <article>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit blanditiis tempore facere neque
                distinctio, enim quaerat illo deleniti ipsam ut vitae illum fuga aut a delectus magni! Quam, tenetur nobis.
                Voluptate, magnam temporibus officia perspiciatis debitis magni doloribus veritatis vero sapiente nihil
                voluptates tempora officiis delectus corrupti amet necessitatibus iure vel adipisci, fugiat, quis doloremque
                pariatur! Repudiandae nam id vitae?
                Perferendis, perspiciatis magnam quia dolor fugiat distinctio. Soluta ad odio, animi eos nulla excepturi
                nihil
                explicabo, et ipsum, voluptatibus nesciunt ullam recusandae id dicta vero suscipit quam sequi similique
                dolor?
                Voluptas, voluptatem. Voluptates, cum, voluptate numquam sit qui quod nihil corporis nesciunt exercitationem
                dolores, dignissimos vitae sed soluta tempore placeat! Officia dolores, cum delectus cumque ea dolore sit
                commodi repellat.
                Nesciunt accusamus alias ea voluptatum illum magni! Praesentium magni perferendis, eius velit dignissimos
                laudantium accusamus doloremque ad facere nobis saepe possimus corporis at eum nulla voluptatibus. Autem
                temporibus aliquam ullam.</p>
        </article>
        <section>
            <h3>HTTML5 응용과 실습</h3>
            <P>2013년 02월 17일</P>
            <img src="https://via.placeholder.com/430x280" alt="430X280" width="430" height="280">
        </section>
        <article>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi vero ratione cum illo eveniet consectetur modi
                earum sed in, aspernatur quod vitae similique dolores dolorem quia tempore! Doloribus, officiis eos.
                Iusto repudiandae ullam ex esse sunt dolore magnam hic neque. Numquam vel excepturi maiores sed magni
                veritatis
                ipsam sequi ipsa eaque sunt facilis totam, delectus voluptatum maxime, autem culpa corporis?
                Culpa praesentium nostrum perferendis aut est ad odit quas incidunt alias inventore fuga repudiandae vel
                quae,
                quaerat fugit eveniet sunt commodi, veniam voluptatem explicabo cumque nesciunt? Nesciunt fugit fuga culpa!
                Optio sunt doloribus, incidunt repudiandae magni temporibus commodi quam ea veritatis voluptatem sapiente
                dignissimos? Commodi, repellat eum vel saepe tempore sapiente nostrum quis velit sed consequuntur iste
                tenetur
                labore mollitia.
                Consectetur, aspernatur voluptatibus dolores reprehenderit neque asperiores necessitatibus magni voluptatem
                vitae fuga iste nobis sunt dignissimos porro velit rerum sed ad nemo odio architecto quia. Aut error illum
                temporibus repellendus?</p>
        </article>
        <br>
        <br>
        <footer>
            <p>Proin ut fringilla sapien.</p>
        </footer>
        <aside>
            <div>
                <h3>카테고리</h3>
                <ul>
                    <li><a href="#">데이터</a></li>
                    <li><a href="#">데이터</a></li>
                    <li><a href="#">데이터</a></li>
                    <li><a href="#">데이터</a></li>
                    <li><a href="#">데이터</a></li>
                </ul>
            </div>
            <div>
                <h3>최근 글</h3>
                <ul>
                    <li><a href="#">데이터</a></li>
                    <li><a href="#">데이터</a></li>
                    <li><a href="#">데이터</a></li>
                    <li><a href="#">데이터</a></li>
                </ul>
            </div>
        </aside>
        <footer>
            <p><a href="#">Created By Team-HeXagon</a></p>
        </footer>
    </div>
</body>
</html>

CSS

image

  • 기본 선택자

  • 속성 선택자

  • 후손 선택자와 자손선택자

  • 반응, 상태, 구조 선택자

  • CSS3 단위

CSS 선택자 종류

image

image

image

#기본 선택자

image

실습

image

<!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>Document</title>
    <Style>
        h1 {
            color:black;
            background-color: rgb(196, 255, 79);
        }
    </Style>
</head>
<body>
    <h1>CSS3 선택자 기본</h1>
    
</body>
</html>

한줄 요약

  • 재밌지만 어렵고, 진도는 빠르다.

태그:

카테고리:

업데이트:

댓글남기기

참고

Dockerfile, private-registry

1 분 소요

오늘은 도커파일을 이용한 이미지 빌드와 사설 저장소를 이용한 이미지 푸쉬, 컨테이너 동작을 실습해보았다.

AWS 3일차

4 분 소요

AWS에서 인스턴스의 로드밸런서 실습과 오토스케일링 실습을 해보았다.