📌 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 기타 태그들
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에 어떤 이유로 이미지를 표시할 수 없는 경우 이미지에 대한 대체 텍스트를 지정해주는 역할을 함.
새로운 용어 알아갑니다 퍼가요~