<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body></body>
</html>
→ 앞으로 사용할 기본 구조!!
Lorem하고 엔터치면 무작위 문장을 만들어준다
뉴스에서 한 문단을 <p>태그 안에 넣기
너무 기니까 View에서 Word Wrap 클릭하면 보기 편하게 해준다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<style>
a { width: 200px; height: 200px; background: orange;}
</style>
<a>Lorem</a>
</body>
</html>
Lorem
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<style>
p {width: 200px; height: 200px; background: orange;}
</style>
<p>Lorem</p>
</html>
→ 실행결과 Lorem 주변 아래 박스 다 오렌지색
텍스트 관련 태그들
- 텍스트를 덩어리로 묶어 주는 태그(block 레벨 태그)
블록 레벨 : 혼자 한 줄을 차지, 너비가 100이라는 것이다.
인라인 레벨 : 줄을 차지 하지 않는 요소
문서
문단 : block 레벨 태그
p 태그 - paragraph
-너비, 높이 지정
-외부 여백 상하 좌우 적용 가능
문장 : inline 레벨 태그
a 태그, span, i
-너비, 높이 못 함
-외부여백(margin 좌우만 적용 가능
문장1 문장2 문장3 →문장과 문장사이 띄어쓰기 좌우 외부 여백은 가능하다
- <hn> 태그 - 제목 표시하기h2-6 → 부제목
- h1 → 제목
- <p> 태그 - 단락 만들기
- 상하 여백
- paragraph
- <br> 태그 - 줄 바꾸기
- <hr> 태그 - 분위기 전환을 위한 수평 줄 넣기
- horizontal
- 수평선
- <blockquote> 태그 - 인용문 넣기
- 줄개행 O
- <pre> 태그 - 입력하는 그대로 화면에 표시하기/줄개행 문자도 인식
- 참고) <code> : 입력한 그대로 화면에 표시, HTML 태그 포함
- 텍스트를 한 줄로 표시하는 태그(inline 레벨 태그)
- <strong> 태그, <b> 태그 - 굵게 표시하기
- strong : 강조 →둘 다 굵게 표시되지만 b 태그 보다 더 중요하게 쓰임(의미적 다르게 강조)
- <em>태그, <i>태그 - 이텔릭체로 표시하기(기울게 표시)
- em : emphasize → 중요한 내용(의미적으로 강조)
- <q> 태그 - 인용 내용 표시하기
- 인용 내용 표시하기
- <mark> 태그 - 형광펜 효과 내기
- <span> 태그 - 줄바꿈 없이 영역 묶기div : 블록레벨 태그
- span : 인라인 레벨 태그
- 참고)
- 기타 텍스트 관련 태그들
- 서식
- 취소선 ex)
15,000원<strike>…</strike> - <del>…</del>
- <s>…</s>
- <sup> 위 첨자
- <sub> 아래 첨자
<abbr> 약자 표시 title 속성을 함께 사용할 수 있음 <p><b><abbr title="Internet of Things">IoT\</abbr></b>란 각종 사물에 센서와 통신 기능을 내장해 인터넷에 연결하는 기술을 의미한다.</p> <cite> 웹 문서나 포스트에서 참고 내용을 표시 <p>내가 경험한 가장 흥미진진한 일은 누군가를 만나는 일이다 - 영화, <cite>'비포선셋'</cite> 중 <code> 컴퓨터 인식을 위한 소스 코드 <pre><code> function savethelocal() {....}</code><\pre> <kbd> 키보드 입력이나 음성 명령 같은 사용자 입력 내용 <p> 웹 화면을 다시 불러오려면 <kbd>F5<kbd>키를 누릅니다.</p> <small> 부가 정보처럼 작게 표시해도 되는 텍스트 <p>가격 : 13,000원 <small>(부가세 별도)</small></p> <sub> 아래 첨자 <p>물의 화학식은 <b>H<sub>2</sub>O</b>다</p> <sup> 위 첨자 <p>E = mc<sup>2</sup></p> <s> 취소선 <p><s>34,000원</s><strong>19,000원</strong></p> <u> 밑줄 <p>링크 표시 용도가 아니라 단순히 밑줄을 긋는다면 <u> u 태그</u></p> - 목록을 만드는 태그
- <ul> 태그, <li> 태그 - 순서 없는 목록 만들기 → 정말 많이 쓰인다!
- 스타일
- list-style-type: circle - 채워지지 않은 원: none - 표시 X (고객이 원하는 디자인을 방해할 수 있기 때문에 이걸 가장 많이 쓴다!)
- : square - 채워진 네모
- : disc 기본값 - 채워진 원
- <ol> 태그, <li> 태그 - 순서 목록 만들기
- type
- 1 : 기본값 - 순서표가 1,2,3…
- A : A,B,C…
- a : a,b,c…
- I : I, II, III, IV… (로마자)
- i : i, ii, iii, iv …
- 태그의 기능과 관련된 속성 정보 있다.
- 속성 : 태그에 제공하는 부가적인 정보
- <dl>, <dt>, <dd> 태그 - 설명 목록 만들기
- <dd>내용</dd>
- <dl>
- li : list item : 목록 항목
- 표를 만드는 태그
- <table>, <tr>, <td>, <th> 태그 - 기본적인 표 만들기
- <th> 태그 - 표에 제목 셀 만들기
- colspan, rowspan 속성 - 행 또는 열 합치기(셀 병합)
- <caption> 태그, <figcaption> 태그 - 표에 제목 붙이기
- figcaption 태그는 caption과 다르게 중앙에 정렬 되지 않음
- : table 태그 바깥쪽 정의
- caption : <table> 안쪽 바로 아래쪽에 , 중앙 정렬
- <col>, <colgroup> 태그 - 여러 열 묶어 스타일 지정하기
- -span : 예) span
- <tfoot> : 표의 요약 정보
- <thead> : 표의 제목 영역
- rowspan : 행 합치기
- </tr>
- <tr>
- …
- <td>…</td> 열
- <table>
th, td
align → left : 좌측 정렬, right : 우측 정렬, center : 가운데 정렬
valign : top 위쪽 정렬, bottom : 아래쪽 정렬, middle : 가운데 정렬
'WEB > HTML5+CSS3' 카테고리의 다른 글
| 6. 텍스트 관련 스타일(HTML5+CSS3) (2) | 2024.03.26 |
|---|---|
| 5. CSS 기초(HTML5_CSS3) (0) | 2024.03.25 |
| 4. 폼 관련 태그들(HTML5_CSS3) (0) | 2024.03.22 |
| 3. 이미지와 하이퍼링크(HTTP5+CSS3) (0) | 2024.03.21 |
| 1. HTML기본 다지기(HTML5+CSS3) (0) | 2024.03.19 |
