티스토리 뷰
들어가며
본 글은 국민대학교 임베디드 소프트웨어 동아리 KOBOT의 과제를 위해 개인적인 기록용으로 유노코딩의 입문자를 위한 HTML 기초 강의의 내용을 정리한 포스트입니다.
내용
HTML : HyperText Markup Language
- HyperText : 하이퍼링크를 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트
- Markup : 이미지나 텍스트 등의 콘텐츠를 표시
- Language : 언어
즉 하이퍼 텍스트와 콘텐츠를 표시해 주는 언어이며 웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어로 말할 수 있다.
완성된 HTML 코드가 웹브라우저를 통해 해석되고 표현되는 과정을 렌더링이라고 한다.
텍스트 에디터에서 작성된 HTML 코드(*.html, *.htm)는 웹브라우저를 통해 표시할 수 있다.
웹브라우저의 개발자 도구
대부분의 최신 브라우저에 탑재되어 있으며 HTML, CSS 코드 확인, 모바일 모니터링, 네트워크 상태 점검, 스크립트 명령어 확인 등 다양한 기능을 통해 개발자에게 편의를 제공한다.
코드 에디터
프로그래머가 프로그램 소스 코드를 편집하기 위해 사용하는 소프트웨어
HTML 기초 문법
HTML 언어를 목적에 맞게 사용하기 위해서는 HTML 문법에 맞는 표현을 사용하여야 한다. HTML 문법에서의 핵심은 태그(tag)이다. 여기서 태그란 HTML 코드에서 정보(콘텐츠)를 정의하는 형식이다.
HTML 태그 사용법
태그는 <>과 </> 기호를 사용해 콘텐츠의 시작과 끝을 표시한다. 각 태그는 콘텐츠를 감싸며 태그명은 콘텐츠의 성격과 의미를 나타낸다.
ex)
<태그명>콘텐츠</태그명>
<p></p> 텍스트를 표시할 때 사용하는 태그
<strong></strong> 마찬가지로 텍스트를 표시할 때 사용하는 태그이나 좀 더 두꺼운 글씨를 표시한다.
그러나 경우에 따라 시작과 끝을 구분할 필요가 없는 태그도 존재하며 이를 단일 태그라 한다.
ex)
<태그명 /> or <태그명> 둘 중 아무것을 써도 상관없다.
<br> or <br /> 줄 들여 쓰기를 표시하는 태그
속성
속성은 태그의 부가적인 기능을 정의하는 것으로 선택사항이다. 속성은 시작 태그 내부에 정의하며 개수에는 특별한 제한이 없다.
태그명과 속성 정의는 공백으로 구분하며, 큰따옴표를 사용한다.
ex)
<태그명 속성명="속성값"> 콘텐츠 </태그명> or <태그명 속성명="속성값" />
<strong style="color:red;"></strong> 글자의 색상을 결정하는 속성
주석
주석은 여타 언어와 같이 사람에게는 보이지만 컴퓨터에게는 보이지 않는 코드이다.
ex) <!-- 주석 내용 -->
HTML 문서의 구조
<!DOCTYPE html> <!-- HTML의 최신 표준 문법으로 작성된 코드라는 의미의 단일 태그 -->
<html> <!-- HTML 문서의 시작과 끝을 나타내는 태그 -->
<head> <!-- HTML 문서에 대한 정보를 나타내는 태그, 즉 설정 태그 -->
<meta charset="UTF-8">
<title>문서의 제목</title>
</head>
<body> <!-- 브라우저 화면에 표시할 내용을 작성하는 곳 -->
실제 웹페이지에 표시할 내용
</body>
</html><!DOCTYPE html>
문서의 첫 부분에서 문서 유형을 지정하는 단일 태그 위 경우 타입은 html로 현재 표준으로 사용되고 있는 HTML 버전이라는 뜻이다.
오래된 문서의 수정 작업 같은 특수한 경우를 제외하곤 대개 html을 사용한다.
<html>~</html>
문서 유형을 지정한 후 실제 문서가 시작되고 끝나는 것을 나타내는 태그이다. <html>에서 HTML 문서가 시작되고 </html>에서 HTML문서가 끝난다. 이 태그의 내부에 다양한 태그들이 포함되어 문서의 내용을 구성한다.
<head>~</head>
웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보를 작성하는 태그이다. 정보를 표시하는 태그로 아래 두 개의 태그 외에도 여러 태그들이 존재한다.
<meta charset="utf-8">은 문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 단일 태그이다. 영문과 한글 모두 사용할 경우엔 보통 utf-8을 사용하는 편이 좋다.
<title>~</title>은 문서의 제목을 나타내는 태그이며 이 태그의 콘텐츠는 브라우저 탭에 표시된다.
<body>~</body>
실제 브라우저 화면에 표시될 내용을 입력하는 태그이다. 여기에는 다음과 같은 유형의 태그들이 포함될 수 있다.
- 텍스트를 표시하는 태그
- 이미지를 표시하는 태그
- 각종 사용자 인터페이스(버튼, 입력란, 드롭다운 메뉴 등)를 나타내는 태그
텍스트 태그
문단(paragraph)
p 태그는 문단 요소를 나타내는 태그로써, 가장 많이 사용되는 텍스트 태그이다. 하나의 p 태그는 하나의 문단을 표현한다. 문단과 문단 사이에는 공백이 있다.
<p>이것은 문단1을 나타내는 태그이다.</p>
<p>이것은 문단2를 나타내는 태그이다. 두 문단 사이에는 공백이 존재한다.이것은 문단1을 나타내는 태그이다.
이것은 문단2를 나타내는 태그이다. 두 문단 사이에는 공백이 존재한다.
제목(headline)
h 태그는 제목 요소를 나타내는 태그이다. 숫자와 함께 사용되며, 숫자는 1에서 6으로 1일 때 가장 크고 6일 때 가장 작다.
<h1>제목을 나타내자!</h1>
<h2>제목을 나타내자!</h2>
<h3>제목을 나타내자!</h3>
<h4>제목을 나타내자!</h4>
<h5>제목을 나타내자!</h5>
<h6>제목을 나타내자!</h6>제목을 나타내자!
제목을 나타내자!
제목을 나타내자!
제목을 나타내자!
제목을 나타내자!
제목을 나타내자!
수평선
<hr> 태그는 수평선을 표시하는 태그이다. 수평선은 주제 변경 또는 내용 구분을 위해 주로 사용된다.
<p>지금까지 스포츠 뉴스였습니다.</p>
<hr><!-- 주제 변경을 나타낸다. -->
<p>날씨입니다. 따뜻하지만 미세먼지가 가득할 예정입니다.</p>지금까지 스포츠 뉴스였습니다.
날씨입니다. 따뜻하지만 미세먼지가 가득할 예정입니다.
HTML 텍스트의 특징
일반적으로 엔터는 줄 바꿈을 의미하는 입력이지만, HTML 코드에서는 이를 무시한다. 또한 스페이스를 통한 공백도 한 번씩밖에 인정되지 않는다.
<p>스페이스 한 번만이 HTML에서 허락한 유일한 공백...</p>
<p>스페이스
한 번만이 HTML
에서 허락한 유일한 공백...</p>스페이스 한 번만이 HTML에서 허락한 유일한 공백...
스페이스 한 번만이 HTML 에서 허락한 유일한 공백...
줄 바꿈 태그와 공백문자
HTML에서는 br 태그가 줄 바꿈을 담당하고 공백을 두 번 이상 표시하고자 할 때 를 사용한다.
<p>
공 백
<br/>그리고<br/>줄<br/>바<br/>꿈
</p>
공 백
그리고
줄
바
꿈
태그의 구분
블록 레벨 요소 : 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다. ex) 앞서 살펴본 <p></p>, <h1></h1> 같은 태그를 블록 레벨 요소로 볼 수 있다.
인라인 요소 : 자기에게 필요한 만큼의 공간만 차지한다. ex) <strong></strong>, <em></em>, <mark></mark>와 같은 태그를 인라인 요소로 볼 수 있다.
이미지를 보여주는 img 태그
img 태그는 이미지를 표시할 때 사용하는 단일 태그이다. 콘텐츠를 적어주는 대신 표시할 이미지에 대한 정보를 속성으로 지정해야 한다.
ex) <img src="표시할 이미지 파일" alt="이미지 설명" />
표시할 이미지 지정
img 태그의 src 속성은 표시할 이미지의 위치정보와 파일명, 즉 url을 입력받는 속성이다. 서버에 위치한 이미지 파일과 내 컴퓨터에 저장된 파일 둘 다 허용된다.
이미지 설명(alt)
alt는 alternative의 약자로 대체 텍스트 역할을 한다.
이미지가 로딩되기 전이나 이미지 로딩에 실패한 경우 이미지 대신 대체 텍스트가 표시된다. alt를 사용하면 TTS로 이 alt 텍스트를 읽어 이미지를 볼 수 없는 시각장애인에게 웹페이지를 서비스해야 하는 상황에 대비가 가능하다.
이미지 크기 조절
img 태그를 통해 이미지를 표시할 때 이미지가 표시될 크기를 지정할 수 있다. 이때 너비와 높이를 각각 지정할 수 있다. 속성값으로는 정수값을 입력받으며 픽셀 단위로 적용된다.
ex) img src="표시할 이미지 파일" alt="이미지 설명" width="너비값" height="높이값"/>
컨테이너 태그
콘텐츠나 레이아웃에 아무런 영향도 주지 않고 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할을 하는 태그를 컨테이너라고 한다. 콘텐츠 내용을 구분하거나 공통적인 스타일을 적용하고자 할 때 개발자는 컨테이너를 사용하는 것이 좋다.
- <div></div> : 블록 레벨 컨테이너
- <span></span> : 인라인 컨테이너
위 태그를 통해 영역을 구분해 놓으면 CSS나 js를 통해 상호작용하기 편리해진다.
전역 속성(Global attributes)
전역 속성은 모든 HTML 태그에서 공통으로 사용할 수 있는 속성이다. 속성이란 태그의 부가적인 기능을 정의하는 것으로, 선택사항이다. 속성은 시작 태그의 내부에 정의한다. 속성의 개수에는 특별한 제한이 없다. 대표적인 전역 속성으론 아래와 같은 것이 있다.
- id : 요소에 고유한 이름을 부여하는 식별자 역할 속성
- class : 요소를 그룹 별로 묶을 수 있는 식별자 역할 속성
- style : 요소에 적용할 CSS 스타일을 선언하는 속성
- title : 요소의 추가 정보를 제공하는 텍스트 속성, 사용자에게 툴팁 제공
링크
링크란 현재 문서에서 다른 문서로 이동할 수 있는 수단이다.
anchor
a 태그 요소는 href 속성을 통해 다른 페이지, 전화번호, 이메일 주소와 그 외 다른 url로 연결할 수 있는 링크를 만든다. 인라인 요소이며 콘텐츠는 주로 링크의 목적지를 나타낸다.
<a href="https://www.naver.com">
기사 양반, 네이버로 갑시다.
</a>기사 양반, 네이버로 갑시다.
target
a 태그의 target 속성을 이용해 새로운 문서를 열 때 현재 탭에서 열지, 새로운 탭에서 열지 결정할 수 있다.
현재 탭에서 열기 : target="_self"
새 탭에서 열기 : taget="_blank"
전화번호와 메일주소
a 태그의 href에는 웹문서의 주소뿐 아니라 전화번호나 메일 주소 등을 지정할 수 있다. 사용법은 아래와 같다.
<a href="tel:010-1234-5678" target="_self"></a>
<a href="mailto:ericsky2850@gmail.com" target="_blank"></a>
이미지에 링크 만들기
아래와 같은 식으로 이미지를 통해 링크와 연결될 수 있도록 할 수 있다.
<a href="https://www.naver.com/">
<img src="images/study.png" width="300">
</a>
목록
목록은 연관 있는 항목(item)들을 나열한 것을 의미한다. HTML 목록은 순서 없는 목록과 순서 있는 목록으로 구분된다.
순서 없는 목록(unordered list)은 <ul> 태그를 사용한다.
<ul>
<li>토끼</li>
<li>다람쥐</li>
<li>청설모</li>
<li>호랑이</li>
</ul>- 토끼
- 다람쥐
- 청설모
- 호랑이
순서 있는 목록(ordered list)은 <ol> 태그를 사용한다.
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>- HTML
- CSS
- JavaScript
여기서 <li> 태그는 목록에 들어가는 항목 하나하나를 표현할 때 사용하는 태그이다. <li> 태그들을 감싸는 태그가 무엇이냐에 따라 앞에 붙는 기호가 달라진다.
input 태그
사용자로부터 값을 입력받을 수 있는 대화형 컨트롤(또는 필드)을 나타낸다. 기본적으로 인라인 요소이며, 단일태그이다.
<input />
type 속성
input 태그의 핵심으로 type의 값에 따라 입력 요소의 형태나 입력 데이터 유형 등이 달라진다. 사용 가능한 type은 20여 가지이며, 기본값은 text이다. type의 값이 달라짐에 따라 적용할 수 있는 추가 속성의 종류도 조금씩 차이를 보인다.
name 속성
어떤 type이던지 input 태그에는 name 식별자를 추가할 수 있다. 이는 js나 서버프로그램 등으로 사용자가 입력한 데이터를 처리해 줄 때 원활한 처리를 위해 꼭 필요한 작업이다.
<input type="text" name="nickname" />
<input type="text" name="job" />
여러 타입
사용하는 컴퓨터의 운영체제나 웹브라우저에 따라 생김새는 조금씩 달라질 수 있다.
<input type="text" /> <!-- 문자를 받는 입력 요소 --> <br><br>
<input type="button" /> <!-- 클릭을 할 수 있는 입력 요소 --> <br><br>
<input type="color" /> <!-- 색상을 선택할 수 있는 입력 요소 --> <br><br>
<input type="range" /> <!-- 값의 범위를 지정할 수 있는 입력 요소 --> <br><br>
<input type="date" /> <!-- 날짜를 선택할 수 있는 입력 요소 --> <br><br>type="text"의 속성
placeholder
사용자가 입력하기 전에 표시해 주는 속성
<input type="text" placeholder="메시지 입력..!">maxlength
텍스트 입력 개수를 제한하는 속성
<input type="text" maxlength="5" placeholder="5글자 넘게 입력해보세요">
type="button"의 속성
value
버튼에 표시할 텍스트를 지정하는 속성
<input type="button" value="PUSH">type="range"의 속성
max, min
range의 최댓값과 최솟값을 지정하는 속성
<input type="range" max="100" min="0">step
한 번 움직일 때마다 몇만큼 움직일지 지정하는 속성
<input type="range" max="100" min="0" step="10">select 태그
select는 다수의 옵션(선택지)을 포함할 수 있는 선택 메뉴이다. 메뉴 안에 포함되는 옵션은 option 태그를 사용해 표시한다. 또한 인라인 요소이다.
<select>
<option>스타벅스</option>
<option>커피빈</option>
<option>이디야</option>
<option>파스쿠찌</option>
</select>name, value
select에는 input과 마찬가지로 name을 지정할 수 있으며, 각각의 option에는 value 속성을 지정할 수 있다. value는 js나 서버프로그램 등에서 실제로 처리될 값을 나타낸다.
<select name="cafe">
<option value="starbucks">스타벅스</option>
<option value="coffeebean">커피빈</option>
<option value="ediya">이디야</option>
<option value="pascucci">파스쿠찌</option>
</select>
multiple
여러 개를 선택할 수 있도록 펼쳐진 메뉴가 나타난다. 값을 요구하지 않는 속성이다.
<select name="cafe" multiple>
<option value="starbucks">스타벅스</option>
<option value="coffeebean">커피빈</option>
<option value="ediya">이디야</option>
<option value="pascucci">파스쿠찌</option>
</select>selected
최초에 선택되어 있는 옵션을 지정하는 속성이다.
<select name="cafe" multiple>
<option value="starbucks">스타벅스</option>
<option value="coffeebean">커피빈</option>
<option value="ediya" selected>이디야</option>
<option value="pascucci">파스쿠찌</option>
</select>textarea 태그
textarea는 여러 줄의 일반 텍스트를 입력할 수 있는 입력 요소이다. textarea 또한 name을 추가하여 구별해 줄 수 있는 입력 요소이다. 줄 수가 길어질 경우 자동으로 스크롤이 생긴다. 또한 인라인 요소이다.
<textarea name="letter"></textarea>태그 사이의 콘텐츠는 기본적으로 쓰여 있는 텍스트를 나타낸다.
<textarea name="letter">기본적으로 쓰여 있는 텍스트</textarea>rows, cols
<textarea name="letter" rows="10" cols="10">기본적으로 쓰여 있는 텍스트</textarea>열과 행에 들어갈 글자의 개수를 지정하는 속성이나 그러나 글꼴이나 문자에 따라 행에 들어갈 글자 수는 달라질 수 있다.
form 태그
서버와 클라이언트
클라이언트(사용자)가 요청을 하면 서버는 그에 대한 응답으로 정보를 제공한다. 서버의 응답은 클라이언트가 어떤 요청을 보내는가에 따라 달라진다.
form 사용 예
form은 사용자가 입련한 데이터를 서버로 보내기 위해 사용하는 태그이다. 여기서 서버란 정보를 제공하는 호스트(host)이다. form은 입력 요소들을 감싸며 입력 값을 서버 측으로 제출할 수 있다.
보통 제출 버튼으로 input 태그 type 속성의 submit을 이용한다. 여기서 로그인 버튼을 누르면 입력된 아이디와 비밀번호가 서버로 전송되고(요청) 서버 측에서 데이터를 처리한 결과를 클라리언트에게 보내준다(응답).
<form>
<input type="text" placeholder="아이디">
<br>
<input type="text" placeholder="비밀번호">
<br>
<input type="submit" value="로그인">
</form>action
입력값을 전송할 서버의 url을 지정하는 속성이다. 여기서 url은 서버 프로그램의 주소나 파일명을 의미한다.
method
클라이언트가 입력한 데이터를 어느 방식으로 보낼지 지정하는 속성이다. 여기에는 GET과 POST가 있다.
GET : 서버에 요청을 보내여 응답을 받아낸다. 서버로부터 정보를 가져오겠다는 성격의 요청이다.
POST : 서버에 요청을 보내여 작업을 수행한다. 서버에 있는 데이터를 추가/수정/삭제한 후에 응답을 받아낸다는 정보를 조작하는 성격의 요청이다.
<form action="example.php" method="POST"></form>
meta 태그
meta 태그는 HTML 문서에 대한 메타데이터를 정의한다. 메타데이터란 데이터에 대한 데이터, 즉 정보를 의미한다.
meta 태그는 항상 head 태그의 안에 들어가며 일반적으로 문자 세트, 페이지 설명, 키워드 문서의 작성자 및 뷰포트를 설정하는 데 사용된다. 또한 웹페이지에 대한 정보를 제공하므로 검색엔진이 페이지를 검색할 때 참고할 수 있고 검색 결과에도 반영할 수 있다.
meta 태그 속성
- charset : 문자 세트
- http-equiv : 콘텐츠 속성 정보에 대한 http 헤더
- name : 문서 정보
- content : 메타데이터 내용
charset
문자 인코딩에 대한 요약 정보를 기입하는 속성이다. 문자 인코딩이란 한글을 표시하기 위해 문자 세트를 지정하는 작업으로 영문과 한글을 모두 사용하기 위해 utf-8 방식을 사용하는 것이 좋다. 만약 인코딩을 명확하게 기입해 두지 않으면 웹브라우저 설정에 따라 자동으로 인코딩을 추정해서 처리하여 문자가 깨질 가능성이 생긴다.
http-equiv
콘텐츠 속성 정보/값에 대한 HTTP 헤더를 제공한다. HTTP란 인터넷에서 데이터를 주고받을 수 있는 프로토콜이다.
<!-- IE 브라우저의 최신 버전의 엔진을 사용하라는 뜻 -->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<!-- 10초마다 페이지 새로고침하라는 뜻 -->
<meta http-equiv="refresh" content="10">
name
가장 쉬우면서 가장 많이 사용되는 속성으로 name은 메타 데이터의 이름을 의미하며 content 속성의 값과 함께 문서 정보를 이름+값 쌍의 형태로 제공한다.
<!-- 문서 제작자 -->
<meta name="author" content="유노코딩">
<!-- 페이지에 대한 요약. 브라우저 즐겨찾기 페이지의 기본 설명 값 -->
<meta name="description" content="페이지에 대한 짧고 명확한 요약">
<!-- 페이지 콘텐츠와 관련된 쉼표로 구분한 키워드 목록 -->
<meta name="keywords" content="예를 들명, 강아지, 고양이, 정보, 반려동물, 등등">
뷰포트(viewport)
뷰포트(viewport)란 현재 화면에 보여지고 있는 영역을 의미한다. 기기별로 뷰포트가 다르기 때문에 동일한 웹 페이지라도 기기에 따른 배율조정이 발생해 화면의 크기가 다르게 보이는 현상이 나타난다.
name="viewport"
기기별로 뷰포트가 다르기 때문에 발생하는 배율 문제에 대응하기 위해 meta 태그를 통해 뷰포트 관련 설정을 추가할 수 있다.
<!-- 뷰포트의 너비를 단말기 너비에 맞추고 초기 배율을 1로 한다. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
'공부한 내용 정리 > 웹' 카테고리의 다른 글
| CSS 레이아웃 - flex (0) | 2023.02.08 |
|---|---|
| JavaScript 기초 (0) | 2023.02.08 |
| CSS 기초 (0) | 2023.01.18 |