HTML 기본 문법

박준수·2022년 12월 6일

HTML

목록 보기

1/1

O 기본적인 개념 먼저 간략하게 말하자면 니꺼 고야드 반지갑을 예시로 들게
1. HTML은 지갑 모양이나 카드, 지폐같이 고체 덩어리는 다 만드는데 사용
2. CSS는 고야드 Y자 이미지,색깔,중간에 있는 글씨, 봉제선은 CSS로 크기를 조절하거나 위치를 바꾸는데 씀 ==> 이건 다른 파트에서 자세하게 설명할게
3. Javascript(JS)는 지갑을 열고 닫을 수 있게 해주고, 카드를 꺼낼 수 있게 만들어 줌
==> 일반적으로 JS를 기본 문법만 사용해서 코딩하는걸 개발자들은 바닐라 자바스크립트라고 부름

<html lang="en">

<head>
    <!-- 표준 언어체계 같은거라고 생각하면됨 신경쓰지마 -->
    <meta charset="UTF-8">
    <!-- IE 지원이 끊기면서 엣지까지 커버하겠다는 소리 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 화면 확대 축소 기본 설정 할 수 있음 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 인터넷 창 상단에 제목 -->
    <title>배워봅시다.</title>
    <!-- style 태그는 CSS를 HTML에 직접 사용하는 경우 이 위치에 사용
    	여기는 따로 만든 CSS 파일에서 설정이 안먹거나 전체를 공통으로 사용하는 무언가를 지정할 때 씀 -->
    <style>
        /* [S] 공통 영역은 보통 이렇게 2가지로 많이 씀 */
        * { width: 100%; height: 100%; }
        html, body { width: 100%; height: 100%; }
        /* [E] 공통 영역은 보통 이렇게 2가지로 많이 씀 */
        .gePDEq, .dezvna { width: 1200px; }
        .text {
            font-size: 18px;
            font-weight: bold;
            color: #fff;
        }
        .agari {
            position: relative;
            background-image: Y;
            background-repeat: repeat;
            background-position: center;
        }
        .agari::before {
            content: 'Goyard';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50px);
        }
    </style>
    <!-- script를 body 태그 위에 썻다는거는 지갑을 사고 언박싱할 때 '구매해주셔서 감사합니다!' 같은 문구를 바로 보여주려고 위에 쓰는겨 -->
    <script type="text/javascript">
        function message() {
            alert("구매해주셔서 감사합니다!");
        }
    </script>
</head>

<body onload="message()"> <!-- 여기가 언박싱 시작이야 -->
    <div class="agari open" id="goyard" onclick="openTheDoor()"> 
        <!-- section : 지갑도 왼쪽 오른쪽이 구분되어 있는 것 처럼 하나의 영역(블럭)으로 나눌 때 씀  -->
        <section id="left_side">
            <!-- 카드를 수납하는 공간처럼 세로나 가로로 일정하게 나열하고 싶을 때 리스트 형태 [ul, ol, dl] 태그를 쓴다.
                보통 ul 태그를 가장 많이 사용 
            -->
            <ul class="card-wrapper">
                <li class="drawer"><p>우리카드</p></li>
                <li class="drawer"><p>신한카드</p></li>
                <li class="drawer"><p>농협카드</p></li>
                <li class="drawer"><p>블랙카드</p></li>
            </ul>
        </section>
        <section id="right_side">
            <ul class="card-wrapper">
                <li class="drawer"><p>주민등록증</p></li>
                <li class="drawer"><p>운전면허증</p></li>
                <li class="drawer"><p>명함</p></li>
                <li class="drawer"><p>맴버쉽카드</p></li>
            </ul>
        </section>
    <div>
    <!-- body 태그가 끝나기 전에 스크립트를 쓴건 이미 언박싱을 하고나서 지갑을 열고 닫을 때 사용함 -->
    <script>
        function openTheDoor() {
            let agari = document.getElementsByClassName('agari');
            agari.classList.toggle('open');
        }
    </script>
    </body>
</html>

참고 링크 *
CSS를 사용한 플립 : Flip Card
JS를 사용한 플립 : https://codepen.io/jsp1/pen/VwdomEL

* 태그에 대한 개념 설명 *
1. H1 ~ H6 태그 : 주로 제목이나 부제에 많이 사용
2. a 태그 : 바로 위에 링크 걸어 놓은 것 처럼 a태그를 사용하면 다른 url로 접속이 가능함

박준수

지식 저장소입니다.

HTML 기본 문법

HTML

0개의 댓글