제가 공부했던 코드 내용을 주절주절 적는 공간입니다.
첫 교재로는 <생활코딩! HTML+CSS+자바스크립트>_위키북스가 적합할 거 같아 선택하였습니다.
HTML이란 웹 페이지를 만드는 컴퓨터 언어이다.
1. 기본 문법과 태그
- 문자를 진하게 <strong> </strong>
- 밑줄 <u> </u>
- 제목을 나타내는 태그 <h1> </h1> ~ <h6> </h6>
- 줄바꿈 : 새로운 줄 표현 <br> ※ <br>은 특이하게 </br>이 없다
: 두 개의 단락으로 나눔 <p> </p>
2. 속성 태그 문법
- <img>태그 : 이미지를 웹 페이지에 포함시킬 때.
<img src="">
- <img> 태그의 width 속성 설정 : <img src="" width="100%">
=> 이미지 파일을 불러 와서 웹을 열어봤는데 계속 엑박이 뜨길래 구글링 해서 img 문법에 관한 내용을 다 찾아
보고 읽어도 무슨 뜻인지 모르는 절대경로와 상대경로에 대한 내용밖에 없어서 이 교재의 유튜브 동영상
강의 댓글에 어떤 분이 '사진(이미지 파일)을 같은 폴더 안으로 이동시켜야 한다'고 친절히 설명해주셔서
해봤는데 ! 사진이 떴습니다 !
3. 부모 자식과 목록
- 목차 또는 목록 <li> </li> ↔ 구분하여 띄어쓰기 <ul> </ul> ↔ 숫자가 자동으로 넘버링 <ol> </ol>
4. 문서 구조와 슈퍼스타들
- 페이지의 제목 <title> </title>
- <meta charset="utf-8">
=>무슨 뜻인지 이해는 했지만 뭐라고 설명해야 될지 모르겠습니다.
- 본문은 <body> </body> 로 묶고 <body> </body>를 설명하는 태그는 <head></head>로 묶음.
- 관용적으로 이 문서에는 HTML이 담겨 있다는 뜻에서 <!DOCTYPE HTML>이라고 씀.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<ol>
<li></li>
</ol>
<h1></h1>
</body>
</html>
5. HTML 태그의 제왕
- 링크를 걸고 싶은 곳을 감싸면 됨. <a href="링크"> </a>
- 새 탭에서 열리게 만들고 싶다면 <a href="링크" target="_blank"> </a>
- 툴팁처럼 무엇인가를 알려주고 싶다면 <a href="링크" target="_blank" title="HTML5 spcification"> </a>
'프로그래밍 > HTML' 카테고리의 다른 글
| <a>태그 관련 예제 (0) | 2023.01.03 |
|---|---|
| <input>태그 관련 예제 (0) | 2023.01.03 |
| <form> 관련 태그 예제 (0) | 2023.01.03 |
| 텍스트 관련 태그들 (0) | 2023.01.02 |
