HTML 기초,구성

오구오구·2022년 11월 9일

스파르타코딩

목록 보기

2/8

HTML (HyperText Markup Language)

수학에서 덧셈 기호를 +로 나타내고, 뺄셈 기호를 -로 나타내듯
웹 사이트에서 화면에 표시되는 정보를 약속 한 것이 HTML

HyperText는 단순 텍스트 이상의, 링크 등의 개념이 포함 된 텍스트
Markup은 꺽쇠(<, >)로 이루어진 태그를 사용하는 규격
으로, 태그들을 이용하여 텍스트 이상의 요소를 정의하는 약속된 언어라고 할 수 있다.

실제로 웹사이트에 표시되는 문자, 사진, 영상, 레이아웃 모두 HTML로 구성되어있다.

HTML 기본 구성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>제목을 입력하세요.</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html> — doctype.
아주 오래전 HTML 이 막 나왔을 때 (1991년 2월쯤),
doctype은 (자동 오류 확인이나 다른 유용한 것을 의미하는)
good HTML로 인정받기 위해 HTML 페이지가 따라야 할 일련의
규칙으로의 연결통로로써 작동하는 것을 의미하였습니다.
하지만, 최근에는 아무도 그런 것들에 대해 신경쓰지 않으며
그저 모든 것이 올바르게 동작하게 하기 위해 포함되어야 할
역사적인 유물일 뿐입니다. 지금은, 그게 알아야 할 전부 입니다.
<html></html> — <html> 요소. 이 요소는 페이지 전체의 컨텐츠를
감싸며, 루트(root) 요소라고도 합니다.
<head></head> — <head> 요소. 이 요소는 HTML 페이지에
포함되어 있는 모든 것들
(여러분의 페이지를 조회하는 사람들에게 보여주지 않을 컨텐츠)
의 컨테이너 역할을 합니다.
여기에는 keywords (en-US)와 검색 결과에 표시되길 원하는
페이지 설명, 컨텐츠를 꾸미기 위한 CSS, 문자 집합 선언 등과 같은 것들이 포함됩니다.
<body></body> — <body> 요소.
이것은 페이지에 방문한 모든 웹 사용자들에게 보여주길 원하는
모든 컨텐트를 담고 있으며, 그것이 텍스트일 수도, 이미지, 비디오,
게임, 플레이할 수 있는 오디오 트랙이나 다른 무엇이든 될 수 있습니다.
<meta charset="utf-8"> — 이 요소는 문서가 사용해야 할 문자 집합을
utf-8으로 설정합니다 (utf-8 문자 집합에는 인간의 방대한
주류 기록언어에 있는
대부분의 문자가 포함되어 있습니다).
본질적으로 여러분이 사용할 수 있는 어떠한 문자 컨텐트도
다룰 수 있습니다. 이 문자 집합을 설정하지 않을 이유가 없으며,
그렇게 설정하면 나중에 발생할 수 있는 일부 문제를 피할 수 있습니다.
<title></title> — <title> 요소. 이 요소는 페이지의 제목을
설정하는 것으로 페이지가 로드되는 브라우저의 탭에 이 제목이 표시됩니다.
이 요소는 북마크나 즐겨찾기에서 페이지를 설명하는 것으로도 사용됩니다.

HTML 기초

👉 HTML은 크게 head와 body로 구성됩니다.

head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담습니다.
head 안에 들어가는 대표적인 요소들: meta, script, link, title 등

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타코딩클럽 | HTML 기초</title>
</head>

<body>
    <!-- 구역을 나누는 태그들 -->
    <div>나는 구역을 나누죠</div>
    <p>나는 문단이에요</p>
    <ul>
        <li> bullet point!1 </li>
        <li> bullet point!2 </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>
    img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼입니다</button>
    <hr>
    textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>

</html>

+이 밖에도 많기 때문에 궁금한게 있을 땐
mdn 들어가서 찾아보고 적용해보기!
(https://developer.mozilla.org/ko/docs/Web/HTML/Element)

👉잠깐! 정렬의 중요성
코드의 정렬이 제대로 되어있지 않으면, 코드의 생김새를 파악할 수 없어 오류를 해결하기가 무척 어려워집니다. Pycharm에서 ctrl+alt+L (맥은 cmd+alt+L) 로 자동정렬 기능을 사용해보세요.

Ctrl + D : 현재 커서위치의 단어를 드래그 해줌
Ctrl + F : 단어검색
Ctrl + F 로 단어 검색 후 Alt + Enter : 해당 문자열 한번에 수정
Alt + Click : 클릭한 곳 커서를 모두 한번에 사용가능 각자 다른 위치에서 수정 가능
Alt + ↑ or ↓ : 현재 커서가 있는 줄을 위 or 아래로 이동
Ctrl + / : 현재 사용하는 언어의 주석단축키(VSC 가 해당언어의 주석으로 넣어줌)
Ctrl + Alt + L : 자동정렬
Alt + Shift + I : 드래그 된 모든 줄의 끝에 커서를 생성
Alt + Shift + O : 자동 임포트
Ctrl + . : 빠른 문제해결
Ctrl + Alt + ↑ or ↓ : 커서를 해당 위치로 추가(다중선택)
Ctrl + Shift + A : 블럭 주석
Ctrl + G : 특정 줄 번호로 이동
Ctrl + E : 파일 검색
Ctrl + H : 현재페이지 문자열 수정하기
Ctrl + Shift + H : 폴더 모든 페이지 문자열 수정하기
F8 : 오류 또는 경고 찾기(해당 페이지의 오류 또는 경고 위치로 이동)
Ctrl + w : 해당페이지 닫기

[출처] Visual Studio Code 단축키 정리(VSC)|작성자 범이월
[출처] 스파르타코딩
[출처] https://ofcourse.kr/html-course/HTML-%EC%9E%85%EB%AC%B8

오구오구

공부중,,엄청 열심히 하고 있습니다 (브이)

이전 포스트

CSS 배우기

다음 포스트