태그
오늘은 여러가지 태그에 대해서 배우고 실습해볼 예정입니다!
가장 기본적인 html파일은 다음 형식을 따릅니다.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>이전 포스팅에서의 기본 구조는 <!DOCTYPE HTML> 는 없는데 이건 뭔가요?
<!DOCTYPE HTML>
이문서 파일이 html 파일임을 알려주는 코드입니다. 웹 브라우저에서 html파일이라고 인식 할 수 있도록 하는 역할입니다
그럼 이제 여러 태그들을 이용하여 웹페이지를 꾸며야겠죠?
<header>
페이지의 제목과 같은 역할입니다.
+)html5에서부터 지원하게된 것이라고 합니다.
<h1><h2><h3><h4><h5><h6> 까지 있으며 총 6개의 구획으로 나뉘게 됩니다.
어떤모양인지 한번 테스트해볼까요?
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<header>
<h1> nyanguk의 개발일기 </h1>
<h2> HTML5,CSS </h2>
<h3> 독학하고있는 </h3>
<h4> 애송이...</h4>
<h5> 전문가 분의 피드백을 기다립니다...헛헛</h5>
<h6> 개발자가 꿈인...nyanguk 입니다 </h6>
</header>
</body>
</html>
어떤 느낌인지 감이 오시나요?
<header>를 공부할때 <h2> ,<h3>...등등을 제대로 알기 전 저는 어떤 문자열?이나 문자를 적으려면 내가 객체하나를 만들어야한다고 생각했어요! <h1>...</h1> 과 같이 아! 어떤 문자을 표현하려면 <A>.... </A> ,<B>... </B> 이런식으로 감싸줘야하는구나라고 말이죠... 그런데 그것이 아니였어요....!
<h1><h2><h3><h4><h5><h6>는 각 문구의 크기가 달라지는 것이였습니다!
머쓱;;;;
<article>
웹사이트 내의 본문내용과 같은 역할입니다.
재배포가 가능합니다.
제가 했던 착각 때문에 주석과 같은 실수를 저질러 버렸습니다...
<article> ... </article>라는 하나의 박스로 감싸고 있기때문에 따로 <a1> ... </a1>같은 것이 필요가 없기 때문이죠...!
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<header>
<h1> nyanguk의 개발일기 </h1>
</header>
<article>
<!-- <a1> 제발 작심삼일이 아니길...ㅎㅅㅎ</a1> -->
article 에 대해 실습해봤옹!
</article>
</body>
</html>
<section>
웹사이트 내의 본문내용과 같은 역할입니다.
재배포가 불가능합니다.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<header>
<h1> nyanguk의 개발일기 </h1>
</header>
<section>
section을 실습해보았오
</section>
</body>
</html>
<aside>
웹페이지 사이드에 표시됩니다.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<header>
<h1> nyanguk의 개발일기 </h1>
</header>
<section>
section에는 무슨내용을 채워야하나
</section>
<aside>
side에는 무슨내용을 채워야하나~
</aside>
</body>
</html>
</body>
</html>
얽,,,음,,,뭔가 레이아웃이 필요할 것 같아요...
<footer>
웹페이지 가장 밑단에 표시됩니다.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<header>
<h1> nyanguk의 개발일기 </h1>
</header>
<section>
대부분의 웹사이트 처럼 footer 부분을 구현해 볼게
</section>
<footer>
개인정보처리방침 | 이메일주소 무단수집 거부 |정보보안 실천수칙 |
우리집주소는..... 비밀이야!
</footer>
</body>
</html>
웹페이지 만들기 독학 중입니다! 전문가분의 무차별적인 피드백을 기다립니다.. 홀홀홀
'Today I Learned > HTML5&CSS' 카테고리의 다른 글
| html5-CSS 태그<title><meta> (0) | 2020.03.04 |
|---|---|
| html5의 시작 (0) | 2020.03.03 |
