거북이개발자

[카카오톡 클론코딩]HTML 기초 문법 본문

Web/HTML & CSS

[카카오톡 클론코딩]HTML 기초 문법

류정식 2021. 1. 3. 16:16

0. 학습한것

HTML의 사용법, 기초적인 문법을 다룰것이다.

 

 

1. 태그

태그란 HTML에서 구간을 나눌때 사용한다.

<abc>Hello</abc>

와같은 아무 태그나 사용가능하다.

but? 기존에 설정된 태그가 있고 그 태그들은  특정 기능을 수행한다.

<a href="http://www.naver.com"> go google</a>

위의 예를 보면 <a>라는 태그를 썻고 이기능은 링크로 가능 기능을 담고있다.

 

2. <head></head>

헤드부분은 페이지에 나타나는 부분을 담당하지 않는다.

그렇지만 검색시 나오는 문구, 언어설정, 탭의 이름등을 담당한다.

	<head>
            <title>Home - myfirst website</title>
            <meta charset="utf-8"/>
            <meta name="description" content="this is my website"/>
    </head>

head의 예시이다. 안의 것들을 하나하나 보면

<title> : 탭의 글자를 표시한다.

<meta chrset> : 언어설정 담당한다.

<meta name="" content=""> : 검색시 나오는 글자를 표시한다.

 

3. 그외 태그들..

태그들은 사실 엄청많다. 이러한 태그들을 다외우는건 매우 비효율적이다. 그때마다 필요한 태그를 찾으면

되는데 그중 이사이트가 하나이다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element

 

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN

이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다. 필요로 하는 요소를 쉽게 찾을 수 있도록 기능별로 분류했으며, 각각의 요소 참조 페이지 사이드바에서는 사전 순

developer.mozilla.org

이런식의 여러 태그들을 볼 수 있다.

 

4. <form>태그와 그 엘리먼트

<form>태그를 이용해서 많은 것을 할 수 있다.

예를들어 <form>태그안의 <input>태그를이용하여 텍스트 입력란, 패스워드 입력란, 날짜선택란등을 가능하다.

간략하게 예를드면

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

    <body>
        <form>
         <div>         
            <input placeholder="Name" type="text"/>
        </div>
         <div>
                 <input placeholder="Adress" type="text"/>
         </div>
           <div>
                  <input placeholder="ID" type="text"/>
           </div>
           <div>
                  <input placeholder="Passsword" type="password"/>
             </div>
           <div>
                   <input type="file"/>
           </div>
           <div>
                      <input type="submit">
           </div>

        </form>
    </body>
 </html>

이런 코드를통해서

이런 간단한 정보 입력란란을 만들수도 있다.

 

5. 가독성을 높이는 코드

<div></div>태그 같은경우 줄바꿈을 해준다.

그치만 <div> 를 사용하는대신에

<header></header>

<main></main>

<footer></footer>

를 사용하는게 좋다. 기능은 같다. 그렇지만 가독성과 구조성을 높힌다.

저작자표시

'Web > HTML & CSS' 카테고리의 다른 글

[카카오톡 클론코딩]CSS 고급 문법  (0) 2021.01.05
[카카오톡 클론코딩]CSS 기초 문법(3)  (0) 2021.01.05
[카카오톡 클론코딩]CSS 기초 문법(2)  (0) 2021.01.05
[카카오톡 클론코딩]CSS 기초 문법(1)  (0) 2021.01.04
[카카오톡 클론코딩]HTML, CSS, JAVASCRIPT 란?  (0) 2021.01.02
'Web/HTML & CSS' Related Articles more
Comments