모든 작업은 texts.html 파일에서 이루어집니다.
h1~h6 태그, p 태그 안에 마음껏 b, strong, em, i, cite태그 사용해보기 차례입니다.
텍스트를 이루는 태그는 몇개 안됩니다. 그래서 너무 쉽게 짚고 넘어갈 수 있는데요. 아래의 텍스트 태그들 안에는 div 등의 다른 태그가 올 수 없고, b, strong, em, i, cite 등의 글자 꾸미기 태그들만 올 수 있습니다. 예시를 보시며 하시죠.
헤드라인을 뜻하는 h 태그
h+숫자로 이루어진 태그는 headline의 줄임말인데 일반 텍스트와는 다르게 모든 글짜가 굵게 볼드 처리 되어있습니다.
<h1>글자를 입력해보세요.</h1>
<h2>글자를 입력해보세요.</h2>
<h3>글자를 입력해보세요.</h3>
<h4>글자를 입력해보세요.</h4>
<h5>글자를 입력해보세요.</h5>
<h6>글자를 입력해보세요.</h6>
본인의 vs code에서.h1~h6까지 뒤의 숫자는 html에서 미리 저장해놓은 사이즈 라는 것을 알 수 있습니다.
저는 개인적으로 h1~h4정도를 많이 사용합니다. 나머지 모든 것은 그냥 p 태그에다가 작업하시면 되는데요. lorem을 입력후 Tab 누르시면 Random한 텍스트를 사용할 수 있습니다. 이걸로 놀아보면 됩니다. p 태그의 특징은 엔터키로 줄바꿈을 해도 적용되지 않는다는 것과 띄어쓰기는 1칸 이상 인정되지 않는다는 것입니다.
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore
possimus quasi, rerum eum quia, vitae consectetur laboriosam alias cum aut
ducimus natus exercitationem, molestiae deleniti doloribus animi
reiciendis obcaecati reprehenderit?
</p>이제 b/strong, i/em/cite 태그 차례입니다. p 또는 h 태그 안에서 작업할 수 있는데요. 이 둘은 서로 똑같이 굵기 처리할 수 있습니다. h태그 안에서 사용하는 것은 아무런 효과가 없습니다. 이미 굵게 처리되어 있기 때문입니다.
<p>
<b>Lorem </b>ipsum dolor sit amet consectetur adipisicing elit.
<strong> Inventore </strong>
possimus quasi, rerum eum quia, vitae consectetur laboriosam alias cum aut
ducimus natus exercitationem, molestiae deleniti doloribus animi
reiciendis obcaecati reprehenderit?
</p>아래와 같이 기울기는 이탤릭 italic 이라고 합니다. 아래처럼 사용하면 됩니다.
<p>
<em>Lorem </em>ipsum dolor sit amet consectetur adipisicing elit.
<i> Inventore </i>
possimus quasi, rerum eum quia, vitae consectetur laboriosam alias cum aut
ducimus natus exercitationem, molestiae deleniti doloribus animi
reiciendis obcaecati <cite>reprehenderit</cite>?
</p>이제 내가 원하는 글을 쓰고 싶을 때 h 태그와 p 를 적절히 사용하시면 되겠죠?
