본문 바로가기
HTML

[HTML5]웹페이지 기본 태그 활용하기

by 소금_msg 2021. 10. 7.

완성된 웹페이지. 집에가고싶은 마음을 표현해봤다.

HTML 태그의 규칙

1. 확장자는 htm,html 만들어야한다.

2. 엔터, 스페이스바, 탭은 인식하지 않기 때문에 특정 기호 또는 태그로 표현해야 한다.

3. 태그는 반드시 시작 태그와 종료 태그를 지켜야  브라우저가 인식할  있다.

4. 파일이나 폴더명은 반드시 여백이 없는 영문자로 작성해야한다.

 

 

 

*주의할점

1.문장을 쓰면 무조건 어떤내용이든 태그로 감싸줘야한다.

 

2.HTML CSS Javascript 는 컴파일언어가 아니라

브라우저가 파일을 해석해서 보여주는것.

그래서 HTML이 틀리면 어디가 틀렸는지 알수없다.(컴파일러가 없어 틀린부분 지적을 못해줌)

코드가 틀려도 그대로 나온다.  주의하며 코딩하자.

 

<HTML></HTML> 문서의 시작과 문서의 종료를 나타낸다.

<TITLE></TITLE> 문서의 제목을  브라우저 제목 표시줄에 표시한다.

<BODY></BODY> 브라우저에 표시되는 문서 내용이다.  페이지에 보이는 모든 내용을 표시한다.

 

<></> 태그인데, 자바같은 프로그래밍언어의 명령어와 같은 개념이다.

<h1>...</h1>
.
.
<h6>...</h6>

제목 태그 <h1>…</h1>

Bold 표현하며 문장의 제목으로 사용한다. 자동 줄바꿈 기능을 포함한다.

h옆에 숫자가 클수록 글자크기가 작아진다.

 

&nbsp;  공백을 10 넣어주는 기능을 가지고 있다. 이어서 여러번 쓰려면  &nbsp;&nbsp;&nbsp; 이렇게 붙이면 된다.

 

<figure>

<img src=“images/sadcat.jpg” alt=“졸려버린 고양” />
<figcaption>[집에 가고싶은 고양이]</figcaption>

</figure>

<figure> 그림, 사진,텍스트를함께 묶어서 어떤 요소들을 그룹 지을때 사용한다.

<figcaption> <figure>요소를 위한 제목을 표현한다.(요소 하단에 작게 글로 표시된다.)

 

 

<img src=“images/sadcat.jpg” alt=“졸려버린 고양” />

이미지를 넣으려면 우선 프로젝트 파일의 webapp 폴더를 만들고 폴더에 넣고싶은 이미지를 붙여넣는다.

<img src=“이미지 파일명 또는 웹상의 이미지 경로” alt=“이미지가 없을 출력하는 메시지 ”/>  이런 형식으로 만들어준다.

 

 

<ul type=“disc”>

<li>”에어컨 때문에 추워요”</li>
<li>”화장실이 고장나서 1층으로 내려가야해요”</li>

</ul>

<ul> 비순차적 목록을 만드는 태그이다.

세부 리스트 항목은 <li> 사용한다.

 

 

 <p>내용</p>

<p>는 단락(문단)태그이다. <p>는 <br/>과 같이  <br/>태그를 2번 입력한 효과가 있다. 하지만  <p>는 연속으로 사용해도  <p>를 한번으로 인식한다.

 

<p>곧 집에 갈수~<strong>먹을거나 사갈까봐요</strong></p>

<strong> BOLD 진하게 표시해주는 태그이다.

 

 

<p><del>근데 집가는데~걸려요</del><p>

<del> 취소선 표시로 표기된다.