본문 바로가기
Web Programming/Step1. HTML

프로그래밍 입문자를 위한 HTML 기초

눈떠보니 월요일 2023. 3. 6. 19:36

목차

1. HTML이란?

HTML, HyperText Markup Language

  • HyperText : 하이퍼링크를 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트
  • Markup : (콘텐츠를) 표시하다(HTML의 문법적 특성)
  • Language : 언어

하이퍼 텍스트와 콘텐츠를 표시해주는 언어이다.

쉽게 말해, HTML은 웹브라우저를 통해 표시되는 웹페이지인 콘텐츠를 정의하기 위해 사용하는 언어이다.

 

HTML  문서 만들기

파일을 수정하고 싶다면, 텍스트 편집기로 열기

  • 메모장, Brackets, VSCode 등

결과(웹페이지)를 확인하고 싶다면, 웹브라우저로 열기

  • 크롬, 사파리, 익스플로러, 엣지 등

 

개발자 도구란? (F12)

  • 웹 사이트 개발용 도구로, 대부분의 최신 브라우저에는 개발자 도구가 탑재되어 있다.
  • HTML, CSS 코드 확인, 모바일 모니터링, 네트워크 상태 점검,  스크립트 명령어 확인 등 가능

2. HTML 시작하기 - HTML 기본 문법 및 작성 방법

[HTML 코드 기초 문법]

태그 사용법

  • 태그 사용 기본 형태 <태그명> </태그명>
  • 단일 태그 사용 형태 <태그명/> 또는 <태그명>

 

속성

  • <태그명 속성명=”속성값”> </태그명>
  • <태그명 속성명=”속성값”/>
  • 태그명과 속성 정의는 공백으로 구분하며, 큰 따옴표를 사용한다.

주석

<!-- 어쩌구저쩌구-->

[HTML 문서 기본 구조]

<!DOCTYPE html> <!--HTML 표준 문법으로 작성된 문서다 라는 정의-->
<html> <!--문서의 시작과 끝-->
    <head> <!--웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야할 정보들이 모두 들어있는 태그-->
        <meta chatset="utf-8"> <!--문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 단일 태그-->
        <title>문서의 제목</title>
    </head>
    <body> <!--실제 브라우저 화면에 표시될 내용을 입력하는 태그-->
        화면에 표시할 내용
    </body>
</html>

 

3. 콘텐츠 표시하기 - 텍스트, 이미지, 링크 그리고 목록

[택스트 태그 사용 방법과 특징]

문단(paragraph)

  • P 태그
  • 문단과 문단 사이에는 공백이 있다.
  • 긴 문장을 쓸 때 쓰임

제목(headline)

  • 제목 요소를 나타내며 1일 때 가장 크고 6일 때 가장 작다.
  • <h1></h1> ~ <h6></h6>

수평선(horizon)

  • 수평선 표시하는 태그 – 주제 변경 또는 내용 구분을 위해 주로 쓰임
  • <hr>

줄바꿈 및 공백

  • 줄바꿈 - <br>
  • 공백을 두 번 이상 표시 - &nbsp;

[태그의 구분과 인라인 텍스트 요소]

블록 레벨 요소를 만드는 태그 vs 인라인 요소를 만드는 태그

  • 개발자 도구에서 커서를 올려 놓으면 확인 가능함.
  • 블록 레벨 요소 : 자기가 속한 영역의 너비를 모두 차지하여 블록 형성(h, p)
  • 인라인 레벨 요소 : 자기에게 필요한 만큼의 공간만 차지(strong:굵게, em:기울임, mark:하이라이트)

[이미지 표시하기]

기본 형태<img src=”표시할 이미지 파일” alt=이미지 설명”>

  • Src (Source)속성 : 표시할 이미지의 위치 정보와 파일명(서버에 저장된 정보or로컬에 있는 파일)
  • Alt 속성 – 이미지 유실 대비 : 이미지가 로딩되기 전이나 이미지 로딩에 실패한 경우 이미지 대신에 대체 텍스트 표시(음성도 가능)
  • Width=”너비값” height=”높이값” : 각각 픽셀(px) 단위로 적용된다.(정수값 입력)

[컨테이너 그리고 전역 속성]

컨테이너

  • 콘텐츠나 레이아웃에 아무런 영향을 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할을 하는 태그

콘텐츠 내용을 구분하거나, 공통적인 스타일을 적용하고자 할 때 사용

<div></div> : 블록 레벨 컨테이너 -> 영역을 지정해줄때 쓰임

<span></span> : 인라인 레벨 컨테이너 -> 특정 단어에만 스타일을 줄 때

 

전역속성

모든 HTML 태그에서 공통으로 사용할 수 있는 속성

  • Id : 요소에 고유한 이름을 부여하는 식별자 역할 속성
  • Class : 요소를 그룹별로 묶을 수 있는 식별자 역할 속성(모든 태그에 추가 될 수 있고 여러 개의 태그가 동일한 클래스를 가질 수 있다)
  • style : 요소에 적용할 CSS 스타일을 선언하는 속성
  • title : 요소의 추가 정보를 제공하는 텍스트 속성. 사용자에게 툴팁 제공

(툴팁 : 요소 마우스를 올려두면 나오는 작은 말풍선)

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

[링크 만들기]

링크 anchor

  • 현재 문서에서 다른 문서로 이동할 수 있는 수단
  • <a href=””></a> : 인라인 요소, 콘텐츠는 주로 링크의 목적지
  • a 태그 안에는 텍스트 이미지 둘다 가능
target=”_self” 현재 탭에서 열기(기본값)
target=”_blank” 새로운 문서를 열기
href=”tel:010-1234-5678” 전화 걸기
href=”mailto:abcd@naver.com” 메일 쓰기

[목록 표시하기]

  • 연관 있는 항목들을 나열한 것을 의미 <ul><ol><li> : 블록 레벨 요소
<!-- 순서 없는 목록 -->
<ul>
  <li>토끼</li>
</ul>
<!-- 순서 있는 목록 -->
<ol>
  <li>토끼</li>
</ol>

4. 입력요소 - 사용자 입력을 받는 다양한 방법

[입력 요소 만들기]

input 태그

  • 사용자로부터 값을 입력 받을 수 있는 대화형 컨트롤(필드)
  • 인라인 요소이며, 단일 태그이다.
  • type은 20여가지이며, 기본값은 text이다.
  • name을 통한 입력요소의 구분은 매우 중요함

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

<!DOCTYPE html>
<html>
    <head>
        <meta chatset="utf-8">
        <title>Input 태그 공부하기</title>
    </head>
    <body>
        <input name="text" type="text" maxlength="10" placeholder="내용을 입력하세요."><br><br>
        <input name="push" type="button" value="검색"><br><br>
        <input name="color" type="color"> 색상을 선택하시오<br><br>
        <input name="score" type="range" max="100" min="0" step="10"><br><br>
        <input name="date" type="date"><br><br>
    </body>
</html>

[Input 태그외의 입력 요소들 - select 그리고 textarea]

select

  • 다수의 옵션을 포함할 수 있는 선택 메뉴(드롭 다운 메뉴)
  • name을 지정할 수 있으며, 각각의 option에는 value 속성을 지정해 실제 처리될 값 지정이 가능하다.
  • multiple – 드롭 다운이 아님 펼쳐서
  • selected – 기본으로 선택

textarea

  • 여러 줄의 일반 텍스트를 입력할 수 있는 요소
  • name을 추가하여 구별해줄 수 있음
<!DOCTYPE html>
<html>
    <head>
        <meta chatset="utf-8">
        <title>다양한 입력 요소</title>
    </head>
    <body>
        <h1>좋아하는 색깔 고르기</h1>
        <select name="color" multiple>
            <option value="blue">파랑</option>
            <option value="red">빨강</option>
            <option value="black" selected>검정</option>
            <option value="green">초록</option>
        </select>
        <br>
        <textarea name="content" row="3" cols="10">
                기본적으로 써있는 텍스트
        </textarea>
    </body>
</html>

[폼(form) 태그]

form

  • 사용자가 입력한 데이터 입력값을 서버로 보내기 위해 사용하는 태그
  • 입력 요소들을 감싸며, 입력 값을 서버 측으로 submit할 수 있다.
form 태그의 속성 의미
action 입력값을 전송할 서버의 url
method 클라이언트가 입력한 데이털르 어떤식으로 전송할지(GET or POST)

GET : 서버에 요청을 보내어 응답을 받아낸다(서버로부터 정보를 가져오겠다라는 성격)

POST : 서버에 요청을 보내어 작업을 수행(서버의 정보를 조작하겠다라는 성격)

<!DOCTYPE html>
<html>
    <head>
        <meta chatset="utf-8">
        <title>서버에 요청을 보내자</title>
    </head>
    <body>
        <h1>좋아하는 색 고르기</h1>
        <form action="exam.php" method="POST">
            <input type="text" placeholder="Name" name="name">
            <br>
            <select name="color">
                <option value="red">빨강</option>
                <option value="blue">파랑</option>
                <option value="green">초록</option>
            </select>
            <br>
            <input type="submit" value="전송">
        </form>
    </body>
</html>

5. 한걸음 더 나아가기 - 웹 사이트의 사용성을 향상시키는 방법

[매타 태그(meta)]

mate 태그

  • HTML 문서에 대한 메타 데이터를 정의 (데이터, 즉 정보를 의미한다.)
  • head 태그의 안에 들어가며 일반적으로 문자 세트, 페이지 설명, 키워드, 문서의 작성자 및 뷰포트 설정을 지정하는데 사용

meta 태그 사용 이유?

  • 웹 페이지레 대한 정볼르 제공하므로 검색엔진이 이 페이지를 검색할 때 참고할 수 있고, 검색결과에도 반영할 수 있다.(검색 엔진 최적화)

mate 태그가 제공하는 메타 데이터의 유형과 속성?

  • charset : 문자세트
    • 문자 인코딩에 대한 요약 정보를 기입
  • http-equiv : 콘텐츠 속성 정보에 대한 http 헤더
    •  콘텐츠 속성의 정보/값에 대한 HTTP 헤더를 제공
    •  HTTP란 인터넷에서 데이터를 주고 받을 수 있는 프로토콜
  • name : 문서 정보를 제공하는 이름
  • content : 메타데이터 구체적인 내용
<!--문자 인코딩-->
<meta chatset="utf-8">
<!--IE 브라우저의 최신 버전의 엔진을 사용하세요-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<!-- 10초마다 페이지 새로고침-->
<meta http-equiv="refresh" content="10">
<!--문서 제작자-->
<meta name="author" content="작성자이름">
<!--페이지에 대한 요약, 브라우저 즐겨찾기 페이지의 기본 설명 값-->
<meta name="description" conten="페이지에 대한 짧고 명확한 요약">
<!--페이지의 콘텐츠와 관련된, 쉼표로 구분한 키워드 목록/ 해시태그 같은 느낌-->
<meta name="keywords" content="예를 들면, 빨강, 파랑, 초록 등">

[뷰포트(viewport)]

  • 다양한 기기로 화면을 보자
  • 뷰포트란? 현재 화면에 보여지는 영역을 의미
  • 기기에 따른 배율 조정이 발생해 화면의 크기가 다르게 보이는 현상

 

배율 문제에 대응하기 위해 meta 태그를 통해 뷰포트 관련 설정 추가

<meta name="viewport" content="width=device-width, initial-scale=1.0">

initial-scale=1.0 : 확대나 축소 없이 그대로 표시하겠다.

강의 : https://class101.net/ko/products/6177bd8f05add900144fe45a

티스토리툴바