2주차 html

네모·2023년 1월 14일

study

목록 보기
2/4

html이란?

Hyper Text Markup Language
웹 페이지를 만드는 언어 , markup 언어이다.
문서를 웹에 나타내기 위해서 사용

문법

  1. 태그
    태그는 '무언가를 표시하기 위한 꼬리표, 이름표'라는 의미

태그는 <, > 기호로 표현하며 <, > 기호 사이에 태그 이름이 들어감.
시작 태그와 종료 태그로 이루어지며
종료 태그는 태그 이름 앞에 '/' 기호가 붙음

<h1>Hello, HTML</h1>

요소란? 내용을 포함한 태그 전체
요소 = 태그 같은 의미로 취급

  1. 속성이란?
    태그에 추가로 정보를 제공
    태그의 동작이나 표현을 제어할 수 있는 설정값
    이름과 값으로 되어있다.

속성 사용방법
시작 태그에서 태그 이름 뒤에 공백으로 구분 후 속성 이름="속성값"으로 표현합니다.
속성값은 홑따옴표(')와 쌍따옴표(")로 감싸 표현합니다.

<h1 id="title">Hello, HTML</h1>

여러 속성을 사용하는 방법

<h1 id="title" class="main">Hello, HTML</h1>

공백으로 구분해서 사용한다.

속성은 모든태그에 사용가능(글로벌속성), 특정태그에만 사용가능

3.태그의 중첩
태그 안에 다른 태그 선언 가능 단, 부모 태그 벗어나면 안됨

4.빈태그란?
내용이 없는 태그 ( 종료태그 필요x)

5.공백
html은 두칸이상의 공백을 무시한다.

주석

<!-- 로 표시하고, --> 표시로 종료

기본적인 문서구조

기본적인 문서구조

<!DOCTYPE html>               <!-- 문서타입정의,최상단에 선언 -->
<html lang="ko">	<!-- 문서타입선언후, html태그선언 lang (문서언어설정) -->
    <head> 					  <!-- html의 자식태그 head -->
        <meta charset="UTF-8"> 		<!-- meta 태그 (인코딩 방식설정) 거의 UTF-8 사용 -->
        <title>HTML</title> <!-- title태그 (문서제목) 실제 브라우저 화면 탭바에 노출[접근성,검색엔진에 영향] -->
    </head>
    <body>        			  <!-- html 자식태그 boby -->
        <h1>Hello, HTML</h1>    <!-- 앞에서 배웠던 태그들 boby안에서 사용 -->
    </body>
</html>
<head> : 기본 설정을 선언하는 태그나 외부 파일을 연결하는 역할을 하는 태그들이 위치해야 하는 태그

태그 관련 사이트

https://developer.mozilla.org/en-US/docs/Web/HTML/Element
http://html5doctor.com/element-index/
https://www.w3schools.com/tags/default.asp

태그종류

제목태그(heading 태그)

<h1> </h1> <!-- h뒤 숫자가 작을수록 큰제목 -->

단락태그(paragraph 태그) (block level)

<h1>역사</h1>
<h2>개발</h2>
<p>
    1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안하였다.
    ... 이하 생략
</p>

linebreak (br 태그<빈태그> 줄바꿈 )

<h1>역사</h1>
<h2>개발</h2>
<p>팀 버스리<br> <!-- 개행하기위해 (줄바꿈)-->
    1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안하였다.
    ... 이하 생략
</p>
<!-- <p> 내부에서 임의로 개행을 하기위해 (html은 공백x라서) -->

텍스트 표현 태그 (inline level)

<b> ->  bold 단순 표현 굵은 글씨체 표현 
<strong> -> (의미 : 중요함) + (표현 : 굵은 글씨체 표현)
<i> -> italic 글자를 기울여서 표현
HTML5 버전에서는 <i> 태그가 단순 표현용 태그 -> 의미를 가지는 태그
특정 이유(기술적인 용어, 외국어 문구, 소설속 인물의 생각 등)
<em> -> (의미 : 강조) + (표현 : 글자 기울어짐)
<u> -> underline 단순 글자 밑줄을 표현
<ins> -> (의미 : 새롭게 추가된) + (표현 : 글자 밑줄)
<s> : strike 단순 표현 글자의 중간선을 표현
(예전에 존재했던 strike 태그와는 다른 태그로, strike 태그는 폐기되어 더는 사용할 수 없습니다.)
<del> -> (의미 : 삭제된) + (표현 : 밑줄)
<b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>

시멘틱 태그 : 의미 부여한 태그
참고 링크
https://developer.mozilla.org/en-US/docs/Web/HTML/Element#inline_text_semantics

앵커태그 

<a href="http://www.naver.com/" target="_blank">네이버</a>

<a속성관련링크>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

href 속성

링크를 만들기 위해 <a> 는 반드시 href(hypertext reference) 속성 가지고있어야함
href : 링크의 목적지가 되는 URL지정 (속성값임)

target 속성

링크된 리소스를 어디에 표시할지를 나타내는 속성

속성값(_self, _blank, _parent, _top)

_self : 현재 화면에 표시한다 target 속성이 선언되지 않으면 기본속성 ex) 현재페이지가 다른페이지로 변경

_blank : 새로운 창에 표시한다는 의미로 외부 페이지가 나타남
ex) 링크가 새로운페이지로 열림

_parent와 _top은 프레임이라는 특정 조건에서만 동작하는 속성
최근에는 잘안씀

내부링크 (책갈피 기능)(ex 스크롤 많이 내릴때 상단으로 이동) 

<a href="#top">HTML</a>

의미가 없는 컨테이너 요소

<div> : block-level (라인하나 다 채워)
<span> : inline-level (블록레벨 안에 채워짐)

list 요소

lsit(일련된 항목들이 나열 된 것들을 의미)

ul(unordered list) : 순서x 리스트

<ul> 
    <li> 콩나물</li> 
    <li> 파</li> 
    <li> 국  간장</li> 
    ... 
</ul>

관련 링크 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

ol(ordered list) : 순서o 리스트 (숫자가필요한경우)

<ol>
    <li>냄비에 국물용 멸치를 넣고 한소끔 끓여 멸치 육수를 7컵(1,400ml) 만든다.</li>
    <li>콩나물을 넣고 뚜껑을 덮어 콩나물이 익을 때까지 끓인다.</li>
    <li>뚜껑을 열고 대파, 마늘, 고춧가루를 넣고 끓인다.</li>
    ...
</ol>
* <li></li> : 목록 만드는 태그 
(<ol>태그안에는 자식태그 <li>만 사용가능)
(<li>태그안에는 다른 태그 사용가능 중첩할때!)

관련 링크 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol

dl(definition/description list) : 용어와 그에 대한 정의를 표현

<dl>
    <dt>리플리 증후군</dt>
    <dd>허구의 세계를 진실이라 믿음</dd>
  	<dd>거짓된 말과 행동을 상습적으로 반복</dd><!-- 이렇게 두개이상 사용가능-->
    <dt>피그말리온 효과</dt>
    <dd>타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상</dd>
    <dt>언더독 효과</dt>
    <dd>사람들이 약자라고 믿는 주체를 응원하게 되는 현상</dd>
</dl>
* <dt> : 용어를 나타내는 태그
* <dd> : 용어에 대한 정의 또는 설명을 나타내는 태그
용어 하나에 여러 정의가 들어갈 때, <dd>를 한 개 이상 쓰는 것이 가능합니다.

관련 링크 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl

이미지태그 (닫는 태그가 없는 빈 태그)

<img src="./images/pizza.png" alt="피자",width="400" height="200">
*src 속성 : 이미지의 경로지정
*alt 속성 : 대체 텍스트 입력 (간결하게 전달해야되는정보만)
*width/height : 이미지 크기 ( 이미지크기가 고정이라면)
<!-- 상대경로 -->
<img src="./images/pizza.png" alt="피자">
<!-- 현재위치에서 이미지폴더안에있는 피자이미지 불러옴 -->
<!-- 절대경로 -->
<img src="C:/users/document/images/pizza.png" alt="피자">
<!-- 컴퓨터상에 있는 이미지 불러오기 -->
<img src="http://www.naver.com/pizza.png" alt="피자">
<-- 웹상에 있는 이미지 불러오기 -->
상대경로 : 현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로 
<./(현재페이지에있는폴더) '()'생략가능 >
<'../' 상위폴더로 한번이동 여러번하고싶으면 여러번쓰기)>
<상위폴더 -> 하위폴더로 이동 : 폴더명/이미지파일>
절대경로 : 실제 그 이미지가 위치한 곳의 전체 경로 (어느페이지에 불러오더라도 같은 경로됨)

gif : 제한적인 색을 사용하고 용량이 적음 투명 이미지와 애니메이션 이미지를 지원하는 형식
jpg : 사진이나 일반적인 그림에 쓰이며 높은 압축률과 자연스러운 색상 표현을 지원하는 형식(투명 x)
png : 이미지 손실이 적으며 투명과 반투명을 모두 지원하는 형식

표

표는 셀(내용이 들어가는 하나의 칸)로 구성

<table> : 표를 나타내는 태그 : 하나 이상의 <tr>로 구성
	-<tr> : 행을 나타내는 태그  , 자식태그 <th>, <td>
  		-<th> : 제목 셀을 나타내는 태그
  		-<td> : 셀을 나타내는 태그
** <boby>안에 넣음
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16 
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    <tr>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
    </tr>
</table>
Monthly Savings
Month Savings
January $100
February $80
Sum 
<table>
    <caption>Monthly Savings</caption> <!-- 표제목 -->
    <thead> <!-- 제목 행 그룹화 -->
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tbody> <!-- 본문 행 그룹화 -->
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$80</td>
        </tr>
    </tbody>
    <tfoot> <!-- 바닥 행 그룹화 -->
        <tr>
            <td colspan="2">Sum</td>
        </tr>
    </tfoot>
</table>

테이블 구조 관련태그

<caption>: 표의 제목을 나타내는 태그
<thead>: 제목 행을 그룹화하는 태그
<tbody>: 본문 행을 그룹화하는 태그
<tfoot>: 바닥 행을 그룹화하는 태그
  *주의
  <tfoot>이 <tbody> 뒤에 위치해야 해야함
  <tfoot>의 위치가 <tbody> 앞에 나올 경우 웹 접근성의 키보드의 초점 이동 순서 항목에 문제가 있기 때문에 변경 (html 5.1버전)
<colspan> : 셀을 가로방향으로 병합
<rowspan> : 셀을 세로방향으로 병합
Specification values
grade. point. strength. percent.
kg/mm lb/in
Hard 0.45 56.2 80,000 20
Medium 0.45 49.2 70,000 25
Soft 0.45 42.2 60,000 30 
<colgroup> : 테이블에서 서식 지정을 위해 하나 이상의 열을 그룹으로 묶을 때 사용
   <table> 요소의 자식 요소
   모든 <caption> 요소보다 뒤에 위치
   모든 <thead>, <tbody>, <tfoot>, <tr> 요소보다는 앞에 위치
     -<span> :  <colgroup> 요소로 합쳐질 열(column)의 개수를 명시 (html5에서 이것만 사용가능)
     문법 : <colgroup span="숫자">
<col> : <colgroup> 요소에 속하는 각 열(column)의 속성을 정의할 때 사용 각 행(row)이나 셀(cell)의 스타일을 반복하지 않고, 열(column)마다 각각 다른 스타일을 적용하고 싶을 때
<colgroup>
        <col style="background-color: lightgreen">
        <col span="2" style="background-color: yellow">
    </colgroup>

코드 : http://www.tcpschool.com/html-tags/col

scope 속성 -> 나중에 정리해보자 
header 속성 -> 나중에정리해보자

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

폼

input 대표적인 폼 요소

  1. type ="text"
    -placeholder : 사용자가 입력하기 전 미리 화면에 노출하는 값으로, 입력하는 값의 양식을 표현
<input type="text" placeholder="ㅇㅇㅇ">
  1. type="password"
    암호와 같이 공개할 수 없는 내용을 입력할 때 사용합니다.
    화면에는 type="text"와 같게 나타나지만 실제로 입력할 때 값을 노출x
<input type="password">
  1. type="radio"
    라디오 버튼은 중복 선택이 불가능하며 하나의 항목만을 선택
<input type="radio" name="gender"> 남자
<input type="radio" name="gender"> 여자
  1. type="checkbox"
    checked : 속성값이 없음, 속성 존재하면 true 없으면 false
    체크박스는 중복 선택이 가능
<input type="checkbox" name="hobby"> 등산
<input type="checkbox" name="hobby"> 독서
<input type="checkbox" name="hobby"> 운동
  1. type="file"
    파일을 서버에 올릴 때 사용
<input type="file">
  1. type="submit|reset|image|button"
    클릭 가능한 버튼 만듬
<form action="./test.html">
    메시지: <input type="text" name="message"><br>
    <input type="submit"> <!-- 폼 값을 전송 -->
    <input type="reset"> <!-- 폼 값을 초기화 -->
    <input type="image" src="http://placehold.it/50x50?text=click" alt="click" width="50" height="50">
  <!-- 이미지삽입 -->
    <input type="button" value="버튼"> 
  <!-- 아무기능없는 그냥 버튼 --> <!-- value 버튼 이름 변경 --> 
</form>

submit : form의 값을 전송하는 버튼
reset : form의 값을 초기화하는 버튼
image : 이미지를 삽입할 수 있는 버튼 (submit과 동작이 동일함 값 전송)
이미지 버튼은 이미지 관련 속성인 src, alt 속성이 반드시 필요하며 width/height 속성을 적용
button : 아무 기능이 없는 버튼 (개발자가 기능 커스텀할때 사용)

  1. select
    (선택 목록 상자 또는 콤보박스 multiple 속성을 사용하면 다중 선택도 가능)
    -option 태그 이용
<select>
    <option>서울</option>
    <option>경기</option>
    <option>강원</option>
    ...
</select>
  1. textarea (여러 줄의 텍스트를 입력)
    -cols : 가로 크기 (글자수 영문기준)
    -rows : 세로 크기 (줄수)
<textarea rows="5" cols="30">
    ...
</textarea>

button

 버튼 만들때 사용 (input에서는 빈태그였고 지금은 빈태그 아님)
 속성종류
 -submit
 -reset
 -button
 
<button type="submit|reset|button">value = "" </button>

label

<label for="userid">아이디:</label> <input type="text" placeholder="영문으로만 써주세요" id="userid"><br>
<label for="nickname">이름: </label> <input type="text" id="nickname"><br>
<label for="address">이름: </label> <input type="text" id="address"><br>
     <!-- for 뒤 와 id 같아야함! -->
     <!-- input 타입 하나당 하나의label 이용 -->

fieldset legend

 fieldset : 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용
 -legend : 폼 요소의 제목으로 fieldset 내부에 작성
 (legend는 fieldset의 자식으로 반드시 최상단에 위치해야 합니다.)
<filedset>
  <legend> 기본 정보 </legend>
  <label for="userid">아이디:</label> <input type="text" placeholder="영문으로만 써주세요" id="userid"><br>
  </filedset>

form

 form 요소들을 감싸는 태그로 데이터를 묶어서 실제 서버로 전송해주는 역할 
 fieldset으로 구조화되어있다면 fieldset도 함께 감싸는 역할
 -action: 데이터를 처리하기 위한 서버의 주소
 -method: 데이터를 전송하는 방식을 지정
<boby>
  <form action = "/result.html" method = "get">   
   아이디 : <input type="text" name="id"><br>
   비번 : <input type="password" name="pw">
    <input type="submit">
  </form>
</boby>
 method 속성값에는 get/post 
 get데이터가 전송될 때 주소창에 파라미터 형태로 붙어 데이터가 노출
 post 방식은 데이터가 전송될 때 데이터가 노출x (비밀번호같은건이걸로)

콘텐츠모델

이런 규칙에 대해 비슷한 성격의 요소들끼리 그룹화한 것

Content Models 의 7 분류
1.Metadata Content
" base,link, meta, noscript, script, style, title "
콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들이 포함
대부분 head내에 들어간다는 것이 특징
2.Flow Content
문서의 자연스러운 흐름에 의해 배치되는 요소
Metadata에 해당하는 일부 태그들만 Flow에서 제외되며 요소 대부분이 Flow에 포함
3.Sectioning Content
" article, aside, nav, section "
문서의 구조, 아웃라인에 영향
4.Heading Content
" h1, h2, h3, h4, h5, h6 "
5.Phrasing Content
문서의 텍스트 또는 텍스트를 꾸며주는 문단 내부 레벨로 사용되는 요소
6.Embedded Content
" audio,canvas,embed,iframe,img,math,object,svg,video "
외부 콘텐츠를 표현하는 요소들이 포함되며 오디오나 비디오, 이미지 등 멀티미디어 관련 요소
7.Interacitve Content
" a, audio[controls], button, details, embed, iframe, img[usemap], input, keygen, label, menu,
object[usemap], select, textarea, video[controls] "
사용자와 상호작용을 하는 요소들이 포함되며 대표적으로 form 요소들

관련 링크 https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html

HTML5에서 새로 생긴 시멘틱 요소들

<article>
<aside>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<time>

관련 링크 https://developer.mozilla.org/en-US/docs/Glossary/Semantics

시멘틱 마크업

POSH(Plain Old Semantic HTML)이란?
평범하고 오래된 의미론적인 HTML
시멘틱 : 기계가 잘 이해할 수 있도록 하는것

시멘틱 마크업 하기
-> 마크업할때 의미에 맞는 태그,요소를 사용하는것
문서를 표현할때는 구조화를 잘해주는것.

block level inline level

block level

부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소입니다.
박스의 위아래로 줄 바꿈
블록 레벨 요소는 일반적인 모든 요소(블록, 인라인 레벨 등)를 포함
주로 div/p/h

inline level

하나의 라인 안에서 자신의 내용만큼의 박스를 만드는 요소
줄바꿈 x
주로 span/a
인라인 레벨 요소는 블록 레벨 요소의 자식으로 분류되기 때문에 자손으로 블록 레벨 요소를 가질 수 없습니다.
<예외> html5 -> a 는 자손으로 블랙레벨 요소 가지는거 가능

profile
네모
이전 포스트

깃,깃허브 배우기

다음 포스트

2주차 CSS(1)

0개의 댓글