1.intro

HTML (Hypertext Markup Language,하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.

코드 편집기 - visual studio code 설치하기

1단계 : 비주얼 스튜디오 코드 홈페이지에 접속하여 설치한다

2단계 : 확장 기능에서 한글 언어 팩을 찾아 설치하기

3단계 : 원하는 확장 프로그램 설치하기

저는 live server 설치했는데 이것이 무엇이냐면 html 문서를 편집하고 나서 웹 브라우저를 새로고침 할 필요없이 편집된 사항이 반영되는 확장 프로그램입니다

2.HTML

a.HTML의 기본구조

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML의 기본구조 학습</title>
</head>
<body>
    
</body>
</html>

1.DOCTYPE html 태그

<!DOCTYPE html>

문서 형식을 나타냅니다. HTML 초창기에 (1991~2년) doctype은 HTML 페이지가 자동 오류 검사나 다른 유용한 것이 가능한 좋은 HTML을 의미하는 연결고리처럼 작동하는 것을 뜻했습니다.
이 태그는 그저 유효한 문서 형식을 나타내는 짧은 문장입니다.

2.html 태그

<html></html>

전체 페이지의 콘텐츠를 포함하며, 기본 요소입니다.

3.head 태그

<head>
    <meta charset="utf-8">
    <title>page의 제목</title>
  </head>

페이지를 열 때 브라우저에 표시되는 <body>요소와 다르게, head의 내용은 페이지에 표시되지 않는다. 대신에 head의 내용이 하는 일은 페이지에 대한 metadata를 포함하는 것이다.

title 태그를 이용하여 웹 page의 제목을 지정한다. 지정된 제목은 웹 브라우저의 제목 표시줄에 표시된다.
meta 태그를 이용하여 html 문서라는 데이터를 설명하는 데이터를 작성한다.

<meta charset="utf-8">

utf-8 은 전세계적인 character 집합으로 많은 언어들을 문자들을 포함하는 인코딩 방식이다. 이는 웹 페이지에서 어떤 문자라도 취급할 수 있다는 것을 의미한다.

4.body 태그

<body></body>

텍스트, 이미지, 비디오, 게임, 재생 가능한 오디오 트랙 등을 비롯하여 페이지에 표시되는 모든 콘텐츠가 포함됩니다.

b.HTML의 요소 구조

HTML은 elements(요소)로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 합니다. tags 는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 합니다.

1.여는 태그(Opening tag)
2.닫는 태그(Closing tag)
3.내용(Content) : 요소의 내용입니다
4.요소(Element) : 여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고합니다

주의 : 주로 문서에 무언가를 첨부하기 위해 단일 태그(Single tag)를 사용하는 요소도 있습니다. 이는 닫는 태그가 필요하지 않습니다.

속성은 요소에 추가적인 내용을 담고 싶을 때 사용합니다

변수 부분에는 속성값을 넣어주면 됩니다.
주의 : 따옴표 안써도 문제가 없을 때도 있지만 어느순간 버그 마구잡이로 발생하니까 반드시 따옴표 써라

c. Tag (태그)

다양한 tag들을 공부하기 전 미리 알면 좋은 tag 분류

block level tag 와 inline tag
전자는 앞 뒤 요소 사이에 새로운 줄을 만든다. 그러나 후자는 새로운 줄을 만들지 않고 문장, 단어 같은 작은 부분에 대해서만 적용할 수 있다.

semantic 태그
semantic은 의미론적 이라는 뜻으로 이러한 태그를 사용하면 visual 적인 변화 뿐 만 아니라 의미를 지녔기 때문에 검색엔진이 웹페이지를 검색 결과의 상위에 나올 수 있게 한다.(검색엔진최적화)

1. 기본적인 tag 들 (a,p,br.. 등)

1.text 관련 tag

block lebel tag라고 언급되지 않은 tag는 모두 inline tag 이다. 모르겠는 것 그리고 구분이 딱히 필요하지 않는 것은 표시 하지 않았다

<p> </p>

단락을 구분하기 위한 태그, block level tag, semantic tag

<br>

줄바꿈 태그, single tag, block level tag, non-semantic tag

<strong> </strong>

안녕

굵은 글씨 태그, 화면낭독기가 이 태그로 감싸진 text를 경고나 주의사항같은 중요한 내용으로 인식하여 강조하여 낭독한다. semantic tag

<b> </b>

굵은 글시 태그, non-semantic tag

<em> </em>

해위

기울어진 글씨 태그, 화면낭독기가 이 태그로 감싸진 text를 중요한 내용으로 인식하여 강조하여 낭독한다. semantic tag

<i> </i>

기울어진 글씨 tag, non-semantic tag

<hn> </hn>
ex) <h1> 제목 </h1>

반가워

heading 의 준말로 문서를 계층구조화 하기 위해 쓰인다. h1이 가장 큰 제목이고 n이 커질수록 하위 계층의 제목이다. 글씨가 커지고 굵어진다.semantic tag

그 이외의 태그들
1. small tag - 작은 글씨
2. sub - 아래 첨자
3. sup - 위 첨자
4. s - 취소선
5. u - 밑줄
6. ins - 공동작업문서에서 새로운 내용 삽입 표현 (밑줄) semantic tag
7. del - 공동작업문서에서 기존 내용 삭제 표현 (취소선) semantic tag

2. a 태그와 속성

<a href = "https://www.youtube.com/watch?v=NHKn8Sny8xQ" target = "_blank" title = "good song"> wake up </a>

wake up

a태그는 하이퍼링크를 정의한다.

href 속성은 링크의 목적지를 나타낸다.

target 속성은 링크된 문서를 어디에서 열지 특정한다.

_self - 기본, 문서를 현재 창에서 연다.
_blank - 문서를 새로운 창에서 연다.
_parent - 부모 페이지에서 연다, iframe 등이 사용된 환경에서 쓰인다.
_top - 최상위 페이지에서 연다, iframe 등이 사용된 환경에서 쓰인다.

title 속성은 마우스가 하이퍼링크된 텍스트에 올려져있을 때 나타나는 문구를 설정한다.

3.list 태그와 속성

<ul>
    <li>고슴도치</li>
    <li>캥거루</li>
    <li>다람쥐</li>
    <li>두더쥐</li>
</ul>


<ol>
    <li>세수</li>
    <li>운동</li>
    <li>공부</li>
    <li>요가</li>
</ol>

고슴도치

캥거루

다람쥐

두더쥐

세수

운동

공부

요가

li태그 – 순번이 없는 리스트 작성 ( 앞에 점이 있음)
ul태그 - 순번이 없는 리스트 작성 + 들여쓰기 ( 앞에 점이 있음 )
ol태그 - 순번이 있는 리스트 작성 + 들여쓰기 ( 앞에 번호가 있음)
ul태그와 ol 태그 안에 li 태그가 있어야됨 -> li태그 없으면 한 줄로 작성됨

4.img 태그와 속성

<img src="https://images.mypetlife.co.kr/content/uploads/2017/12/09160633/Dognews-1.jpg" alt="비숑 사진">

1. src = 이미지의 경로 설정 2. alt = 사진 대체 텍스트 3. title = 사진위에 마우스 올려놓을시 뜨는 텍스트 4. width 가로 5. height 세로

사진이 상위 디렉토리에 위치할 경우 - ../폴더이름
사진이 하위 디렉토리에 위치할 경우 - /폴더이름

5.table 태그와 속성

<table border = “1”>
<thead>
<tr>
<td>이름</td>  <td>나이</td>  <td>성별</td>
</tr>
</thead>
<tr>
<td>김인직</td>  <td>42</td>  <td>여성</td>
</tr>
<tfoot>
<tr>
<td>김학성</td>  <td>12</td>  <td>여성</td>
</tr>
</tfoot>
</table>

이름	나이	성별
김인직	42	중성
김학성	12	여성

상위 태그 - table
속성 : border = “두께”
1차 하위태그 - thead , tfoot -> 행이 어디에 위치하던 항상 맨 위 or 맨 아래로 간다
2차 하위태그 - tr - table row 의 약자 -> 행 단위를 결정 짓는다
최하위 태그
1. td - table data 의 약자 -> 한 칸을 결정 짓는다
2. th - 굵은 글씨의 td를 형성한다

태그 병합하기
td 태그의 속성 이용
1. rowspan = “ 병합할 칸의 개수” -> 병합할 칸의 개수 – 1 만큼의 td 태그를 지워라 : 세로로 병합
2. colspan = “ 병합할 칸의 개수” -> 병합할 칸의 개수 – 1 만큼의 td 태그를 지워라 : 가로로 병합

	월	수	금
아침	시리얼	벚꽃돈가스버거	단식
점심	돼지발톱
저녁	민초짜장면	캐모마일릭레서

2. Form (get, post) , input

<form  action="http://localhost" method="post" enctype="multipart/form-datas">
<strong>로그인</strong>
<p>
<input type="text" name="id" placeholder="아이디">
<br> <input type="password" name="pwd" placeholder="비밀번호">
<input type="submit">
  </p>
</form>
<p> <strong>만약 회원이 아니라면 얼굴 사진 업로드와 전화번호를 입력하시고, 거주 지역과 성별, 선호하는 음식을 선택 후 빈창에 주민등록번호를 입력하시오.</strong> </p>
 <input type="file" name="face">
<form  action="http://localhost/index.html" method = "post" enctype="multipart/form-data"> 

 <input type="tel" name="phonenumber" placeholder="전화번호">

  <p>지역
<select name="local">
  <option value="seoul">서울특별시 강서구 마곡서1로 111-11 </option>
  <option value="daegu">그 외의 거주 지역</option>
</select>
  </p>
<p>
 남성 <input type="radio" name="sex" value="male">
 여성 <input type="radio" name="sex" value="female">
  </p>
<p>
좋아하는 물고기(복수 선택 가능)
</p>
너에 대해 알고싶어<input type="checkbox" name="food" value="rose">
고등어 <input type="checkbox" name="food" value="hamburger">
화장실 가고 싶어<input type="checkbox" name="food" value="chicken">
<br><textarea name="reason" rows="2" cols="50" placeholder="주민등록번호를 입력하세요."></textarea>
<br><input type="submit">
<input type="reset" value="초기화">
</form>


<p>
<form action="https://www.youtube.com/shorts/adNAmY0zMG4" target="_blank">
<input type="submit"  value="발작버튼">
</form>
</p>

로그인

만약 회원이 아니라면 얼굴 사진 업로드와 전화번호를 입력하시고, 거주 지역과 성별, 선호하는 음식을 선택 후 빈창에 주민등록번호를 입력하시오.

지역
서울특별시 대구광역시 경기도 고양시

남성
여성

선호하는 음식(복수 선택 가능)
로제 떡볶이
햄버거
치킨

최상위 태그 form
속성 -> action = 데이터를 보내는 주소를 지정한다. 백엔드 개발자 분들이 알려주시는 주소를 기입하면 된다.

input 태그는 form 태그 안에 있어야 본 역할을 수행한다. Input 태그는 단독 태그이다.

Input 태그의 속성 : type 과 name(범주) 과 value(값)

Type 이용하기
종류
1. input type = “text” -> 아이디 입력 창
2. input type = “password” -> 비밀번호 입력 창
3. input type = “submit” -> 제출 버튼
4. input type = “checkbox” -> 네모 버튼 선택, 중복 선택 시 이용
5. input type = “radio” -> 둥근 버튼 선택
6. input type = “file” -> 사용자가 파일을 선택하는 버튼

select 태그 이용하기 -> 중복 선택 불가
Select 태그의 속성 name
Select 태그 안에 option 태그를 이용하면 된다.
Option 태그의 속성 value

예시) 	<select name="sex">
  	<option value="male">남성</option>
<option value="female">여성</option>
</select>

textarea 태그 이용하기 -> user가 text를 입력할 수 있는 공간이 생긴다.
Textarea 태그의 속성 name, rows, cols. 공동태그이다. 태그 사이에 글을 적으면 default 값으로 작용한다.

예시) <textarea name="reason" rows="8" cols="80">이유를 입력하시오</textarea>

method 태그 -> 정보 전달 방식을 url 이 아닌 숨겨서 전달

POST 방식으로 주고받을 때에는 URL이 아닌 HTTP 패킷에 그 값을 넣어서 보내게 된다. 따라서 URL을 통해서는 확인이 불가능하다. 패킷의 정보를 열어봐야만 그 데이터를 확인할 수 있다.

<form action = “주소” method = “post”>

* url 방식은 method = “get” 이다.

GET방식은 URL에 데이터가 노출되어서 보안에 취약하지만, POST방식은 URL에 데이터가 노출되지 않기 때문에 일반사용자를 기준으로 생각하면 더 보안에 우수하다고 할 수 있다.

d.Block and Inline

block-level 태그는 항상 새로운 줄에서 시작한다, 그리고 브라우저는 자동적으로 앞뒤로 단락을 나눈다.

다음은 block-level 태그들이다.

<address><article><aside><blockquote><canvas><dd><div>
<dl><dt><fieldset><figcaption><figure><footer><form>
<h1>-<h6><header><hr><li><main><nav><noscript><ol><p>
<pre><section><table><tfoot><ul>

block-level tag 와 반대되는 태그를 inline-level tag라 한다. inline-level tag는 새로운 줄에서 시작하지 않고 앞뒤로 단락이 나뉘지도 않는다.

다음은 inline-level tag 들이다.

<a><abbr><acronym><b><bdo><big><br><button><cite>
<code><dfn><em><i><img><input><kbd><label><map>
<object><output><q><samp><script><select><small><span>
<strong><sub><sup><textarea><time><tt><var>

e.semantic tag

semantic(의미론적) 태그는 브라우저와 개발자 모두에게 태그의 의미를 전달한다.

많은 web site의 html 코드를 보면

<div id="nav"> <div class="header"> <div id="footer">

navigation, header, and footer를 나타내기 위해 div 태그를 이용하고 id 속성을 통해 이름을 부여한다.
그러나 semantic tag를 사용하면 별도의 속성을 추가하지 않고 개발자와 브라우저 모두 태그의 의미를 이해할 수 있다.

위 사진은 웹 사이트의 기본적인 디자인 형식이다.
각 영역을 나누기 위해 기존에는 div 태그를 이용했지만 이제는 semantic 태그를 이용하면 된다.

<header>
  
  <nav>
    
  </nav>
  
</header>


<main class="contents">
  <section id = "headling">
    
    
  </section>
  
 </main>

<footer>
  
</footer>

f.Emmet 사용법

! 입력 후 Tab키
간단하고 빠르게 HTML 문서 타입이 출력된다


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

하위요소 만들기 >
div>ul>li 입력 후 Tab키

<div>
    <ul>
        <li></li>
    </ul>
</div>

형제노드 +
div>ul+ol+div 입력 후 Tab키

+를 사용하여 한 요소와 같은 단계에 위치한 요소를 생성할 수 있다


<div>
    <ul></ul>
    <ol></ol>
    <div></div>
</div>

반복하기
div>li3 입력 후 Tab키


<div>
    <li></li>
    <li></li>
    <li></li>
</div>

g.section (div로 묶어서 섹션을 나누지 마세요)

웹 문서는 시맨틱 태그를 사용하지 않더라도 만들 수 있지만 시멘틱 태그를 사용해야 하는 이유는 웹 브라우저가 html의 소스코드만 보고도 어느 부분이 제목이고 메뉴이고 본문내용인지 쉽게 알 수 있다.

section 태그는 콘텐츠 영역을 나타낸다. section 테그는 옃 개의 콘텐츠를 묶는 용도로 사용하고, section 태그와 유사한 article 태그는 블로그의 포스트처럼 독립된 콘텐츠로 쓰인다.

<main class="contents">
	<section id="headling">
    <h2> 벌크업을 위한 운동</h2>
    	1.ddddd
        
        
        2.dcdsc
    
    </section>
    
    
  <section id = "activity">
  <h2> 다양한 활동 즐기자</h2>
  	1.dcwdcdscdc
    
    2.cdscdscds
  </section>

Author And Source

이 문제에 관하여(HTML 1주차 스터디 노트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@heeyoon1302/HTML-1주차-스터디-노트

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

HTML 1주차 스터디 노트