HTML
html 태그의 기본 문법을 알아보자!!
html 파일 자체의 정보를 나타내자.
html 파일에 정보값을 주기 위해 메타 태그나 시맨틱 태그를 활용할 수 있다.
1. html이란
css는 웹의 디자인을 꾸미는 부가적인 요소로, 웹을 이루는 기본 뼈대는 결국 html이다!!
html: Hypertext Markup Language 의 줄임말
- 하이퍼텍스트: 서로 링크로 연결된 문서를 뜻함. 무슨 단어를 클릭하면 다른 링크로 넘어가는 등, 웹들은 서로 다른 여러 링크들로 연결되어있다.
- 마크업: 마크업은 실질적인 내용이 아니라 내용에 제목, 이미지, 링크 등의 표시를 해주는 것이다!! 즉,
이것은 그냥 제목 내용이고 <h1>이렇게 태그로 제목이라는 마크업을해준다.</h1> - 마크업 랭귀지: 마크업할 때 쓰는 언어. 즉, 내용에 추가적인 정보(제목, 타이틀, 메타 등)를 표시하는 프로그래밍 언어.
따라서 html이란 서로 연결된 하이퍼텍스트를 만들 때 쓰며, 내용 뿐만 아니라 구조와 의미도 표시해주는 마크업 기능이 있다
2. 기본 문법
<a href="https://www.naver.com"></a>- 위에서 꺾쇠로 감싸진 걸 태그라고 부르고
- 시작태그와 종료태그가 있다.
- 꺽쇠 바로 옆에 적힌 a 가 바로 태그의 이름.
- 내부 href는 태그의 속성 이름.
- href에 주어진 url 값은 속성값.
<video src="codeit.mp4" autoplay>- 이렇게 종료 태그가 없는 경우도 있고
- 속성 값을 따로 안 주고 속성 이름만 쓰기도 한다. (이건 속성값에 true, false만 주어지기 때문임!! 속성 이름만 쓰면 true 값으로 설정, 속성을 아예 안 쓰면 false로 설정. )
이렇게 태그들을 모아 한 파일로 만든 게 html 파일이다.
html은 이렇게 가장 큰 html 태그 안에 자식으로 head, body 태그가 있다.
head에는 페이지에 안 나오는 웹의 정보, body에는 페이지의 내용을 적는다.
html을 작성할 때엔 들여쓰기를 해서 가독성을 높이자!!!
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>3. 코멘트
코멘트를 다는 것도 좋다. 코멘트는 웹페이지에 나타나지 않는 주석이다.
메모를 남길 때, 혹은 코드를 잠깐 감출 때 사용한다.
<!DOCTYPE html>
<html>
<head></head>
<body>
<!-- 이것이 코멘트 -->
<header>
제목
</header>
</body>
</html>4. 메타데이터로 사이트에 대한 정보를 나타내기.
head 태그 내에선 페이지에 대한 정보를 담고 있다. 이 때 페이지에 대한 정보를 Metadata, 메타데이터 라고 한다. 메타태그는 메타데이터를 나타내기 위해 작성하는 태그로, 종료 태그가 없다.
일반적인 내용에 붙이는 정보값을 말한다!
<head>
<meta charset="utf-8">
<!-- 인코딩 방식을 지정해줌. -->
</head>og는 페이스북에서 만든 메타데이터 형식으로, 오픈 그래프의 줄임말이다. 여러 활용도가 있지만 주로 sns 퍼가기를 할 때 미리보기를 만들어준다.
<head>
<meta property="og:title"
content="홍장군의 블로그">
</head>메타태그 사용 예시는 다음과 같다.
<meta charset="utf-8">
HTML 문서의 문자 인코딩을 utf-8로 지정.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale, user-scalable=no">
반응형 웹사이트를 제작할 때 사용.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
인터넷 익스플로러에서 최신 표준 모드로 보여준다.
<meta name="robots" content="noindex">
크롤러 동작에 대한 설정 정의.
// 공유 시 미리보기를 띄우는 메타태그
<title>홍장군의 블로그</title>
<meta
name="description"
content="프론트엔드 프로그래머 홍장군입니다."
>
<meta property="og:image" content="/static/images/myimg.png">
<meta property="og:title" content="홍장군의 블로그">
<meta
property="og:description"
content="프론트엔드 프로그래머 홍장군입니다."
>
<meta property="og:url" content="https://hongjw030.tistory.com/">
5. 시맨틱 태그란
html은 문서의 내용과 구조를 만드는 것이다. 그 중 div는 문서의 영역만 나타내지 구조와 의미가 없다. 그래서 div와 똑같은 기능을 하지만 그 태그가 헤더인지, 내비게이션인지, 아티클인지 의미를 부여하기 위해 이름을 붙인 게 바로 시맨틱 태그, semantic tag 이다.
성질 자체는 div 태그와 동일하다!
<html>
<head></head>
<body>
<header></header>
<header></header>
<main>
<section>
<article></article>
<article></article>
<figure></figure>
</section>
<section>
<article></article>
<article></article>
</section>
</main>
<footer></footer>
</body>
</html>
- header, footer, main(그 안에 section, article, figure), nav 가 있다.
- header, footer은 여러 번 쓸 수 있는 반면에 main은 한 페이지에 하나만 !!
- section이라는 큰 단락 안에 article들이 있다.
- figure은 사진과 사진의 설명을 담은 영역.
이런 시맨틱 태그는 사이트의 영역을 좀더 의미있게 나눠주기 때문에 태그를 작성하는 사람의 의도가 담겨있다.
div만 써도 되는데 시맨틱 태그를 굳이 쓰는 이유는,
- 검색 최적화에 도움이 되기 때문이다. 검색엔진이 header, main 쪽에 중점적으로 본문을 읽으면서 정보를 잘 가져와 최적화가 잘 된다.
- 웹 접근성을 높이기 때문이다. Web Accessibility를 줄여서 A11y라고도 하는데, 장애인들도 잘 활용할 수 있게 모두에게 배리어 프리한 웹 접근을 하게끔 한다.
- 개발자들 입장에서도 시맨틱 코드를 사용하는 게 더 이해하기 쉬워 개발성이 높아진다.
'프론트 공부 > html과 css' 카테고리의 다른 글
| CSS의 레이아웃, Grid (0) | 2023.10.16 |
|---|---|
| CSS의 레이아웃, Flex Box (1) | 2023.10.16 |
| CSS의 포지션 속성 (0) | 2023.10.16 |
| CSS의 선택자와 캐스캐이드 (0) | 2023.10.16 |