[html5] <head></head>와 <body></body>
<head></head> 태그는 웹 화면에는 보이지 않지만 웹 브라우저가 알아두어야 할 정보들을 모아둔 태그다.
반면에 웹 하면에 보이는 내용들은 <body></body> 태그에 사용한다.
<head>의 용도는 웹 브라우저와 나의 html 웹 문서가 소통하여 인터넷에서 화면에 출력할 수 있게끔 약속을 맺도록 사용한다.
하지만 보통 웹 브라우저는 갑의 위치이기 때문에 우리가 웹 브라우저에 맞춰 작성해놔야 정상 출력된다.
<head> 태그에 쓰는 주요 태그
<title></title>
문서 제목을 정의하는 태그. 이 태그가 주로 제목 표시줄에 표시 된다.
예시) <title> 문서 제목 </title>
이 글쓰기 창은 html을 보면 타이틀이 '글쓰기'로 되어있다. 이에 따라 제목 표시줄에도 똑같이 '글쓰기'로 설정된 것을 알 수 있다.
<meta></meta>
문자의 인코딩을 지정하는데 많이 쓴다. 그 외에도 문서의 부가 정보를 지정하는데 사용한다.
<link></link>
문서가 사용하는 CSS 파일을 불러오는데 주로 사용한다.
<style></style>
문서의 외양을 결정하는 기본 요소들을 정의한다.
CSS 파일로는 문서 콘텐츠의 세부 내용을 관리한다면, 여기 부분은 문서의 대략적인 스타일을 관리하는데 사용한다.
html <head> 부분에서 위의 태그 외에는 그렇게 쓰는 게 없다.
무조건적으로 <title>과 <meta> 태그는 사용해주어야한다. 그래야 웹 브라우저가 해당 페이지를 읽고 원활히 작동된다.
<body> 태그에 쓰는 주요 태그
html을 배운다면 거의 95% 이상은 <body>에 쓰는 태그를 배울 거다. 그만큼 양이 많다.
여기선 기본 중의 기본 태그만 훑고 넘어가기로 한다.
더 자세한 내용은 추후 작성할 예정입니다.
*들어가기에 앞서 - 각 태그는 속성을 지정하여 구체적인 디자인을 설정할 수 있다. 고정되어있지 않다.
그리고 html의 목적은 웹문서의 '구조화'이다. 웹문서를 구조를 바탕으로 구성하여 출력하는 것이다.
그러므로 구조를 선언하는 태그가 자주 반복되므로 번거롭다고 생각될 수 있지만 구조용 태그는 꼭 알아두어야한다.
제목을 표시하는 <hn></hn>
여기서 n은 숫자 1~6을 의미한다. <h1>이 가장 크고 <h6>이 가장 작다.
h는 heading(페이지 위나 한 부분에 붙이는 제목)의 약어로 알고 있다.
예시)
<h1>본문의 제목</h1>
<h2>본문의 제목</h2>
<h3>본문의 제목</h3>
<h4>본문의 제목</h4>
<h5>본문의 제목</h5>
<h6>본문의 제목</h6>
본문의 제목
본문의 제목
본문의 제목
본문의 제목
본문의 제목
본문의 제목
문단, 단락을 만드는 <p></p>
본문을 구성하는 문단, 단락(paragraph)를 만드는 <p>태그이다.
웹 문서를 개발자 도구로 보면 <p>가 가장 많이 쓰이는 걸 볼 수 있을 것이다.
지금 이 글쓰기 문서도 Enter 칠 때마다 각 문장들이 <p> 태그로 감싸지고 있다.
예시)
<p> 어서오세요.</p>
<p> 저도 이번 기회에 html을 공부하고 있습니다. 아직 많이 부족하지만 공부한 정보를 잘 요약하여 공유해봅니다. 만약 정보를 찾아 들어오셨다면 도움이 되셨으면 좋겠습니다.</p>
<p> 그럼 모두 파이팅.</p>
어서오세요.
저도 이번 기회에 html을 공부하고 있습니다. 아직 많이 부족하지만 공부한 정보를 잘 요약하여 공유해봅니다. 만약 정보를 찾아 들어오셨다면 도움이 되셨으면 좋겠습니다.
그럼 모두 파이팅.
이렇게 p 태그로 끊어두지 않으면 창 넓이에 맞춰 단락이 자동 조절 된다. 또한 앞뒤에 Enter를 넣은 것처럼 구분지어진다.
엔터를 넣는 <br>
이 태그는 다른 태그처럼 닫는 태그 </br>이 없다. 문단 중에 엔터를 넣고 싶은 부분에 <br>을 껴주면 된다.
예시)
<p> 어서오세요.</p>
<p> 저도 이번 기회에 html을 공부하고 있습니다. <br> 아직 많이 부족하지만 공부한 정보를 잘 요약하여 공유해봅니다. <br>만약 정보를 찾아 들어오셨다면 도움이 되셨으면 좋겠습니다.</p>
<p> 그럼 모두 파이팅.</p>
어서오세요.
저도 이번 기회에 html을 공부하고 있습니다.
아직 많이 부족하지만 공부한 정보를 잘 요약하여 공유해봅니다.
만약 정보를 찾아 들어오셨다면 도움이 되셨으면 좋겠습니다.
그럼 모두 파이팅.
지금 이 블로그는 <p> 태그를 이용한 문단 간의 간격과 <br> 태그를 이용한 엔터의 간격이 같아 큰 차이는 못 느낄 수 있다.
그렇다고 <p> 태그를 이용해 엔터 같은 느낌을 주지는 않는 게 좋다. 닫힘 태그도 넣어야해서 타이핑이 복잡해지고 구조도 꼬일 수 있다. 그리고 엄연히 문단으로 구분하는 것과 한 문단에서 엔터로 구분지어지는 건 처리가 다르다. 엄격히 구분해 사용해야한다.
진하게 만드는 <b></b>, 글씨를 기울이는 <i></i>
이런 굵은 체(Bold체)를 만들기 위해서 쓰는 태그가 <b></b>다.
이런 기울이는 체(Italic체)를 만들기 위해서 쓰는 태그가 <i></i>다.
둘 다 강조해주고픈 부분의 앞뒤에 열림과 닫힘 태그를 넣어주어야 한다.
예시)
강조를 위해 <b>볼드체</b>를 사용해봅니다.
또 다른 강조 느낌을 주기 위해 <i>이탤릭체</i>를 사용해봅니다.
강조를 위해 볼드체를 사용해봅니다.
또 다른 강조 느낌을 주기 위해 이탤릭체를 사용해봅니다.
다른 사람을 위한 부가 설명을 적을 때 쓰는 주석, <!--내용-->
주석은 출력되지 않는다. 코드에 대해 남기는 코멘트, 메모라고 생각하면 된다. 나 자신이 코드를 다시 봤을 때 기억하기 쉽게 코멘트를 남기든가 아니면 다른 사람에게 부연 설명을 적기 위해 남기는 것이다.
<!-- 와 --> 사이에 내용을 적어주면 된다. 여러 줄에 걸쳐 적을 수 있다. 한 줄만 적고 싶다면 //내용 으로 적어주면 된다.
예시)
<!-- 이 코드는 졸릴 때 써서 내일 다시 수정할 예정입니다 -->
//한 줄 주석은 슬래쉬 두 개입니다. 이 뒤로는 모든 내용은 주석으로 처리되어 화면에 출력되지 않습니다.
다음 시간에는 본격적으로 <body></body> 태그에 대해서 알아보겠습니다.
<body>
<p> 다음 시간에 만나요! </p>
</body>