728x90
반응형
[HTML] 2. HTML 기본 태그
- 파일 생성시 HTML5: 입력시 기본적인 코드가 생성된다.
- <h></h>: 글자 크기를 정하는 코드. h 앞에 오는 숫자가 작을 수록 글자가 커진다.
- <br>: 줄바꿈 코드. 엔터 바와 같은 역할을 한다.
- <p></p>: 단락 코드. 아래위로 한 줄 씩 띄운다.
- <blockquote></blockquote>: 문단을 한 칸 들여써서 인용한다.
- <pre></pre>: 작성한 코드를 소스 모양 그대로 출력한다. 프로그래밍 소스를 출력할 때 많이 쓴다.
- <strong></strong>, <b></b>: 글자를 진하게 강조한다. 볼드체.
- <em></em>,<i></i>: 글자를 기울인 모양으로 바꾼다. 이탤릭체.
- <q></q>: 줄바꿈이 없는 인용. 대신 큰 따옴표가 추가된다.
- <mark></mark>: 노란색 형광펜 표시.
- <span></span>: 영역을 지정하는 태그.
- ㄴ이후 style=”color:blue” 를 사용하여, <span>으로 지정한 영역의 글자들을 파란색으로 변경하였다.
- <ruby></ruby>, <rt></rt>: <ruby> 태그 안에서 <rt> 태그가 주석 역할을 한다.
- <rt> 태그가 붙은 ”일본의 프로그래머”는 “마츠모토 히로유키”의 상단에 주석으로 더해진다.
- <abbr></abbr>: <abbr title=”~”> ~자리에 적힌 글자가, 이후에 오는 글자의 아래에 작게 주석처리된다. 주석처리 된 글자는 마우스를 가져다대면 확인해볼 수 있다.
- <cite></cite>: 인용+이탤릭체
- <code></code>: 소스를 (작게) 표시한다.
- <small></small>: 글자를 작게 보이게 한다.
- <sub></sub>: 아래 첨자
- <sup></sup>: 위 첨자
- <s></s>: 취소선
- <u></u>: 밑줄
- <ul></ul>: 들여 쓰기
- <li></li>: <ul> 태그로 감싼 <li> 태그는 순서 없는 목록으로 불릿(검은 동그라미) 처리된다.
- <ol></ol>: 들여쓰기
- <ol> 태그로 묶은 <li> 태그는 숫자가 있는 목록이다.
- <ol> 태그는 type 을 이용하여 li 태그로 순서 타입을 정할 수 있다.(a,A,1,i.I…)
+연습문제
아래의 사진과 같은 화면을 출력해보자.
![](https://blog.kakaocdn.net/dn/d8KHfP/btsGxArMpSD/hPkCYzccm09XlBkZp9kqs1/img.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2> Who am I?</h2>
<p><mark>프런트엔드 웹 기술(Front-end Web Tech.)</mark>에 관심이 많습니다.
<br>현재 제주의 한 시골 마을에서 코딩 중입니다.</p>
<h2>Experience</h2>
<ul>
<li>프론트엔드 개발</li>
<ul>
<li>업무 내용 업무 내용 업무 내용</li>
<li>업무 내용</li>
<li>업무 내용 업무 내용</li>
</ul>
<li>웹 디자인</li>
<ul>
<li>업무 내용</li>
<li>업무 내용 업무 내용</li>
</ul>
</ul>
<p><h2>Skills</h2></p>
<p><h2>Educations</h2></p>
</body>
</html>
728x90
반응형
'HTML,CSS > HTML' 카테고리의 다른 글
[HTML] 6. 폼 관련 태그 (0) | 2024.04.22 |
---|---|
[HTML] 5. 표(테이블) 만들기 (0) | 2024.04.15 |
[HTML] 4. 링크 삽입하기 (0) | 2024.04.15 |
[HTML] 3. 이미지 출력하기 (0) | 2024.04.14 |
[HTML] 1. 기초 CS 지식 (0) | 2024.04.14 |