1. HTML은 프로그래밍 언어가 아니다
오늘은 HTML의 구조와 태그에 대한 강의로 강의 시작하면서 리더님이 HTML은 프로그래밍 언어가 아니니까 다른데서 HTML, CSS로 개발한다고 말하면 안된다고 하셨다.😅
출처: 웹드라마 좋코딩
2. HTML
2-1. HTML(Hypertext Markup Language)
- Hypertext : 웹 페이지에서 다른 페이로 이동할 수 있도록 하는 것
- Markup : 문서나 데이터의 구조를 명기하다
2-2. HTML 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
</body>
</html><head>와 </head> 사이에는 HTML 문서 정보를 정의하는 코드가 포함되며, 이 사이에 작성된 것은 웹 페이지에 나타나지 않는다.
<body>와 </body> 사이에 작성된 것은 모두 웹 브라우저에 출력된다.
2-3. HTML 태그
HTML은 태그로 구성되어 있으며, 태그의 속성은 여러개가 될 수 있다.
✔️HTML 기본 태그
<h1~6></h1~6> 제목
<p></p> 본문
<br /> 줄 바꿈
<ul></ul> 순서 없는 목록
<ol></ol> 순서 있는 목록
<hr /> 수평 줄✔️문자 꾸미기 태그들
<b></b> 두껍게
<strong></strong> 두껍게 + semantic한 의미를 지님
<i></i> 이탤릭
<em></em> 강조, 기울여서 표시됨
<del></del> 중간 줄
<u></u> 밑줄✔️이미지
<img src="" alt="" />
alt 속성은 이미지를 불러올 수 없을 경우에 나타나는 text를 의미한다.
✔️하이퍼링크
<a href="" target="" />
target 속성은 링크된 문서를 열었을 때 문서가 열릴 위치 표시
_blank : 새로운 탭에서
_self : 현재 탭에서(기본값)
2-4. Form 태그 & Input 태그
input 태그는 사용자 입력을 받는 태그로 type에 따라 input이 변한다.<input type="button" value="버튼" />
-
type
버튼, type="button"
텍스트, type="text"
패스워드, type="password"
체크박스, type="checkbox" - 여러 선택지 중 여러 개를 선택 가능함
라디오 버튼, type="radio" - 여러 선택지 중 하나만 선택 가능
날짜 선택, type="date" -
선택 메뉴 select 태그
<select>: select 폼 생성
<option>: select 폼 옵션 값 생성
<optgroup>: option을 그룹화
2-5. Table 태그
Table 태그는 표를 만들 때 사용하는 태그!
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>Table은 위와 같은 구조로 되어있으며 각각의 태그는
<table>: 표를 감싸는 태그<tr>: 표의 행<th>: 표의 열 (제목 칸)<td>: 표의 열 (일반 칸)
2-6. Semantic
HTML 요소는 Semantic 하게 작성되어야 한다.
이 말은 즉 웹 페이지를 이루는 요소에 의미에 맞는 태그를 사용하자는 것이며
위와 같이 과거에는 영역에 상관없이 div 태그로만 이루어져 있어 코드만 보고 어떤 영역인지 구별하기 힘들어 유지보수하기 어려웠지만, semantic tag를 사용하면 웹 페이지의 어떤 요소인지 바로 확인할 수 있다.
블로그 작성할 때, HTML 태그들을 사용하면서 작성하다 보니 저절로 복습이 되는 느낌이다😆
HTML, CSS는 사용해 본 경험이 있어서 아직까지 강의를 듣는데 수월하지만
이후에 있을 자바스크립트는 안 다뤄봐서 걱정되면서 기대가 된다😎😎😎
* 이 문서는 SeSAC X 코딩온 풀스택 웹 개발자 과정 2회차 강의자료 내용을 일부 포함하고 있습니다. *
