HTML 작성
<열린 태그 속성="속성값">
- charset는 문자 세팅하겠다는 말
- description은 한 줄 요약 부분
- keywords는 블로그 같은데 달리는 태그, 이 키워드를 많이 알게 되면 구글 검색 노출될 확률이 높아진다고 한다.
<a></a>
- <a> 이 태그는 앵커, 네이버 사이드 메뉴같이 메뉴를 이동하는 것
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Web Tutorial">
<meta name="keywords" content="html, css, tutorial, web">
<meta name="author" content="Joy">
<title>HTML, CSS Tutorial</title>
<link rel="shortcut icon" type="image/icon" sizes="32x32" href="favicon.ico">
</head>
<body>
<a href="https://www.naver.com/" target="">네이버</a>
</body>
</html>네이버 앞에 target은 아무것도 안 쓰면 네이버를 클릭했을 때 바로 네이버 화면으로 연결된다.
target="_blank"라고 치면 네이버를 눌렀을 때 현재탭이 아니라 새 탭이 열리면서 네이버가 열린다.
target="_self"라고 치면 현재 탭 안에서 열린다. = self가 기준값이기 때문에 안 써도 무관하다.
<img> 이미지 삽입하기
<body>
<a href="https://www.naver.com/" target="_blank">네이버</a>
<img src="apple.png" alt="사과 이미지" width="100px" height="">
<img src="https://e7.pngegg.com/apple-heart-logo.png" alt="사과 이미지">
</body>
alt=""
여기에는 시각장애인을 위해 이미지 설명을 넣어줘야 한다. (웹 접근성과 관련) 또는 이미지 주소가 없거나 인터넷 문제로 이미지가 뜨지 않을 때 그 자리에 무슨 이미지가 있는지 설명하기 위한 태그라고 보면 된다.
width와 height 태그는 img에 쓸 수 있는 속성인데 둘 중 하나만 입력하면 그에 맞는 배율로 이미지 크기를 조절하지만 두 속성 다 입력하면 이미지가 뭉개질 수 있다. 그러나 잘리지는 않는다.
주석 처리하기
✏️ <!— —> : 이 마이너스 2개 안쪽에 글을 입력하면 주석 처리된다.
<!--a, img 태그 소개-->
<a href="https://www.naver.com/" target="_blank">네이버</a>
<img src="apple.png" alt="사과 이미지" width="100px" height="">타이틀 입력 <h>
<h1>Title</h1>
<h2>Title</h2>
<h3>Title</h3>
<h4>Title</h4>
<h5>Title</h5>
<h6>Title</h6>
<h1>기업명 또는 서비스명</h1>
<h1>
<a href="https://www.naver.com">
<img src="https:/apple-heart-logo.png" alt="애플">
</a>
</h1>
</body>Title
Title
Title
Title
Title
Title
기업명 또는 서비스명
- h1 태그는 제일 중요한 타이틀 태그이기 때문에 보통 하나의 문서 안에서 한 번만 사용한다. 기업명이나 서비스명 같이 중요한 정보를 담는데 네이버에서 네이버 로고 사진을 클릭하면 메인 화면으로 돌아오는 것처럼 h1 태그 안에 중요한 정보를 입력함. 대부분 이미지로 처리된다(회사로고).
- h 태그는 단계별로 내려가야 한다. 예를 들어 h1에서 h6으로 갑자기 건너뛰며 쓸 수 없다.
본문 태그 <p>
<p>Nice to meet you</p>
탭으로 태그 자동 완성하기
- 예를 들어 p 태그를 입력하고 싶다면 p 쓰고 tab키를 누르면 자동으로 완성이 된다.
span과 mark 태그
- <span> 태그 안에 단순히 단어를 입력하거나 안에 디자인을 입히고 싶을 때 사용함.
- <mark> 태그는 특정 단어를 강조할 때 사용함. 인용 문구나 백과사전에서 쓸 때처럼 강조하는 것이다. 그리고 마크 태그 안의 단어는 기본적으로 노란 배경색이 설정된다.
<style>
p span {
color: red;
font-size: 20px;
background-color: pink;
}
mark {
background-color: gray;
}
</style>
</head>
<p>
<span>동해물</span>과 백두산이 마르고 닳도록
</p>
<p><mark>사과</mark>는 사과 나무에서 나는 열매이다.</p>
</body>
리스트 작성: <ol>과 <ul>
- <ol> 태그는 목차와 같음. 순서가 있다.
- <ul> 태그는 그냥 리스트다. 순서가 없다. 순서에 영향을 받지 않는 리스트는 ul을 사용하면 된다.
- ul과 ol 태그 안에는 무조건 li 태그 속성이 먼저 들어가야 한다.
<ol>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ol>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
</body>
사이드 메뉴 가는거 예시: 네비게이션 버튼 만드는 것 활용
<ul>
<li><a href="#">영화</a></li>
<li><a href="#">부동산</a></li>
<li><a href="#">음악</a></li>
</ul>
- 참고로 #은 아직 링크 주소가 정해지지 않았을 때 임시로 써 놓을 때 쓴다.
<button> 태그
<button>닫기</button>
<button type="button">닫기</button>
<button type="submit">확인</button>
- submit 은 버튼을 클릭하면 데이터를 전송함. 예) 네이버 로그인 버튼
- button는 데이터 전송 기능 없음 예) 브라우저 닫기
비디오 삽입
<video src="sample.mp4" controls
autoplay muted
loop
width="300px"
height="300px"
>
</video>
</body>
- controls를 입력하면 재생, 일시중지, 볼륨 등의 메뉴가 나타남
- autoplay muted 항상 이 둘을 같이 입력해야 자동으로 재생된다.
유튜브 영상 삽입
- 유튜브에서 원하는 동영상 들어가고 공유에서 <> 퍼가기를 누르면 코드 복사 가능
<iframe width="560" height="315" src="https://youtube.com/shorts/73-6ys4w5L4?si=zyb1Si3zI6zNy8PT" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>오디오
<audio src="sample_audio.mp3" controls
loop
>
</audio>
</body>'웹프로그래밍' 카테고리의 다른 글
| HTML 카카오톡 친구 목록 만들기, 포털 사이트 파트 만들기 (0) | 2024.06.11 |
|---|---|
| 웹사이트의 구성과 구조 (0) | 2024.06.11 |
| textarea, select, table 태그 (1) | 2024.06.08 |
| <label>과 <input>:text, email, password, number, file, radio 타입 (0) | 2024.06.08 |
| 웹 프로그래밍 기초, 용어 정리, 추천 도구 링크 (0) | 2024.06.06 |
