HTML 1. 톺아보기

728x90

📌 1. HTML이라는 것은?

하이퍼텍스트 마크업 랭퀴지(Hyper Text Markup Language)의 줄임말이며,
여기서 '하이퍼텍스트'는 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 이동할 수 있는 기능을 뜻하며, '마크업'은 태그를 사용해 제목이나 본문, 이미지를 표시하는 것이다.

📌 2.Tag 사용의 중요성

tag는 웹페이지 구성에 맞게 잘 사용하는 것이 중요하다.
제목에 abcd를 작성할 때, 아래 두가지 방법으로 코드를 입력할 수 있는데, 웹브라우저에서 봤을 때는 글자의 크기나 스타일이 동일해 보이지만 abcd를 검색했을 경우 h4태그를 사용한 후자가 더 검색이 잘 된다. 태그는 웹 문서에 표시하려는 내용을 전달하는 언어이기에 정확한 태그를 사용하는 것이 중요하다.

1) abcd
<span style = "font-size:15px"> abcd </span>

2)abcd
<h4>abcd</h4>

🟡 태그 사용시, 기억해야할 주의 사항!

(1) 태그는 <>를 이용해 구분한다.
ex)'photograph'의 약자인 'photo'를 표시하기 위해선 <photo> 태그를 사용한다.
웹브라우저는 <>안에있는 문자만 태그로 인식한다.

(2) 태그는 소문자를 사용한다.
태그는 대소문자를 구별하지 않지만 태그와 태그 안에 사용하는 속성들은 모두 소문자로 사 용하는 것이 좋다.

(3) 여는 태그와 닫는 태그를 정확하게 입력한다.
앞에서 <h1>로 태그를 열었으면 뒤에는 </h1>로 닫는 태그를 넣어주어야 태그 적용범 위로 인식한다. 닫는 태그도 있지만 닫는 태그가 필요란 태그에는 반드시 꼭 넣어주자.

(4) 들여쓰기를 사용한다.
단게별로 들여써서 태그간의 포함 관계를 눈으로 쉽게 확인 할 수 있도록 적절히 들 여쓰기 를 사용하는 것이 좋다. 들여쓰기를 할 때는 Tab키를 사용한다.

(5) 태그는 속성과 함께 사용한다.
<태그 속성 = "속성 값" 속성 = "속성 값"..>형태로 사용할 수 있다
ex) <img src = "이미지 파일 이름" width= 100%>
의 경우 src와 width는 태그의 보조 설명을 붙여주는 속성이 된다.

📌 3. HTML 기본구조 로직

 <!doctype html>
<html>
  <head>
    <meta charset="uft-8">
    <title>WEB1 - html</title>
  </head>
  <body>
    <h1> 헤드라인 </h1>
    <p> 본문내용 </p>
  </body>
</html>

HTML 기본 구조

<!doctype html> 은 웹 페이지가 HTML로 만들어졌다는 것을 뜻함.
<html> : <body>와 <head>를 감싸는 태그로 웹 문서의 시작과 끝을 나타내는 태그.
<head> : 본문을 설명하는 정보 태그. 실제 문서 내용이 아님. 스타일 및 스크립트 등 포함.
<body> : 본문 내용 태그로 실제 웹 브라우저 화면에 나타나는 내용.


>**HTML 기타 태그들**

HTML 기타 태그들

1. <title> : 웹 브라우저 제목 표시줄에 표시됨. 검색엔진은 제목 표시줄을 보고 페이지 전체의 내용 추측
2. <meta> : 문자 인코딩을 지정
3. <strong> : 문자를 진하게 표시함.
4. <u> : 문자에 밑줄
5. <h1>~<h6> : 제목 텍스트. 일반 텍스트보다 크고 진하게 표시됨. h1이 가장 크게 표시됨.
6. <p> : 문자 단락 생성. 정보로써 더 좋은 선택이 될 수 있음. 
  <p style = "color:red;"> This is red hat</p> 여기서 style 속성은 색상, 글꼴, 크기 등과 같은 요소에 스타일을 추가하는 역할을 함.
  하지만 코드 유지보수가 어려워서 css연결하여 사용하는 것이 용이
7. <br> : 줄 바꾸기. 닫힌 태그 없음! 여러번 <br><br>하면 줄 많이 바꿀 수 있음.
8. <img> : 이미지를 연결할 때 사용할 수 있으며,
  <img src ="이미지파일 이름" width="500" height = "600"> 이런식으로 너비와 높이도 같이 정의해주면서 사이즈를 조정할 수 있음
  <img src="img_girl.png" alt="Girl with a jaket"> alt속성은 img에 어떤 이유로 이미지를 표시할 수 없는 경우 이미지에 대한 대체 텍스트를 지정해주는 역할을 함.

728x90

'DEV' 카테고리의 다른 글

운영체제(정의, 목적, 분류) (0)	2024.10.20
JavaScript 시작하기 (0)	2024.10.20
CSS 들여다보기 (0)	2024.10.20
HTML 2. 구조 뜯어보기 (0)	2024.10.20
parameter(매개변수)와 argument(전달인자)의 비교 (0)	2021.04.18

camille

HTML 1. 톺아보기

📌 1. HTML이라는 것은?

📌 2.Tag 사용의 중요성

📌 3. HTML 기본구조 로직

'DEV' 카테고리의 다른 글

티스토리툴바

HTML 1. 톺아보기

📌 1. HTML이라는 것은?

📌 2.Tag 사용의 중요성

📌 3. HTML 기본구조 로직

'DEV' 카테고리의 다른 글

관련글

티스토리툴바