HTML

Haks.·2024년 12월 24일

How to use

목록 보기

7/32

HTML

HyperText Markup Language

HyperText : 하이퍼 링크를 통해 어떤 문서에서 다른 문서로 접글할 수 있는 텍스트

Makrup : 표시하다

HTML은 웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하는 언어

Web : 컴퓨터들 간에 정보를 공유할 수 있도록 해주는 네트워크 시스템
웹사이트는 만들때 필요한 언어가 HTML & CSS
현재 HTML5 까지 발전되어 와서 웹 개발 표준
HTML 코드는 텍스트, 따라서 작성할 때는 메모장으로 대표되는 텍스트 편집 전용 프로그램을 사용해 HTML 문서를 만들어야 한다.
HTML 문서는 응용 프로그램에 따라 다른 형태로 열린다는 특징이 있다.(어떤 프로그램을 여냐에 따라 랜더링을 마친 상태로 열림)
웹브라우저 : 웹브라우저는 HTML 문서를 가져다 그 내용을 해석하고, 표시하는 역할을 한다.
파일생성 : sample.html
브라우저에 만든 html 문서 올리면 뜸, 에디터에서 열면 수정가능, 웹브라우저에서 열면 수정 불가
live server: 에디터에서 바로 열 수 있게 해주는 플러그인, html 문서에서 저장할 때마다 바로바로 반영이 됨, 밑에 GO Live
live server 에서 열면 127.0.0.1 , 포트 눌러주면 꺼짐

HTML 기본 문법

HTML은 웹페이지의 어느 부분에 텍스트가 있어야할지, 어느 부분에 이미지가 있어야 할지 등을 나타내는 역할을 함. HTML은 '태그'라 불리는 표기법을 사용해 맡은 역할을 수행

태그의 이름(이름명)

여는 태그(시작태그)

닫는 태그(끝 태그)

콘텐츠

태그
<태그명>(여는태그)콘텐츠(태그가 표시할 컨텐츠 내용)</태그명>(닫는태그) : 태그의 기본형태
<태그명> <태그명/> : 콘텐츠가 없어 콘텐츠 생략이 가능할때 단일테크그를 사용함
태그 작성법
- 태그 이름은 소문자로 쓴다.
- 여는 태그와 닫는 태그를 정확히 입력한다.
- 태그의 콘텐츠로 또 달른 태그가 포함될 수 있다.
- 들여쓰기를 적절하게 사용하는 것이 좋다(적극 권장).
속성(Attributes)
- 속서은 태그의 부가적인 기능을 정의하는 것으로, 선택사항이다.
- 속성은 시작 태그의 내부에 정의, 개수제한은 따로 없으며, 태그에 추가할 속성이 여러개일 경우 각각을 구분하기위해 공백을 사용
- 속성을 추가한 태그에 의해 표시되는 콘텐츠는 속성으로 인해 형태가 바뀔 수도 있다.
- 겉으로 드러나지 않는 속성도 존재
<태그명 속성="값">콘텐츠</태그명> 속성 : 속성명, 값 : 속성값
<태그명 속성="값" 속성2="값">
속성 구분 기준 공백
주석 : 사람에게는 보이지만, 컴퓨터(웹브라우저)에게는 보이지 않는 코드
- ;

HTML 코드 기본 구조

head와 body 로 나뉨
head : 문서의 정보를 기입하는 부분
body : 문서의 내용을 기입하는 부분
문서의 타입(DOCTYPE) 써서 완성

<!DOCTYPE html>
<html> <!-- head와 body 를 합셔처 html을 구성하는게 목적 -->
    <head>
        <meta charset="utf-8"
        <title>문서의정보</title>
    </head>
    <body>
        <strong><p>화면에 표시될 내용</p></strong>
    </body>
</html>

요소의 구분
- 태그를 통해 표현하는 웹 요소들은 '블록 레벨 요소'와 '인라인 요소'로 구분할 수 있다.
- <블록레벨 요소/> : 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다.
- <인라인 요소/> : 자기에게 필요한 만큼의 공간만 차지
인라인 텍스트 요소 :
- <mark>마크 텍스트 요소 - 형관펜 효과</mark> : 형광펜 색칠
- <strong>스트롱 텍스트 요소 -볼드 효과</strong> : 강조
- <em>em 텍스트 요소 -이탤릭체 효과</em> : 글자 휘어짐
- <q>인용구 효과</q> : " "
- <s>취소선 효과</s> : 취소선 --- 효과
컨테이너 : 개발자 도구로 보면 이컨테이너에 뭐가있는지 알 수 있다. , 가독성이 좋아짐
- 콘텐츠나 레이아웃에 아무런 영향도 주지않음, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할을 컨테이너
- 콘텐츠 내용을 구분하거나, 공통적인 스타일을 적용하고자 할때 개발자는 컨테이너를 사용하는 것이좋다.
  - <div></div> : 블록 컨테이너 : 개발자 도구로 보면 이컨테이너에 뭐가있는지 알 수 있다.
  - <span></span> : 인라인 컨테이너 : 특정 영역에 구분해 줄 때 사용
전역 속성(Global attributes)
- 모든 HTML 태그에서 공통으로 사용할 수 있는 속성, 태그에서 추가하는 부가 기능, 컨테이너를 구분, 값은 사용자가 작명
  - id : 요소에 고유한 이름을 부여하는 식별자
  - class : 그룹별로 묵을 수 있는 식별자 역할, 고유의 값을 주는 것이 아니라 요소들이 값을 공유할 수 있음, text content 면 클래스값이 2개인 값임 띄워쓰기로 구분
    - 2개이상의 값을 가질 수 있음
  - style : 요소에 적용할 CSS 스타일 선언
  - title : 요소의 추가 정보를 제공하는 텍스트로, 툴팁 제공함, 마우스 커서를 title 요소를 추가한 곳에 올리면 해당 값이 보여짐
이미지 표시하기
- img 태그는 이미지를 표시할때 사용하는 태그, 단일 태그, 닫는 태그 불필요 콘텐츠를 적어주는 대신 표시할 이미지에 대한 정보를 속성으로 지정
- src 속성은 표시할 이미지의 위치정보와 파일명, 즉 이미지의 url을 입력받는다. 서버에 위치한 이미지 파일이어도 되고, 내컴퓨터 파일도 가능
- <img src="url">
- 같은 폴더 안에 있으면 이미지 이름 파일명만 적으면 됨 아니면 url 작성
- 하위 폴더에 있을 경우 : src="해당폴더경로/파일명"
- 상위 폴더 : src="../파일명"
- atl(alternative) : 대체 텍스트, 이미지가 로딩되기 전이나 로딩에 실패한 경우 대체 텍스트가 표시됨
  
  alt 를 사용하면 이미지를 볼 수 없는 시각장애인에게 웹페이즈를 서비스해야 하는 상황에 대비가 가능하다(음성인시기가 이미지 대신 이용), 웹전근성
- width, height :
  - img 태그를 표시할 때는 이미지가 표시될 크기를 지정할 수 있다.
  - 너비와 높이를 따로 지정할 수 있으며, 단위 없이 정수 값만 => 너비와 높이는 각각 픽셀 단위로 적용

    <body>
        <img 
        src="imges/화장실.png"
        alt="대전의 랜드마크 한빛탑과 맞은편 엑스포 다리" 
        width="1000"
        > <!--같은 폴더 안에 있으면 이미지 이름 파일명만 적으면 됨 아니면 url 작성, 자동 크기조절, 그림있으면 안보임-->
    </body>

링크 열기
<a href="https://www.youtube.com">내용 유투브로 이동하고 싶어요</a> : 링크, href 특성이 필요함
- target : 현재 텝에서 열지, 새로운 탭에서 열지 결정할 수 있음
  - <a href="url" target="_self"> 현재 텝에서 열기 </a> , 갈곳 없으면 그냥 # href 에 써놓는게 일반적
  - a href="url" target="_blank">새 텝에서 열기 </a>

목록(list)

목록은 연관 있는항목(item)들을 나열한 것을 의미, 순서없는 목록 과 순서있는 목록으로 나뉜다.
리스트 안에 리스트 가능
<ul></ul> : 순서 없는 목록, (Unordered List)
<ol>\</ol> : 순서 없는 목록, (Ordered List)
- start="num" : 그 숫자부터 시작하는 목록이 만들어짐
- type="숫자,대소 알파벳,대,소 로마기호" : 5가지 존재 , start,type 같이 안써지나?..
<li>\</li> : 목록에 들어가는 항목 하나하나를 표현할 때 사용하는 태그이다, 항목들을 감싸는 태그가 무엇이냐에 따라 기호가 달라진다.
- ol 이면 1,2,3,4
- ul 이면 dot

표(table) : 행과 열로 이루어진 구조

셀에 표시된 콘텐츠의 성격이나 표의 구조에 따라 셀을 그룹으로 묶어 관리가능.

<table></table> : 하나의 표를 나타내는 태그

<tr></tr> : 표 안에서 하나의 행을 나타내는 태그

<th></th> : 행 안에서 제목에 해당하는 셀을 나타내는

<td></td> : 행 안에서 콘텐츠에 해당하는 셀을 나타내는 태그

<caption></caption> : 태이블 테그의 안쪽에서 제목 또는 표에 대한 설명을 하는 역할, 기본적으로 가운데 정렬

<thead></thead> : 표의 제목이나 주제를 나타내는 영역
<tbody></tbody> : 표의 본문
<tfoot></tfoot> : 표의 요약글이나 맺음말을 나타내는 영역

테이블 생성
몇행으로 만들건지
첫번째만 th 나머진 td
몇열을 쓸건지

<table border="1"> <!--테이블 테두리의 굵기-->
    <caption>
        마라톤 참가선수 명단
    </caption>
    <thead>
        <tr>
           <th>한국선수</th> 
           <th>일본선수</th>
           <th>미국선수</th>
        </tr>
    </thead>
    <tbody>
        <tr>
           <td>한국선수</td> 
           <td>오오다</td>
           <td>제임스</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>세계 랭킹 5위</td>
            <td>세계 랭킹 8위</td>
            <td>세계 랭킹 12위</td>
        </tr>
    </tfoot>
</table>

입력 태그

가능하면 모든 인풋에 name 요소를 달아라
<input type="데이터 유형"> : input의 핵심은 type의 속성이다.
- text : 기본값. 텍스트를 입력받는다
- email : 이메일
- password : 비번
- search : 검색할 텍스트를 입력 받는다
- date : 날짜와 시간을 지정한다.
- placeholder: 인풋 안에 내용 뭐넣어야할지 설명
수치를 입력받는 type
- color
- number
- range
- checkbox
- radio : 하나만 선택 할 수 있는 체크박스(동그라미 형태)

<label for ="teen">10대</label>
<input type="radio" id="teen" name ="age">
<label for ="twenty">20대</label>
<input type="radio" id="twenty" name ="age">
<label for ="thirty">30대</label>
<input type="radio" id="thirty" name ="age">

<label></label>: 입력 요소에 라벨을 붙이는 역할. 이를 이용하면 웹 이용자에게 직관적인 입력 요소를 제공가능
- 사이에 넣어도 되고, 전역변수를 설정해놓고 for="id" 해도 된다.
<select> , multiple : 여러개고르기, selected :제일먼저보여질것, size :몇개 보일지

<option value="coffee" selected>커피\</option><br>
<option>콜라\</option><br>
<option>쥬스\</option><br>
</select>
여러 줄의 텍스트 입력 방법 : 여러 줄의 텍스트를 입력 받을 수 있다. 텍스트 영역의 크기는 글자 수를 기반으로 결정 가능
- cols,rows
- <textarea cols="10" rows="6"></textarea>
진척도 <progress>
- max,value
- <progress value="60" max="100"></progress>
클릭 <button>
- 클릭을 입력으로 받는 버튼요소를 만드는 태그로, 태그사이의 콘텐츠는 버튼에 표시될 텍스트 역할
- input 태그의 속성에 button 을 지정해도 버튼을 만들 수 있는데 외형적으로 아무 차이가 없음
- <input type="button" value="PUSH">
- <button>PUSH\</button>
영역 표시
- <fieldset></fieldset>
- <legend></legned> : 묶은것 이름 넣을 수 있음

    <body>
        <h1>로그인 해주세요</h1>
        <label>
            아이디
            <input type="text" placeholder="아이디">
        </label>
        <label for="pw">비밀번호</label>
        <input type="password" id="pw" placeholder="비밀번호">
        <hr>
        <input type="color">
        <input type="number">
        <label>
            <input type="checkbox"> 제육볶음
        </label>
        <input type="range">
    </body>

양식을 만들고 값 전송

입력 양식을 만들어주는 <form>태그는, 사용자가 입력한 데이터를 서버로 보내는것을 목적으로 사용하는 태그, 서버에 대한 이해가 필요함

로그인 페이지

회원가입 페이지

검색어 입력 페이지

서버란 정보를 제공하는 host

<form> : 입력 요소들을 감싸며, 입력 값을 서버측으로 제출할 수 있다.
- form 태그의 안에 강의들에서 학습한 여러 입력 태그들을 포함시키면, 해당 입력 요소들은 양식의 개별 항목으로써 역할을 수행
- 단순히 폼 요소 안에 입력 요소를 포함하는 것만으로 서버에 입력 값을 전송할 수 없다. form 태그가 역할을 수행할 수있도록 속성이 존재
  - action : 입력값을 전송할 서버의 url
  - method : 클라이언트가 입력한 데이터를 어떤 식으로 전송할지(GET or POST)
이름을 지어주세요 name=""
- 폼 요소안에 필요한 만큼의 입력 요소를 포함해 다양한 형태의 약식을 만들 수 있다.
- 이때 폼 요소안에 포함되는 각 입력 요소에는 name 속성을 추가하여 각 입력 항목의 역할을 구별해 줄 수 있다.
<input type="submit"> : form 에서 입력한 내을 보내는 역할
name 식별자 마지막으로 꼭 작성 서로다른 이름 각 입력에, 서버가 식별하는 것

    <body>
        <form action="none.com" method="post">
            
            <label for="name">이름</label>
            <input id="name" type="text" name="name">
            <br>

            <label for="age">나이</label>
            <input id="age" type="number" name="age">
            <br>

            <label for="character">성격</label>
            <textarea id="character" name="chßracter">

            </textarea>
            <br>
            
            <input type="submit">

        </form>
    </body>

문서 정보 관리하기

<meta> : HTML 문서에 대한 메타데이터를 정의
- 데이터에 대한 데이터 즉 '정보'를 의미한다.
- 항상 head 태그의 안에 들어가며, 일반적으로 문자 세트, 페이지 설명, 키워드, 문서의 작성자 및 뷰포트 설정을 지정하는데 사용된다.
- 웹페이지에 대한 정보를 제공하므로 검색엔진이 페이지를 검색할 때 참고할 수 있고, 검색 결과에도 반영할 수 있다.
<meta> 유형, 속성
- charset : 문자 인코딩에 대한 요약 정보를 기입하는 속성.
- http-equiv : 인터넷에서 데이터를 주고 받을 수 있는 프로토콜, http 관련 정보를 지정하면, content 가 그에 대한 정보(값)을 지정한다
  
  <meta http-equiv="x-ua-compatible" content="IE=edge"> IE 브라우저 최신 버전의 엔진을 사용한다는 의미
  
  <meta> http-equiv="refresh" content="10"> : 새로고침 을 10초마다 한다는 의미
- name : content 속성을 값으로 하여 문서 정보를 이름+값 쌍의 형태로 제공할 때 사용 가능
  - <meta name="author" content="페이지 작성자">
  - <meta name="description" content="페이지 요약 정보글">
  - <meta name="keywords" content="공부, 코딩, IT, 학습">
- content

    <head>
        <meta charset="utf-8">
        <meta 
        http-equiv="x-ua-compatible"
        content="IE=edge"
        >
        <meta name="author" content="김병학">
        <meta name="description" content="연습용 페이지">
        <meta name="keywords" content="공부, html, 실습">
        <title>문서 정보 관리하기</title>
    </head>

개발자도구

개발자 도구를 통해 인라인인지,블록레벨인지 구분 가능 : 설정 -> 도구더보기 -> 개발자 도구

맞춤설정 가능
Elements : 현재 작성죽인 html 코드가 나옴
각태그의 마우스 코드를 올리면 현재 태그가 차지하고 있는 넓이 나옴
computed 를 눌러 박스모델도 확인가능

태그 종류

엔터를 이용한 줄바꿈을 무시

스페이스를 이요한 공백을 한번씩만 허용(여러번 스페이스바 눌러도 1번 누른것으로 처리)

공간이 남아도 태그가 새로 추가될 경우 줄바꿈이 되어 그다음 줄에 입력됨

<p></p> : 문단 요소, 텍스트 단락을 나타냄, 문단과 문단 사이에는 여백이 존재
<h> : h태그는 제목(표제) 요소를 나타내는 태그. 숫자와 함께 사용되며, 숫자 1일떄 가장크고 6일때 가장 작다.
<hr> : 콘텐츠가 없을떄 사용하는 태그, 수평선을 나타냄, 주제 변경, 내용 구분
<p stlye="color:red;" id="text">여러분 안녕하세요</p>
들여쓰기는 여는태그 마지막엔터 끝 태그 앞에 엔터쳐서 사이에 들여쓰기를 사용해서 사용 가독성 좋음
<br> : 줄바꿈,엔터(breakline)
&nbsp; : 공백을 2번이상 줄떄 사용
<meta cahrset="utf-8"> : 화면에 문서가 렌더링 되기전에 브라우져가 문서를 해석하는 과정에서 문서의 인코딩 과정을 확인할 수 있는 효과, pc에 따라 다른 인코딩방식을 맞춰주는것
<title>문서의제목</title> : 문서의 탭에 표기됨 (헤드에 주로 사용)
<a href="https://www.youtube.com">내용 유투브로 이동하고 싶어요</a> : 링크, href 특성이 필요함
- target : 현재 텝에서 열지, 새로운 탭에서 열지 결정할 수 있음
  - <a href="url" target="_self"> 현재 텝에서 열기, 안적으면 기본값이 _self임 </a>
  - <a href="url" target="_blank"> 새 텝에서 열기 </a>
<a> : 는 내가 만들어 놓은 폴더의 다른곳으로도 이동할 수 있다.

<a 
    target="_blank"
    href="../1회차/profile.html"
 >

<ul></ul> : 순서 없는 목록, (Unordered List)
<ol></ol> : 순서 없는 목록, (Ordered List)
- start="num" : 그 숫자부터 시작하는 목록이 만들어짐
- type="숫자,대소 알파벳,대,소 로마기호" : 5가지 존재 , start,type 같이 안써지나?..
<li></li> : 목록에 들어가는 항목 하나하나를 표현할 때 사용하는 태그이다, 항목들을 감싸는 태그가 무엇이냐에 따라 기호가 달라진다.
- ol 이면 1,2,3,4
- ul 이면 dot

시맨틱 태그(컨테이너를 대신할 수 있음)
- <의미>콘텐츠</의미>
- 의미론적인 이라는 의미
- 개발자와 브라우저에게 의미를 제공한다.
- 검색엔진은 시맨틱태그를 중요한 단서로 본다.
- 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 떄 참조된다.
- 코드의 가독성이 좋아진다.
- 컨테이너의 남용을 방지할 수 있어 코드 쓰기가 편하다.
  - article : 독립적 컨텐츠
  - aside : 별도의 컨텐츠
  - details : 추가적인 상세한 정보
  - figcaption : figure 의 자막
  - figure : 설명 붙는 독립 컨텐츠
  - footer : 맺음말
  - header : 머릿말
  - main : 주된 콘텐츠
  - nav : 네비게이션 링크
  - section : 콘텐츠의 한섹션
  - summary : detail의 헤더
  - time : 강조할 시간