Jade_o.o
[html] 11 - html 공부 정리2_tag 종류 본문
html tag 종류
제목 태그, <h1~6></h1~6>
• 제목을 뜻하는 Heading 의 약자, h 사용
• 제목이니까, 자동 줄 바꿈
• 하나의 HTML 문서에는 하나의 h1 태그를 권장
• 웹 검색 엔진이 제일 먼저 검색하는 태그
본문 태그, <p></p>
• 본문을 뜻하는 paragraph 의 약자, <p> 사용
• 본문을 적기 위한 태그
줄 바꿈 태그, <br>
• 줄을 바꿔줌
목록, <ul></ul> or <ol></ol>
• <ul> 순서 없는 목록
• <ol> 순서 있는 목록
• <ol> 은 속성 사용 가능
• <ol type=“?”> : 말머리 기호 변경(1, A, a, I, i)
• 1 / A / a / I / i
• <ol start=“?”> : 시작 값 변경
• <ol reversed> : 역순으로 시작
수평 줄, <hr>
• 수평으로 된 줄을 그어 줌
<summary>와 <detail>
▶ 내용을 숨길 수 있어요.
summary를 클릭해서 숨긴 내용을 보이게 하거나 감출 수 있음.
<details>
<summary>내용을 숨길 수 있어요.</summary>
숨긴 내용은 이 곳에 쓰면 됩니다.
</details>
문자 꾸미기 태그들
• <b> : 두껍게
• <strong> : 두껍게 + Semantic 한 의미를 지님
• <i> : 이탤릭
• <em> : Emphasized, 강조! 기울여서 표시됨
• <del> : 중간 줄
• <u> : 밑 줄
<!DOCTYPE html>
• 웹문서가 어떤 형식으로 작성되었는지 선언하는 것 (document type)
• html5형식으로 작성되었다고 브라우저에 알려주는 것!
• html 문서 최상단에 위치
•참고 https://rypro.tistory.com/187
<!DOCTYPE html> 의 의미는 무엇일까?
*.html 파일에서 느낌표(!)를 누르면 html 코드가 자동완성된다. 그 중에서 맨 상단에 위치한 DOCTYPE의 의미는 무엇인지 알아보자. 의 의미 지금껏 당연하다고 생각만 하고 별도로 공부할 생각을 못
rypro.tistory.com
<meta> 태그
• meta 정보?
• 정보를 위한 정보! 실제 브라우저에 내용을 보여주기 위한 것이 아닌 브라우저 정보를 담고 있음
• 보여주기 위한 것이 아니므로 head 태그 안에 작성
meta charset=“UTF-8”
• 유니코드(문자) 인코딩 방식: UTF-8
• 유니코드? 인코딩?
• 유니코드 : 여러 나라의 문자들을 표시할 수 있는 표준 코드 ‘가’ : ‘U+AC00’
• 인코딩 : 컴퓨터가 읽을 수 있도록 변환해주는 것 컴퓨터가 읽을 수 있는 1001 등의 이진수로 변환
meta name="viewport" content="width=device-width, initial-scale=1.0"
• width=device-width
• 브라우저를 보는 장치의 화면 너비를 따르도록 페이지 너비를 설정
유용한 meta 태그 모음initial-scale=1.0
• 브라우저에서 페이지를 처음 로드 할 때 크기 설정
유용한 meta 태그 모음
• 참고 https://webclub.tistory.com/354
메타(meta)태그 정리
meta 태그 메타태그는 웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의하는데 사용합니다. HTML 문서의 사이에 입력하는 특수 태그로서 사이트의 디자인에는 전혀 영향을 미치지 않고 문서
webclub.tistory.com
크로스 브라우징 (cross browsing)
• 하나의 페이지가 많은 종류의 웹 브라우저에서 동작하도록 하는 것
• 웹 브라우저: chrome, firefox, opera, naver whale, edge, ..
• 보통은 브라우저의 시장 점유율에 따라서 주가 되는 브라우저가 결정됨
이미지를 넣어주는 <img>
• 이미지를 넣을 때 사용
• 속성 값 중 하나인, src 를 사용
• 이미지 로드가 안될 경우 alt 속성이 중요
• 파일을 직접 가져오기, 인터넷 주소에서 가져오기 등등
하이퍼링크 <a>
• 기존 문서나 텍스트의 제약에서 벗어나 사용자가 원하는 정보를 취득할 수 있는 기능을 제공
• Anchor 의 약자인 <a> 태그 사용
• 속성 값
• href : Hypertext Reference 의 약자, 이동할 페이지의 링크
• target : 링크 된 문서를 열었을 때 문서가 열릴 위치 표시
• _blank / _self
<a href="https://www.naver.com" target="_blank"> Click </a>
'HTML' 카테고리의 다른 글
| [html] 13 - html 공부 정리4_table (0) | 2024.01.11 |
|---|---|
| [html] 12 - html 공부 정리3_사용자 입력 Form 태그 (1) | 2024.01.11 |
| [html] 10 - html 공부 정리1_html 구조, html 기본문법 (1) | 2024.01.11 |
| [html] 09 - table태그 실습 - 카페 음료 문서 및 이미지 출력 (0) | 2024.01.10 |
| [html] 08 - table태그 rowspan,colspan 실습-도형 만들기 (0) | 2024.01.10 |
