HTML 핵심 개념

Notice

Recent Posts

Recent Comments

Link

« 2024/09 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Tags more

Archives

Today

Total

관리 메뉴

JiYoung Dev 🖥

HTML 핵심 개념 본문

full stack/HTML, CSS

HTML 핵심 개념

Shinjio 2023. 3. 6. 19:04

2023.03.06 코드잇 학습 내용

🔎 HTML (Hypertext Markup Language)

- Hypertext(하이퍼텍스트) : 서로 링크로 연결된 문서

- Markup Language(마크업 랭귀지) : 마크업 하는 프로그래밍 언어

→ mark something up : 표시하다 ▶ 내용에 추가적인 정보를 표시하는 프로그래밍 언어

- 즉, 링크로 연결된 문서를 만들 때 사용하는, 내용뿐만 아니라 문서의 구조와 의미(h1, p, button 등)와 같은 추가적인 정보까지 표시하는 프로그래밍 언어

📖 HTML의 기본 문법

< a href = " ... " > ... < /a>
<태그이름 속성 = "값"> 내용 </태그이름>

html은 태그로 작성
태그는 < > 기호로 감싸져 있음
< 다음 태그 이름을 작성
< > 시작태그, </ > 종료태그
시작 태그와 종료 태그 사이에 내용이 들어감
시작 태그 내에는 속성 = "값"이 들어감

속성값을 참으로 하고 싶으면 속성 이름을 써주고, 거짓으로 하고 싶으면 아애 안 써주는 문법도 있음

📖 HTML 파일 구조

<!DOCTIYPE html> 이 문서가 html로 작성되었음을 의미

<html> html 문서 전체를 감싸는 태그

<head> 페이지에 대한 정보가 들어가는 부분

</head>

<body> 화면에 보이는 내용이 들어가는 부분

</body>

</html>

코멘트 

메모를 남길 때, 코드를 잠깐 감추고 싶을 때

단축키 Ctrl + /

🔎 링크

📖 링크의 상대 주소(relative URL)

./ 혹은 경로를 작성하지 않을 때 → 현재 폴더에서 찾기

../ → 부모 폴더(상위 폴더)에서 찾기

../../ 부모의 부모 폴더에서 찾기 → 폴더가 많아지면 사용이 어려움

/ → 최상위 폴더에서 찾기

참고로 index.html은 이름을 생략하고 폴더 이름만 쓸 수 있음

📖 페이지 안에서 이동하기

<a href="인터넷의_역사"> 인터넷의 역사 </a>
...
<h2 id="인터넷의_역사> 인터넷의 역사 </h2>

url 프래그먼트(URL Fragment)

페이지의 특정 부분을 가리키는 주소

원하는 곳에 id 속성을 지정해 두고, 링크 주소를 사용할 때는 맨 끝에 #으로 시작하는 #아이디-이름 을 쓰면 됨

주소의 맨 마지막에 붙어서 해당 주소의 일부분을 가리키는 용도

id 태그를 사용하여 제목을 붙이면 url 프래그먼트를 사용할 수 있음

띄어쓰기를 사용할 수 없음

주소 맨 뒤에 #id태그 이름 넣으면 페이지 안에서 해당 아이디로 이동

📖 새 창 열기(새 탭 열기) : target 속성

현재 창으로 열기 (기본값)
<a href="http://movie.naver.com target="_self"> 네이버 영화 </a>

새 창으로 열기
<a href="http://movie.naver.com target="_blank"> 네이버 영화 </a>

새 창으로 열기 + 원하는 이름으로 페이지 설정
<a href="http://movie.naver.com target="movie"> 네이버 영화 </a>
<a href="http://movie.daum.com target="movie"> 다음 영화 </a>
<a href="http://movie.korea.com target="movie"> 코리아 영화 </a>
네이버 영화를 새 창으로 열고 그 탭을 movie 라는 이름으로 지정
다음 영화와 코리아 영화는 movie 탭에서 열림

📖 URI 스킴(URI Scheme)

링크 태그의 '페이지 연결' 외의 다른 동작

⚙ 이메일 보내기

<a href="mailto:test@example.com">메일 보내기</a>

⚙ 전화 걸기 → 스마트폰에서 사용 가능

<a href="tel:+821012340123">전화 걸기</a>

🔎 텍스트

📖 제목태그 <h1>~<h6>

문서의 제목을 나타내는 태그

<h1>제목태그1</h1>
<h2>제목태그2</h2>
<h3>제목태그3</h3>
<h4>제목태그4</h4>
<h5>제목태그5</h5>
<h6>제목태그6</h6>

📖 본문 <p>

본문을 작성할 때 쓰는 태그

📖 줄 바꿈 <br>

제목이나 본문 같은 데서 줄을 바꿀 때 사용하는 태그

📖 중요 <strong>

중요한 내용을 강조해서 표시할 때 사용하는 태그

크롬 브라우저에서는 기본적으로 <strong> 태그를 두꺼운 글씨로 보여줌

주의할 점은 두꺼운 글씨를 쓰고 싶다고 이 태그를 사용하면 안 됨. 꾸미기 위한 두꺼운 글씨는 css로 작성하고, 의미상 강조의 의미가 있는 경우에만 <strong>을 사용

<strong>strong 태그를 사용했습니다.</strong>

📖 강조 <em>

일반적인 문장이지만 조금 다르게 읽어서 강조

크롬 브라우저에서는 <em> 태그의 기본 디자인을 기울어진 글씨로 보여줌

<em>강조</em> 태그를 사용했습니다.

📖 취소 <s>

어떤 내용을 적었다가 지우지 않고, 지웠다는 표시만 남기도 싶을 때

<s>취소 태그를 사용했습니다.</s>

📖 인용 <blockquote>, <q>

다른 곳에서 가져온 내용을 긴 글로 인용할 때 → <blockquote>

글 안에서 짧게 인용할 때 → <q>

크롬 브라우저에서는 기본적으로 <q> 태그를 따옴표로 감싸는 디자인으로 보여줌

<blockquote>인용태그를 사용했습니다. 긴 글로 인용할 때 사용합니다.</blockquote>
<q>짧게 인용할 때는 q태그를 사용합니다.</q>

📖 위 첨자, 아래 첨자

위 첨자 → <sup>첨자로 표기하고 싶은 문자</sup>

아래 첨자 → <sub>첨자로 표기하고 싶은 문자</sub>

아래첨자 : H<sub>2</sub>O <br>
위첨자 : 2<sup>3</sup> <br>

📖 주제 전환(thematic break) <hr>

글에서 주제를 전환할 때 쓰는 태그

브라우저에서는 기본적으로 가로 선을 그어 보여줌

주제 전환을 위해봅니다.
<hr>

📖 미리 서식이 정해진 텍스트 <pre>

HTML에 적혀있는 그대로 보여주는 태그

코드를 쓸 때 많이 사용

HTML에 적혀있는 그래도 보여주는 태그입니다.
<pre>
body {
background-color: #ffffff;
}
</pre>

📖 코드 <code>

글 안에서 짧은 코드를 작성할 때 사용

글 안에서 짧은 코드를 작성할 때 사용합니다. <code>body</code>

🔎 리스트

📖 순서 리스트(ordered list)

항목들 사이에 순서가 있는 목록을 작성할 때 사용. 순서 리스트는 태그 자체가 순서의 의미를 가지고 있기 때문에 코드에 적혀있는 순서대로 내용의 순서가 생김.

<ol>이라는 태그를 감싸고, 그 안에 항목은 <li> 태그 사용

<ol>
<li>라라랜드</li>
<li>명량</li>
<li>겨울왕국</li>
<li>토르</li>
<li>어벤져스</li>
<li>극한직업</li>
</ol>

📖 순서 없는 리스트 (unordered list)

항목들 사이에 순서가 없는 목록을 작성할 때 사용

<ul> 이라는 태그를 감싸고, 그 안에 항목은 <li> 태그 사용

<ul>
<li>한국 영화</li>
<li>외국 영화</li>
<li>드라마</li>
<li>예능</li>
</ul>

📖 리스트 스타일링

⚙ html에서 type 속성 사용

type="1" 아라비아 숫자

type="i" 로마 숫자

type="I" 대문자 로마 숫자

type="A" 대문자 알파벳순

type="a" 소문자 알파벳순

<ol type="i">
<li>라라랜드</li>
<li>명량</li>
<li>겨울왕국</li>
<li>토르</li>
<li>어벤져스</li>
<li>극한직업</li>
</ol>

⚙ css에서 list-style 속성 사용

순서가 없는 스타일로 변경
ol {
list-style: disc;
}

기호를 없애고 리스트 항목을 한 줄로 쓰고 싶을 때 (내비게이션바 만들 때 자주 활용)
ul > li {
list-style: none;
display: inline-block;
border: 1px solid #dddddd;
border-radius: 24px;
padding: 8px;
}

🔎 테이블

<table> 표 전체를 감싸는 태그
<tr> table row, 행을 나누는 태그
<td> table data 각 데이터 입력

<table>
<tr>
<td></td>
<td>Premium</td>
<td>Standard</td>
<td>Basic</td>
</tr>
<tr>
<td></td>
<td>15900원</td>
<td>10900원</td>
<td>8900원</td>
</tr>
<tr>
<td>모바일+태블릿+PC</td>
<td>지원</td>
<td>지원</td>
<td>지원</td>
</tr>
<tr>
<td>TV</td>
<td>지원</td>
<td>지원</td>
<td>지원</td>
</tr>
<tr>
<td>화질</td>
<td>최대</td>
<td>FHD</td>
<td>HD</td>
</tr>
</table>

📖 머리글 바닥글

⚙ 머리글

<thead> 태그 사용하고 각 행 안에 있는 것들은 제목이므로 <th> 사용

본문에 해당하는 행은 <tbody>로 감싸기

⚙ 바닥글

표에서 바닥글은 <tfoot> 태그로 감쌈. <thead>와 마찬가지로 행은 <tr>로 감싸고, 제목으로 쓰는 칸은 <th> 태그를 넣음

<table>
<thead>
<tr>
<th></th>
<th>Premium</th>
<td>Standard</th>
<th>Basic</th>
</tr>
<tr>
<th></th>
<th>15900원</th>
<th>10900원</th>
<th>8900원</th>
</tr>
</thead>
<tbody>
<tr>
<th>모바일+태블릿+PC</th>
<td>지원</td>
<td>지원</td>
<td>지원</td>
</tr>
<tr>
<th>TV</th>
<td>지원</td>
<td>지원</td>
<td>지원</td>
</tr>
<tr>
<th>화질</th>
<td>최대</td>
<td>FHD</td>
<td>HD</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th>15900원</th>
<th>10900원</th>
<th>8900원</th>
</tr>
</tfoot>
</table>

📖 테이블 스타일링

⚙ 테두리 넣기

border 속성을 이용해 테이블 전체에 테두리를 지정하거나 각 칸마다 테두리를 지정할 수 있음

⚙ 테두리 겹치기

기본적으로 표의 테두리는 서로 간격이 있어 표 전체, 각 셀마다 보임. 간격을 없애기 위해 border-collapse 속성 사용

⚙ 테두리 간격

테두리 사이의 간격을 직접 조절하고 싶다면 border-spacing 속성 사용

table {
border: 3px solid red;
border-collapse: collapse; 테두리 사이 간격 없애기 (첫 번째 사진)
border-spacing: 15px; 테두리 사이 간격 15px (두 번째 사진)
}

th, td {
border: 1px solid blue;
}

🔎 멀티미디어

📖 이미지

<img src="이미지_주소" alt="이미지에_대한_설명" width="너비" height="높이">

※ 너비, 높이는 단위 없이 작성하며, 단위는 px임

📖 비디오

<video src="파일_주소" autoplay muted controls width="너비" height="높이"></video>

※ autoplay : 속성 이름만 적어주면 적용하겠다는 뜻으로 자동 재생을 할 때 사용
→ 단, 크롬브라우저는 muted(음소거)까지 지정을 해줘야 자동 재생이 됨
※ controls 프로그레스바, 재생버튼 등

📖 오디오

<audio src="파일_주소" controls autoplays></audio>

※ 기본적으로 오디오 태그는 화면에 보이지 않음
※ controls로 화면에 보여줌
※ autoplays 자동재생, 크롬에서는 작동하지 않음

📖 iframe

inline frame이라는 뜻. html 문서 안에서 다른 html 문서를 보여주는 것으로 지도를 넣거나, 결제창을 띄울 때 등 사용

<iframe src="파일_주소" width="너비" height="높이"></iframe>

🔎 폼(form)

작성한 데이터를 전송할 수 있는 태그

내용을 적는 칸 → 인풋(input)

인풋은 문자, 숫자, 비밀번호, 라디오, 체크박스, 버튼 등 다양한 입력값을 받을 수 있음

각 인풋 옆에 적인 내용 (인풋의 설명을 적음) → 라벨(label)

입력한 내용을 전송 → 버튼(button)

📖 폼 만들기

<foam>
<div>
<label for="signup-email"> 이메일 </label>
<input id="signup-email" name="email" type="email">
</div>
<div>
<label for="signup-password"> 비밀번호 </label>
<input id="signup-password" name="password" type="password">
</div>
</foam>

※ label 안에 input을 넣는 경우 라벨을 클릭할 때마다 인풋에 커서가 생김 혹은 input id와 label for 속성을 일치시키면 똑같이 작동함
※ name 인풋에 입력한 값을 서버로 보내기 위해 필요함. 입력한 데이터에 이름을 붙여주는 것

📖 버튼

<foam>
<div>
<label for="signup-email"> 이메일 </label>
<input id="signup-email" name="email" type="email">
</div>
<div>
<label for="signup-password"> 비밀번호 </label>
<input id="signup-password" name="password" type="password">
</div>
<button type="button">
확인
</button>
<button type="reset">
취소
</button>
</foam>

※ 버튼은 기본적으로 폼 안에 있으면 눌렀을 때 데이터를 서버로 전송함
※ type 속성으로 동작을 바꿀 수 있음.
- submit(기본값) 전송
- button 전송 X
- reset 내용을 초기화

폼 전송하기

1) action 속성

폼에 입력한 내용을 다른 페이지로 이동

<form action="http://google.com/search">

2) method 속성

웹 브라우저는 페이지를 이동하거나, 어떤 데이터를 전송할 때 서버에 "리퀘스트"라는 걸 보냄. 리퀘스트의 종류는 여러 가지가 있는데 그중 GET 리퀘스트는 데이터를 받을 때 사용하고, POST 리퀘스트는 데이터를 보낼 때 사용. 폼 버튼을 눌렀을 때 페이지를 이동하는 건, 웹 브라우저가 어떤 서버로 GET 리퀘스트를 보낸 것. 그러나 파일의 크기가 너무 큰 경우 GET 리퀘스트와 쿼리 문자열만으로는 보낼 수 없음. 이럴 때 POST 리퀘스트를 사용. <foam> 태그의 method 속성을 바꿔주면 POST 리퀘스트를 보낼 수 있음

<foam method="post">

📖 다양한 인풋

⚙ 체크박스 checkbox

<label>
<input name="agreement" type="checkbox">
동의합니다
</label>

※ 체크박스에 체크하는 경우 agreement의 값이 on이라는 문자열로 지정

⚙ 여러 항목 중에서 몇 항목을 선택하는 경우

<input> 태그에 value 속성으로 값을 지정해 주면, 선택된 항목의 지정된 값이 쓰임

<label for="film">좋아하는 영화 장르</label>
<label>
<input name="film" value="action">
액션
</label>
<label>
<input name="film" value="comedy">
코미디
</label>
<label>
<input name="film" value="romance">
로맨스
</label>

⚙ 날짜

<input name="birthdate" type="date">

⚙ 파일 file

파일을 선택할 수 있는 인풋

<input name="avatar" type="file" accept=".png,.jpg" multiple>

※ accept 속성 활용하여 허용할 파일 확장자를 지정할 수 있음
※ multiple이라는 참/거짓 속성을 사용하여 여러 개 또는 한 개만 선택하도록 정할 수 있음
→ multiple을 입력하면 여러 개 선택 가능

⚙ 이메일 email

텍스트를 입력할 수 있는 건 똑같지만, 버튼을 눌러서 폼을 전송할 때 올바른 이메일 형식인지 자동으로 검사

<input name="email" type="email">

⚙ 숫자 number

숫자를 입력하고, 최소 최대 값이나 버튼을 눌렀을 때 증가, 감소할 양을 정할 수 있음

<input type="number" min="100" max="1000" step="100">

⚙ 비밀번호 password

값을 입력했을 때 입력한 내용이 가려짐

<input type="password">

⚙ 라디오 radio

동그란 선택 버튼으로 체크박스와 다르게 여러 항목 중 하나의 항목만 선택할 수 있음. value 속성과 같이 사용하면, 같은 name을 가진 <input> 태그들 중에 선택한 <input>의 value 값을 입력하도록 할 수 있음

<input id="very-bad" name="feeling" value="0" type="radio">
<label for="very-bad">아주 나쁨</label>
<input id="bad" name="feeling" value="1" type="radio">
<label for="bad">나쁨</label>
<input id="soso" name="feeling" value="2" type="radio">
<label for="soso">보통</label>
<input id="good" name="feeling" value="3" type="radio">
<label for="good">좋음</label>
<input id="very-good" name="feeling" value="4" type="radio">
<label for="very-good">아주 좋음</label>

⚙ 범위 range

범위 안에서 선택할 수 있는 인풋

<label for="signup-feeling">현재 기분</label>
<input id="signup-feeling" name="feeling" min="1" min="10" type="range">

⚙ 텍스트 text

인풋 타입의 기본 값으로 일반적인 텍스트를 입력할 때 사용

<input name="nickname" type="text">

⚙ 옵션 선택 <select>

미리 정해져 있는 여러 값들 중에서 하나를 선택할 수 있는 태그. <select> 태그 안에 <option> 태그를 value와 함께 사용

<label for="genre">장르</label>
<select id="genre" name="genre">
<option value="korean">한국 영화</option>
<option value="foreign">외국 영화</option>
<option value="drama">드라마</option>
<option value="documentary">다큐멘터리</option>
<option value="vareity">예능</option>
</select>

⚙ 긴글 <textarea>

긴 글을 입력할 수 있는 인풋. <input> 태그와 달리 반드시 종료 태그 </textarea>를 써 주어야 함

<textarea name="content"></textarea>

📖 유용한 인풋 태그 속성

⚙ 값이 비어있을 때 보여주는 값 placeholder

<input name="username" placeholder="이메일 또는 휴대전화">

⚙ 반드시 입력해야 하는 값 required

폼에서 반드시 입력해야 하는 값이 있을 때 사용. 만약 required인 인풋의 값이 비어있다면, 전송 버튼을 눌러도 전송되지 않음

<input name="email" type="email" required>

⚙ 자동 완성 autocomplete

예전에 입력한 값들을 보여주는 속성으로 이 속성을 지정해 두면 폼이 전송될 때마다 입력한 값을 웹 브라우저에 저장해 두고, 나중에 인풋에 값을 입력할 때 추천해 줌.

<input name="search" type="text" autocomplete="on"> ※ on 값을 지정해 줘야 함!

이메일을 채워 넣고 싶을 때
<input name="email" type="email" autocomplete="email">

전화번호를 채워 넣고 싶을 때
<input name="telephone" autocomplete="tel">

🔎 다른 코드 불러오기

📖 link 태그

html문서에서 외부에 있는 걸 불러올 때 사용 (ex. css 파일, 아이콘을 불러올 때)

<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico">

※ rel에는 불러올 파일이 어떤 종류인지 작성

📖 script 태그

웹사이트를 마치 프로그램처럼 쓸 수 있는 것은 자바스크립트 덕분.

css처럼 script.js 파일로 따로 저장 후 연결 가능

<script src="파일_주소"></script>

※ <body> 태그 안에 작성
※ 닫는 태그를 꼭 작성해야 함

🔎 의미 있는 HTML

📖 시맨틱 태그(semantic tag)

<div>와 기능은 똑같지만, 의미를 가진 태그

엄격한 사용법이 있는 건 아니고, 작성하는 사람의 의도가 중요함

태그 이름	용도
<header>	영역 위쪽에서 로고나 제목, 메뉴 같은 걸 담고 있는 도입부
<main>	사이트의 본격적인 내용으로 페이지에서 딱 한 번만 사용 가능
<footer>	영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 있음
<article>	하나의 완성된, 독립적인 내용을 나타내는 영역
<section>	어떤 것의 일부분을 나타내는 영역
<figure>	이미지와, 이미지 설명을 담고 있는 영억

시맨틱 태그를 사용하면 좋은 점

1. 검색 최적화 (search engine optimization SEO)

2. 웹 접근성(web accecibility)

'full stack > HTML, CSS' 카테고리의 다른 글

WEB & HTML 정의와 역사 / HTML 태그 (2023.04.21) (1)	2023.04.23
CSS 레이아웃 : Position, Flex (0)	2023.03.08
CSS 핵심 개념 (1)	2023.03.03
[웹퍼블리싱] CSS 시작하기 / 페이지끼리 연결하기 (0)	2023.02.28
[웹퍼블리싱] HTML 시작하기 (0)	2023.02.28

'full stack/HTML, CSS' Related Articles

JiYoung Dev 🖥

HTML 핵심 개념 본문

HTML 핵심 개념

🔎 HTML (Hypertext Markup Language)

📖 HTML의 기본 문법

📖 HTML 파일 구조

🔎 링크

📖 링크의 상대 주소(relative URL)

📖 페이지 안에서 이동하기

📖 새 창 열기(새 탭 열기) : target 속성

📖 URI 스킴(URI Scheme)

⚙ 이메일 보내기

⚙ 전화 걸기 → 스마트폰에서 사용 가능

🔎 텍스트

📖 제목태그 <h1>~<h6>

📖 본문 <p>

📖 줄 바꿈 <br>

📖 중요 <strong>

📖 강조 <em>

📖 취소 <s>

📖 인용 <blockquote>, <q>

📖 위 첨자, 아래 첨자

📖 주제 전환(thematic break) <hr>

📖 미리 서식이 정해진 텍스트 <pre>

📖 코드 <code>

🔎 리스트

📖 순서 리스트(ordered list)

📖 순서 없는 리스트 (unordered list)

📖 리스트 스타일링

⚙ html에서 type 속성 사용

⚙ css에서 list-style 속성 사용

🔎 테이블

📖 머리글 바닥글

⚙ 머리글

⚙ 바닥글

📖 테이블 스타일링

⚙ 테두리 넣기

⚙ 테두리 겹치기

⚙ 테두리 간격

🔎 멀티미디어

📖 이미지

📖 비디오

📖 오디오

📖 iframe

🔎 폼(form)

📖 폼 만들기

📖 버튼

📖 다양한 인풋

⚙ 체크박스 checkbox

⚙ 여러 항목 중에서 몇 항목을 선택하는 경우

⚙ 날짜

⚙ 파일 file

⚙ 이메일 email

⚙ 숫자 number

⚙ 비밀번호 password

⚙ 라디오 radio

⚙ 범위 range

⚙ 텍스트 text

⚙ 옵션 선택 <select>

⚙ 긴글 <textarea>

📖 유용한 인풋 태그 속성

⚙ 값이 비어있을 때 보여주는 값 placeholder

⚙ 반드시 입력해야 하는 값 required

⚙ 자동 완성 autocomplete

🔎 다른 코드 불러오기

📖 link 태그

📖 script 태그

🔎 의미 있는 HTML

📖 시맨틱 태그(semantic tag)

'full stack > HTML, CSS' 카테고리의 다른 글

티스토리툴바