[정리노트]
▶HTML이란? Hyper Text Markup Language의 약자로 웹 페이지를 만드는 언어이다.
<Hyper: 최고의 Text:문서 Markup:태그 Language: 언어>
▶HTML 태그 구조
<h1(태그명) class(속성명)="primary"(속성값)>제목</h1>
▶HTML의 문서 기본 구조
<!DOCTYPE html> →이런식으로 구성이 되었있다.
<html lang="ko"> 이를 일일이 코드를 작성하면 힘들기 때문에 세팅 된<head> VS를 사용하여
<meta charset="UTF-8"> ' ! ' 를 치고 탭이나 엔터를 누르면 자동완성된다.
<title>문서 제목</title>
</head>
<body>
</body>
</html>
▶Emmet기능
-자동완성 기능을 제공하여, 작성 시간을 아주 빠르게 단축 시켜주는 확장기능
▶HTML기본 태그
<글꼴 태그>
- <h1> ~ <h6> 웹 페이지의 제목 or 부제목 표현, 숫자가 작을 수록 큰 제목.
- <p> 문단
- <hr> 가로 선(종료태그 없음)
- <br> 줄바꿈 태그, HTML에서 개행 역할 (종료태그 없음)
- <i> 텍스트를 기울임(이텔릭체)
- <em> 텍스트를 기울임(이텔릭체) #강조할 때 사용
- <b> 텍스트를 진하게 표시
- <strong> 텍스트를 진하게 표시 #강조할 때 사용
<목록 태그>
- <ol> 순서가 있는 목록
- <ul> 순서가 없는 목록
- <li> 목록하위 항목 , <ul>태그 또는 <ol>태그의 하위에 위치
- <dl> 용어를 설명하는 목록
- <dt> 정의되는 용어의 제목
- <dd> 용어를 설명
<표 태그>
- <table> 표를 만드는 태그 표 전체를 감쌈.
- <caption> 표의 제목이나 설명을 작성하는 태그
- <tr> 표의 행을 의미하는 태그. 자식으로 <th>태그나 <td>태그가 반드시 있어야 한다.
- <th> 표의 제목 열을 의미하는 태그. 부모 태그인 <tr> 태그 안에 있어야 한다.
- <td> 표의 일반 열을 의미하는 태그. 부모인 <tr>태그안에 있어야 한다.
● Sementic Tag란
"의미를 가지는 태그"
<header> 상단 , <nav> 네비게이션 섹션, <main> body(메인 콘텐츠), <footer>하단(저작권 정보 등).....
더 많은 태그들이 존재하지만 외울필요는 없고 하다보면 외워진다.
●Inline VS Block Element
Inline : 요소를 구성하는 태그에 할당된 공간만 차지
Block: 전체 공간을 차지하여 "블록"을 만듦.
# div - Block span - Inline
● 이미지 태그
<img src=" " alt="사과">
src= 이미지 경로 지정
alt= 필수 X , 이미지 설명
● 비디오 태그
<video src=" " type="video/mp4">
#비디오 태그와 오디오 태그는 다양한 속성들이 존재...
● 오디오 태그
<audio src=" " type="audio/mpeg">
● 하이퍼 태그(하이퍼 링크)
<a href=" ">웹페이지 이동</a>
href를 사용하여 다른 웹 페이지의 위치(URL)을 연결한다.
#하이퍼 태그 또한 다양한 속성들이 존재
● 폼 태그(form)
폼 태그를 통해 <input>, <label>, <checkbox>등을 사용하여 사용자의 정보를 입력받기 위해 사용.
● head태그
화면에는 보이지 않지만 문서 정보를 담고 있다.
앞서 HTML의 기본구조에서 확인가능!
●VS코드
강의를 들으면서 단축키도 많이 알게 되었다.
[# 1주차 후기]
1주차라고 했을 때 영상이 별로 없는줄 알았지만 알고보니 1주차에 HTML을 끝내는 것이여서 놀랐지만
고등학교 때 HTML를 한 기억이 있어 다시 상기시키는 시간이었다.
다음 강의인 CSS는 열심히 공부해야겠다!
@@1주차를 통해 지식이 없던 흙에 HTML이라는 씨앗을 심었다.@@
'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글
| [2023 신입부원 기초 스터디] 도승준 #1주차 - 레전드가 어쩌구.. 필드셋이 저쩌구.. (0) | 2023.04.06 |
|---|---|
| [2023 신입부원 기초 스터디] 최종은 #1주차 - HTML알아가기 (0) | 2023.04.06 |
| [2023 신입부원 기초 스터디] 정찬우 #1주차 - HTML은 즐거워...?? (0) | 2023.04.06 |
| [2023 신입부원 기초 스터디] 한승훈 #1주차-HTML 기초 (0) | 2023.04.06 |
| [2023 신입부원 기초 스터디] 조상혁 #1주차 - HTML알아가기 (0) | 2023.04.06 |
