본문 바로가기
스파르타/Web

[Web] HTML 기초 - ( week 1)

by bakcoding_sparta 2023. 4. 6.

구조

html 태그는 감싸고 있는 태그가 변경되면 내용물도 모두 영향을 받기 때문에  누가 누구 안에 있는지를 이해하는게 중요하다.

red div 안에 green div, blue div가 들어있는 상태에서 red div의 위치를 이동시키면 안에있는 green과 blue 또한 함께 이동하게 되며 마찬가지로 green div 의 텍스트 색을 변경하면 안에 있던 버튼의 텍스트 색도 변경된다.

 

구성

<!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>Documents</title>
</head>
<body>
</body>
</html>

HTML문서의 첫줄은 해당 문서가 어떤 버전의 HTML을 따르는지 나타내는 선언문으로 버전마다 선언방식이 다르다.

현재 선언된 방식은 HTML5 에서 사용되는 선언 방식이다.

 

꺽쇠안에 키워드가 적혀있는것은 요소 또는 태그라고 부르며 정해진 키워드마다 다른 기능을 가지고 있으며 범위의 지정이 필요한 요소의 경우 열었으면 닫는것이 필요하다.

 

<열고></닫고>

 

<head>와 <body>의 경우 기본적으로 페이지를 구성하는데 필요한 태그로 위치나 사용방식이 정해져있다.

 

head에는 직접적으로 눈에 보여지지는 않지만 페이지를 구성하는데 필요한 속성 정보나 기능들이 들어가는 영역으로 일반적으로 meta, script, title 등이 들어간다.

 

body는 페이지의 내용이 들어가는 영역으로 페이지를 만드는데 필요한 대부분의 코드들은 이 영역에서 작성된다.

 

Tags

    <!-- 구역을 나누는 태그들 -->
    <div>구역 나눔</div>
    <p>문단 나눔</p>
    <ul>
        <li> 리스트 </li>
        <li> 리스트 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>h1은 제목을 나타내는 태그</h1>
    <h2>h2는 소제목</h2>
    <h3>h3~h6 점점 작아짐</h3>
    <hr>
    span 태그 : 특정 <span style="color:red">글자</span>를 꾸밀 때 사용한다.
    <hr>
    a 태그 : <a href="http://naver.com/"> 하이퍼링크 </a>
    <hr>
    <hr>
    input 태그 : <input type="text" />
    <hr>
    button 태그 : <button> 버튼입니다</button>
    <hr>
    textarea 태그 : <textarea>문자를 입력하는 공간, 여러줄</textarea>

HTML Tags

 

HTML에는 무수히 많은 태그들이 있고 사용가능한 태그도 버전마다 또는 브라우저마다 차이가 있을 수 있다.

이를 모두 외우기 보다는 그때마다 필요한 코드를 가져다 사용하면서 본인이 원하대로 수정하는 방식을 알아야한다.

 

 

 

저작자표시

'스파르타 > Web' 카테고리의 다른 글

[Web] CSS 기초 2 - ( week 1)  (0) 2023.04.06
[Web] CSS 기초 1 - ( week 1)  (0) 2023.04.06
[Web] Sample - ( week 1)  (0) 2023.04.06
[Web] 프로젝트 준비 - ( week 1)  (0) 2023.04.06
[Web] 브라우저 원리 - ( week 1)  (0) 2023.04.06

관련글

티스토리툴바