비전공자 HTML ③ - 기초 태그(Tag) 다루기
H1, H2, <p>가 뭐야? 줄바꿈과 문단 나누기 까지.
과거에 마크다운 형식으로 블로그 글을 작성할 수 있다고 해서 만져본 적이 있다.
멋지게 줄을 써내려 갔는데 대제목, 중제목, 소제목을 크고 굵게 표기하고 싶었다.
그리고 구글 같은 곳의 검색엔진이 내 글을 읽을 때 내 글의 어떤 부분이 대제목이고, 소제목인지 알아차리게 하여 SEO에 유리하게(상위 글로 잘 노출되게) 설정하고 싶었다.
그럴 때 h1~h6 태그 같은 것들이 사용된다.
이번 장에서는 여러 종류의 태그와 구문들에 대해 알아보자.
늘 얘기하지만, 내 학습 내용과 정리 글은 이전 글들과 이어진다.
1. 태그(Tag) 또는 구문은 어떻게 생겼나?
위에서 언급한 Tag들은 보통 <h1>, <span>, <p>, <br>과 같은 형식을 띈다. <태그이름>인 경우가 대다수인데, 가끔씩 (공백)과 같은 태그도 존재한다.
여는 태그와 닫는 태그
이전 글에서의 실습과 같이, 작서된 문서를 보면 비슷한 태그가 수미쌍관 형식으로 이루어져있는 꼴을 볼 수있다. 가령, 지난 장에서 우리는 <body> 아래에 쓰고 싶은 텍스트를 쓰는 실습을 진행했다. 조금 더 멀리서 작성된 구문을 보면 아래 이미지와 같다.
위 사진처럼 같은 태그이지만 여는 태그는 <body>와 같이 표기되고, 그 뒤에 내용이 작성된다. 그리고 내용 작성이 마무리되면 </body>와 같은 형식으로 닫는 태그를 달아준다. 닫는 태그는 </ooo>와 같은 형식이라고 생각하면 문서를 볼 때도, 작성할 때도 보다 쉽게 읽을 수 있다.
하지만 모든 태그가 닫는 태그가 존재하는 것은 아니다. 단독으로 사용되는 경우도 많다는 것을 꼭 짚고 넘어가자.
2. 실습: h1~h6 Tag 달아 보기
지난 실습에 이어서, <body> 부분에 아래 내용을 진행해보자.
1) 여는 태그인 <body> 아래에 h1 입력 후 키보드의 Tab 누르기
2) 자동으로 입력된 여는 태그 <h1>과 닫는 태그 </h1> 사이에 "h1 제목입니다." 입력
3) 그 다음 줄에 h2 입력 후 키보드의 Tab 키 누르기
4) "h2 입니다." 입력
5) 같은 방식으로 h3~h6도 반복 숙달 해보기
6) 좌측 index.hmtl 파일을 우클릭 후 "Open With Live Server" 클릭하여 확인하기
다 작성하고 나면 위와 같은 형태가 됩니다. 이왕이면 최대한 직접 진행해보세요.
파일을 Live Server에서 열면 위 사진처럼 웹이 구현됩니다.
여기까지 오셨으면 어떤 느낌인지 확 이해하셨을 거에요. 오타가 있는 것 같아서 잘 안 되시면 아래 제 깃허브 에 등록된 스니펫을 복사하여 <body> 아래에 붙여넣기 하세요.
https://gist.github.com/mind-miner-dave/707457aaa52b9155dae098361f7e4237
그런데 h1은 꼭 저렇게 크고 굵직해야하고, h6는 저렇게 콩만해야 할까? 사이즈를 커스텀하거나 예쁘게 꾸밀 수는 없을까?
당연히 할 수 있다. 지금 여러분이 보고 있는 이 브런치라는 플랫폼도 그렇고, 네이버도 그렇고 우리가 실습한것처럼 투박한 텍스트로 구현되어있지 않다. 이런 부분은 추후에 CSS 실습을 통해 진행할 예정이니 존버하자.
3. 실습: 여러가지 태그 달아보기.
https://gist.github.com/mind-miner-dave/79dc6e5cf88c2eb0aa92c0b0fc125815
우선 위 텍스트를 복사하여 <body> 아래에 붙여 넣어보자. 그리고 Open with Live Server 하자. (이제 구체적을 설명 안 드려도 알잘딱 복습하면서 열어 보자)
그러면 줄바꿈 태그 등이 없다보니 여전히 이딴식으로 뜬다. 이제 다양한 태그를 달아보자.
오늘 다루어 볼 HTML의 핵심 태그는 아래와 같으며, 얄코님의 Table을 인용하기 위해 가져왔다.
출처: yalco.kr위 텍스트를 복사해서 <body> 아래에 붙여 넣었다면, 지금 VS Code에는 아래와 같이 작성이 되어있을 것이다.
위 화면에서 줄바꿈이 되어있다 한들, 실제 웹에서는 그렇지 않음을 우리는 확인했다. 위 표에 정의된 태그 또는 구문을 적재적소에 집어 넣어 보자.
① h1 태그를 사용하여 "오늘의 실습!"이라는 텍스트를 h1 제목으로 설정해보자. h1 태그는 여는 태그와 닫는 태그가 모두 필요하다. Tab키를 활용하여 편하게 작성하는 법을 배웠으니 활용해보자.
② 위 사진에 표시된 두 곳에 줄바꿈 태그를 적용하여 줄바꿈을 해주자. 줄바꿈 태그는 닫는 태그가 필요 없다.
③ (생각하며 해보기) 표시된 곳에 문단 태그를 적용해보자. "어디서 부터 어디까지가 한 문단이지?"를 생각하면, 여는 태그와 닫는 태그가 둘다 있을 것이라는 것을 짐작할 수 있다. 적재 적소에 여는태그와 닫는 태그를 달아보자. 이번 텍스트에서는 "긴 글을 작성하거나 웹을 구현하다보면...(중략)... 넣어주고 싶을 수도 있습니다."까지가 한 문단이다.
④ 표시된 곳에 가로줄 태그를 넣어보자. 가로줄 태그는 닫는 태그가 필요 없다.
(스포일러) 다 넣고 나면 아래와 같이 작성된다.
https://gist.github.com/mind-miner-dave/51d89e202d09b680355c6ba93418e5a4
파일을 Liver Server에서 열면,
이렇게 잘 적용되어 배포된 걸 볼 수 있다.
4. TIL
지난 실습에서 우리는 VS Code에서 폴더를 열고, 파일을 만들고, 그 파일에 Text를 입력하여 웹에 구현해봤다. 오늘은 텍스트 사이에 태그라는 것을 입력하여 제목 설정, 줄 바꿈, 문단 나누기, 가로줄 삽입을 진행했다. 다음 장에서는 종류와 중요도를 나타내는 태그들을 배우고 적용해보자.
