210909_TIL(HTML)

HTML의 구성은 다양한 태그와 태그에 상응하는 속성들을 많이 알아보았다.
사실 태그와 속성은 아주 다양하고 많기 때문에 외운다기보다는 어떤 태그에서 어떠한 속성을 썼을 때 나타나는 변화나 특징등을 그냥 이해하고 넘어가는 정도로 생각하며 공부하였다.

보통 HTML의 기본 형태는

<!DOCTYPE html>
<html lang="kr">
    <head>

    </head>
    <body>
       
    </body>

</html>

위의 형태가 기본적으로 html을 구성하는 요소이다.
head같은 경우에는 보이지 않는 특징을 지니는데 보통 검색엔진에 사용하는 타이틀 등을 이룬다.
body같은 경우는 우리가 직접 눈으로 보이는 웹사이트의 모습들을 나타내어준다.
일종의 저러한 형태는 HTML을 다루는 사람들간의 약속된 형태라고 이해하면 편하다.

<!DOCTYPE html>
<html lang="kr">
    <head>

    </head>
    <body>
        <header>

        </header>
        
        <main>

        </main>

        <footer>

        </footer>
    </body>

</html>

기본적인 페이지 구간을 나타내는 div를 구성하기 전 큰 틀은 header, main, footer로 나누어 놓고 구성하는 것이 편할 거 같아 웹 페이지를 구성하는 body를 큰 구간인 헤더 메인 푸터 세 구간으로 나누어 놓았다. 웹을 표현하는 개발자로서 차후 문제해결이라던지 수정할 때 간편하게 찾을 수 있어 각 문구마다 특징들을 태그이름을 통해 잘 표현하는 것 또한 하나의 코드작성할 때 많은 도움이 된다.(but, 의미없는 태그이름을 설정할 시 브라우저는 이해하지 못하므로 주의)

오늘은 MDN이라는 사이트를 접속하면 HTML에 관련한 지식이나 용어들을 많이 찾아 볼 수 있다. 이곳에서 input에 관련된 속성들이 무엇이 있는지 찾아 보았는데 그 외에도 많은 정보들이 있어 자주 애용하면 좋을 거 같다는 생각이 들었다.
form태그와 lable, input을 이용하여 사용자가 이름과 아이디 비밀번호를 작성하는 틀을 만들어 보았다. 

    <body>
        <form>
            <input type="file" accept=".pdf,.xlsx"/>
            <header><label for="First-Name"> 성을 입력하세요 : </label><input id="First-Name" required placeholder="성을 입력하세요"  maxlength="5" type="text"/></header>
            <p><label for="Last-Name"> 이름을 입력하세요 : </label><input id="Last-Name" required placeholder="이름을 입력하세요"  maxlength="5" type="text"/></p>
            <p><label for="ID"> 아이디를 입력하세요 : </label><input id="ID" required placeholder="아이디를 입력하세요"  minlength="5" type="text"/></p>
            <p><label for="Password"> 비밀번호를 입력하세요 : </label><input id="Password" required placeholder="비밀번호를 입력하세요"  minlength="5" type="password"/></p>
            <input type="submit" value="등록하기"/>
        </form>
    </body>

Natas Level 9 → Level 10
Controlled & UnControlled Component

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage