간단한 HTML 찍먹하기!
2024. 11. 21. 16:37ㆍTIL
✔오늘 배운 중요한 🔑 point
- HTML 태그는 단순히 콘텐츠를 표시하는 역할 뿐만 아니라 의미(semantic)를 전달하는 역할도 한다.
- W3C 표준을 준수하여 다양한 브라우저에서 일관되게 동작하도록 하는것이 중요하다.
🎯 오늘 배운 내용
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>2024년 11월 21일 TIL</title>
</head>
<body>
간단한 HTML사용을 익혀보자
</body>
</html><!DOCTYPE html> : 이 문서가 HTML5 형식임을 선언
<html> ~ </html> : HTML문서의 시작과 끝! (lang="kr" 은 한국어로 된 문서라는 의미)
<head> ~ </head> : 브라우저가 문서를 읽을때 필요한 정보를 알려주는 부분. 문자코드,제목 외에도 다양한 정보 작성 가능
<title>~ </title> : 해당페이지의 제목
<body> ~ </body> : 사용자에게 보여줄 콘텐츠를 작성하는 부분
| <h> ~ </h> | 제목, head의 머리글자 | ★ ★ ★ ★ ★ |
| <p> ~ </p> | 단락(문장들의 모음), paragraph의 머리글자 | ★ ★ ★ ★ ★ |
| <ul> ~ <li> ~ </li> </ul> |
ul은 unordered list의 약자. 즉 순서 없는 목록 ● li는 list item의 약자. 개별 항목 |
★ |
| <ol> ~ </ol> | ordered list의 약자. 순서 있는 목록 (1,2,3,4) | ★ |
| <dl> ~ <dt> ~ </dt> <dd> ~ </dd> </dl> |
dl은 description list의 약자. 항목 이름 설명 dt는 항목 이름 dd는 항목 설명 |
★ |
| <a href=""> ~ </a> | a는 anchor의 약자로써 특정 위치로 연결함 href는 Hypertext REFerence의 약자, url속성 target= _blank를 지정하면 새탭으로 열림 |
★ ★ ★ ★ ★ |
| <img src="" alt=""> | 해당 경로의 이미지 표시 | ★ ★ ★ |
| <em> ~ </em> | emphasis의 약자. 텍스트 강조 | ★ |
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>HTML에 익숙해지자!</title>
</head>
<body>
<h1> h1을 사용해서 제목은 크게</h1>
<h2> h2를 사용해서 제목보다는 살짝 작은 크기 </h2>
<h3> h3을 사용해서 h2보다는 살짝 작게 </h3>
<p> 여러 문장들을 하나의 단락으로 묶고 싶을때는 <em>p</em> 태그를 이용하자
2개 이상의문장이 있다면 <em>br</em>을 이용해서 줄바꿈을 하자 <br>
이렇게! </p>
<h3> 하이퍼링크나 번호 같은 링크를 사용할때는 <em>a</em>태그를 사용하자<br>
참고로 하이퍼링크에 <em>target=_blank</em> 설정을 하면 새탭에서 열린다!</h3>
<ol>
<li><a href="http://naver.com" target = _blank> <em>네이버</em> 바로가기 </a> </li>
<li> <a href="http://daum.net" target="_blank"> <em>다음</em> 바로가기 </a></li>
</ol>
<h3> 아무 이미지 사진....</h3>
<img src="https://cdn.pixabay.com/photo/2024/03/16/10/02/spring-8636733_1280.jpg" alt="해당 사진이 존재하지 않습니다">
</body>
</html>
https://github.com/kotlin2024/warming_up
🤔 어떻게 활용할까?
HTML을 이용해서 아주 간단한 뼈대는 만들수 있게 되었다.
📓 오늘의 한줄
"Your time is limited, so don’t waste it living someone else’s life."
- Steve Jobs -
'TIL' 카테고리의 다른 글
| 간단한 블로그 만들기 (2) | 2024.11.23 |
|---|---|
| 간단한 CSS 찍먹하기! (0) | 2024.11.22 |
| 개인 프로젝트 3일차 <Get요청과 @RequestParam> (1) | 2024.11.20 |
| QueryDsl 설정 관련 오류 (0) | 2024.11.19 |
| 개인프로젝트 1일차 (0) | 2024.11.14 |