참고 강의: 부스트코스 비전공자를 위한 html
html 이해하기
html; hyper text markup language
Hyper text: link
Markup language: programming language
History of html: invented in 90s by british physicist
Html 문법
Tag: html의 가장 기본이 되는 규칙, 태그는 이름표라는 의미가 있고 html에서도 비슷하게 사용됨.
태그 사용법:
-태그는 <,> 기호로 표현되고 기호 사이에 태그 네임이 들어감
-대부분의 태그는 시작 태그와 종료 태그로 이루어지며 종료태그는 태그 이름 앞에 / 기호가 붙음
요소란? 내용을 포함한 태그 전체를 요소(element)라고 함.
태그 tag: 꼬리표, 이름표,
<,> 수학의 부등호 기호/코딩에서는 꺽쇄라고 불림/ 영어로는 greater than, less than/
요소와 태그는 많이 혼용됨.
속성 Atribute
속성: 태그에 추가 정보를 제공하거나 표현을 제어할 수 있는 설정값
속성의 종류:
-(모든 태그에 사용할 수 있는) 글로벌 속성 vs 특정 태그에서만 사용할 수 있는 속성
-선택적으로 쓸 수 있는 속성 vs 특정 태그에서 필요한 필수 속성
태그의 중첩
태그는 중첩이 가능함. 태그 안에 다른 태그 선언이 가능
안에 선언되는 태그는 반드시 부모 태그를 벗어나지 않아야함
빈 태그 (empty tag)
태그 중에서는 시작 태그만 존재하고 종료태그가 존재하지 않는 태그도 있음.
이러한 태그에는 종료 태그가 존재하지 않기 때문에 내용이 들어갈수가 없음(내용은 종료태그와 시작 태그 사이에 들어가는거니까 종료 태그 존재 안하면 못들어감), 따라서 이런 태그는 내용이 비어있어서 종료 태그라고 불림.
빈태그는 내용만 없을 뿐이지 속성등으로 사용됨.
가장 대표적인 케이스: 브라우저가 나 대신 화면에 그려줘야 하는 경우 like 웹문서에 텍스트가 아닌 이미지, 비디오 같은 외부 리소스 삽입 경우
이미지를 삽입하기 위해서는 이미지 리소스가 필요 또한 브라우저가 그 위치도 알고 있어야함. 그래서 우리는 이미지를 직접 그릴수 없으니 브라우저에게 이미지의 경로만 전달해줄 뿐임.
scr 속성: 이미지 리소스의 경로 전달을 가능케함
이런 태그 (ex img scr=)들은 브라우저가 내용을 대체 한다고 해서 replacement tag라고 불림
그러나 화면에 출력이 안되고 내부적으로 부가정보를 제공하는 태그도 존재
공백 space
Html은 2칸 이상의 공백 그리고 줄바꿈은 모두 무시
주석(comment tags)
-화면에 노출되지 않고 메모의 기능만 하는 것
-실사용자들을 위한 것이 아닌 개발자들을 위한 기능
-협업할때 남들을 위해서 혹은 나 자신을 위해서
-when? 테스트나 임시방편 코드
-주석은 아무대나 남길 수 있음
-주석은 심지어 개행도 무시함
Html 문서 구조 (html documents)
Html 문서는 기본적으로 가지고 있어야 하는 기본구조가 있음. 몇 가지 태그가 기본적으로 선언(declaration).
#가장 기본적인 html 형식
-head tag에 위치하는 태그들은 브라우저 화면에 표시되지 않음. 문서 기본정보 설정, 외부 스타일 시트 파일에 연결하는 역할
-body tag에 위치하는 태그들은 실제로 문서 안에 들어가는 태그, 배울때 가장 자주 사용될 태그, 실제로 문서에 노출되는 내용
위 이미지가 문서를 작성할때 최소한으로 들어가야하는 기본 태그들
————————————————————
html의 확장자: .html
*확장자(file name extension)란? 파일 종류를 구분하기 위해서 파일명의 마침표 뒤에 붙이는 문자. ex) ‘aaa.hwp’에서 hwp,
‘result.pic’ >> pic
‘result.txt’ >> txt. 같은 result라도 하나는 그림이고 하나는 텍스트임을 알 수 있음
*파일이란? 형식이 같은 컴퓨터 데이터를 모아놓은 단위
————————————————————
— <!DOCTYPE> :Html documents must start with a this declaration.
In html 5, the delaration is
— tag: this tag represents the root of an html document also its a containter for all other html elements.
You should always include the lang(to declare the language of the web page) atrribute inside the html tag
— tag: this is a container for metadate(metadate is not displayed, like document title, character set, styles etc) and is placed beteen the tag and the tag.
*elements that can go inside the ;
— tag: definesmetadata about an html document. Metadata is data about data.
메타는 내용이 없는 빈태그
html 태그
-Html=태그들의 집합
-Html이 버전업 되면서 태그들이 새로 생기고 사라짐.
-태그는 백여개가 넘음.
-그러나 평균적으로 20-25개의 태그가 사용됨
-자주 사용되는 태그들만 공부하고 아닌 것들은 매번 찾아서 보면됨.
-첨부된 사이트 보면서 공부하기
제목과 단락 요소
-마크업[markup]; 문서 처리를 지원하기 위해 문서에 추가되는 정보
-제목
heading tag; h는 heading의 줄임말, h1 is the biggest,h6 is the samest
-단락 paragraph
SOL br은 linebreak 글자를 개행해주는 태그
-p 내부에서 강제로 개행을 하려면 br 태그를 사용해야함
텍스트를 꾸며주는 요소
텍스트 관련 태그
-: bold
-; italic typeface
-: underline
-:글자에 중간선을 표현
시멘틱 마크업; 브라우저가 잘 이해할 수 있는 코드
시멘틱: 의미론적인
보이는 것은 정확히 같지만 브라우저에게는 다르게 보임.
하나는 그냥 굵은 글씨지만 다른 것은 진짜 중요한 의미라고 파악
중요한 글씨를 굵게 표현하고자 하면 b보다는 strong을 사용하는 것이 더 시맨틱한 마크업이라 할수 있음
앵커[anchor]; 링크를 생성하는 태그
*참조 사이트에서 새로 생긴 속성 위주로 체크
-Hypertext=link
-a; 에이 태그, 앵커 태그, 링크 태크
-링크를 만들기 위해서 link는 반드시 한개의 속성을 가지고 있어야함. 그것은 바로 href(하이퍼 텍스트 레퍼런스)
-href의 값은 링크의 목적지가 되는 url이 들어감.
———target 속성: 링크된 리소스를 어디에 표시할지 나타냄.
-target 안에 Self 속성은 우리가 보고 있는 화면 자체를 외부 링크 페이지로 이동한다. 타겟 속성을 명시하지않으면 기본적으로 셀프와 같이 동작한단 뜻. 네이버에 밑줄 쳐져있는 파란색깔글자들을 누르면 우리가 보고 있던 화면 자체가 네이버 링크 홈페이지로 이동하는 것과 같은 원리. 그것이 바로 셀프
-target안에 blank; blank는 셀프와는 정반대, 새로운 창 즉 빈창에 외부 페이지가 나타나는 것.
———앵커 태그 내부 링크; 보통 긴 화면에서 화면 매위로 올리는 기능 즉 책갈피 기능에서 쓰임.
-http 대신 # 기호가 쓰임. 나머지 부분(www.naverdsfwd)에는 대신 id를 넣음 like.
-id는 본인이 원하는 부분에서 가서 원하는 대로 이름 붙여서 생성하면 됨.
의미가 없는 컨테이너 요소;
-태그중엔 의미가 없는 태그도 존재함.
-태그 자체에는 의미가 없고 무언가를 담거나 묶기위해서만 존재하는 태그
-스타일을 주기 위해서, 서버에서 보내는 데이터를 담기 위해서 사용됨.
-의미 없는 태그들이 사용빈도가 의미있는 태그들보다 높은편
-html의 탄생 자체가 문서를 웹에 나타내기 위한 용도라, 태그들은 문서에 최적화된 의미를 가짐. 그러나 현재 웹은 문서 형태에서 많이 벗어남.
div; division의 줄임말. 블록 레벨 태그 block level
span; 인라인 태그 inline level
블록 레벨: 모니터를 꽉 채워서 한줄 가득 표현됨; p
인라인 레벨 요소: 라인안에 더 조그마한 조각형태로 표현, 따라서 블록 레벨 요소안에 자주 들어감; b,i,u,s
리스트 요소
리스트; 일련된 항목들이 나열된 것
-요즘 웹사이트에는 리스트로 표현될만한 것들 많음
-
ul; unordered list 순서가 없는 리스트
예) 콩나물국 재료
li 리스트 태그
ul<li>가나 초콜릿</li> <li>닥터페퍼</li> <li>페퍼로니 피자</li>/ul
구현. 가나 초콜릿
닥터페퍼
*페퍼로니 피자 -
- ordered list 순서가 있는 리스트
나열된 항목들이 순서와 관련이 있을 때
예) 콩나물국 레시피
- 물을 넣고 끓인다
- 콩나물을 넣는다
- 뚜껑을 열고 김을 식힌다
순서가 있는 리스트라 앞에 숫자로 표현이 되어있음
구현. 1.물을 넣고 끓인다
2. 콩나물을 넣는다
3. 뚜껑을 열고 김을 식힌다ol 부모태그, li 자식태그
-ol 태그는 자식 태그로 li만을 가질 수 있음
-li 태그는 부모 태그로 ol,ul만을 가질 수 있음
-li 태그에는 자식 태그로 div,p도 들어와서 중첩가능3.dl description list
dt definition term
dd defintion description
dt 에는 용어가
dd에는 정의 혹은 설명이 들어감
예)
dl<dt>리플리 증후군</dt> <dd>허구의 세계를 진실이라 믿는</dd> <dd>그런 증후군</dd> <dt>피그말리온 효과</dt> <dd>타인의 관심으로 결과잘나옴</dd>/dl
-하나의 dt에 dd 한개 이상이 붙을 수도 있음.
-태그 중첩 가능.
-용어 하나의 여러개의 정의가 들어갈 수도 있음
-월드컵 리스트 직접 작성해보기이미지 요소.
-scr: 이미지의 경로를 지정한다.
-alt: 이미지의 대체 텍스트(이미지를 설명하는 글)를 입력한다.
-wight/height: 이미지의 크기를 지정한다.
이미지는 주로 css를 통해서 표현된다. 왜냐하면 이미지의 크기는 스크린의 크기에 따라 작아지거나 커지니까, 그러나 만약 이미지의 크기가 고정적이라면 wight ,height의 속성을 쓰는게 성능적인 면에서 더 좋다.
Width 속성뒤에 따로 단위 안써도 혼자서 기본 단위로 인식잘함.
width 속성을 이용해 이미지의 가로 크기를 줄임> 근데 새로 크기까지 같이 줄어듦.
Height 속성을 줄여도 가로 이미지까지 같이 줄어듦.width/height 중 하나를 줄이면 다른 하나도 알아서 원본 이미지의 비율을 유지한 상태로 같이 줄어듦
만약, width와 height 두가지 속성을 모두 입력한다면 이미지 비율이 자동으로 맞춰지지 않아 스스로 설정한대로 왜곡됨.-이미지 경로
상대경로-현재 웹문서의페이지를 기준으로 상대적으로 이미지의 페이지를 나타냄-같은 이미지를 삽입하더라도 불러오는 페이지의 주소에 따라 이미지 주소가 달라짐.-이미지 확장자 포멧
Gif: -색이 (256색으로) 제한적, 용량 작음, 애니메이션(움짤) 지원-움짤 해상도가 낮은 이유가 색이 256색으로 제한되어있어서임, 투명 이미지 가능
Jpg: 전통적으로 웹에서 제일 많이 사용, 자연스런 색표현, 높은 압축률, 사진이나 그림에 사용
Png; 이미지 손실이 없고 투명, 반투명 모두 지원\테이블 요소
-table:데이터 표를 나타내는 태그
-표의 요소:
표의 한칸한칸을 셀이라고 부름.
표의 가로 방향을 행(row)
표의 세로 방향을 열(column)이라고 읽습니다.
-셀을 표현하는 태그
td,th 데이터셀(table-cell)
tr 행(table-row)
table 표
caption tag표는 가로로 그린다고 생각해야함.
tr —2nd
td,/td x4. —1st. 가로에 셀이 4개가 있음
/tr —2nd. 하나의 행을 표현하는 tr 태그로 감싸
=마지막으로 테이블 태그로 감싸주면 일행 사열짜리 테이블 완성, 이걸 네번 반복해주면 표 그림 완성.—표의 구조 관련 태그들
-caption tag: 표의 제목, table tag의 자식으로 가장 위에 선언이 되어야함
-thead: 제목 태그, 표의 제목이 들어가는 부분/제목 셸을 나타낼 때는 td가 아닌 th를 사용/ td태그보다 th 태그가 조금 더 굵게 표현됨.
-tfoot: 화면 가장 마지막에 노출되는 코드
-tbody; 화면 중간에 노출되는 코드-colspan 속성: 셀을 가로 방향으로 병합
-rowspan 속성: 셀을 세로방향으로 병합
ex)
속성 값에는 병합할 셀의 갯수를 적으면 됨실습
-colgroup; table에서 서식 지정을 위해 하나 이상의 열을 그룹으로 묶을때 사용/ 각 행이나 셸의 스타일을 반복하지 않고, 열(column)전체에 다른 스타일을 적용하고 싶을 때 유용
-cop 하나의 행에 대한 그룹
-scpoe 속성; 열의 제목이나 행 제목 셀에 정의.
header; 화면 가장 상단바에 위치하여 소개나 탐색을 돕는 것의 그룹 (로고, 메뉴)폼요소
폼 관련 요소 form; 서버에 데이터를 전달하기 위한 요소들
인풋 파일 타입은 내 컴퓨터에 잇는 파일들을 서버에 올릴때 사용됨.
버튼이 생김
-input type=“submit”
-input type=“reset”
버튼만 그냥 하나 생김-select 요소; 선택지 몇개를 노출 시키고 그중에 하나를 선택하게 하는 요소
-label 요소; 폼요소와 연결해 주기 위해 사용됨. 웹접근성 향상에 도움됨으로 필수적이와 같이 레이블 포 뒤에 나오는 거랑 아이디 뒤에 나오는 걸 똑같이 선언해줘야함
이렇게 매칭을 시키면 뭘클릭해도 연결된 것처럼 되어서 다른게 클릭됨.
폼요소를 구조화하기 위해 필요한 태그들
—fieldset; 폼요소를 그룹화하는 태그
Ex) 필수 개인정보/추가정보
—legend; fieldset태그로 묶인 그룹의 이름을 지정해주는 태그/ 이 태그가 쓰일때는 fieldset의 가장먼저 자식으로 선언되어야함.—form 요소; 지금까지 배운 품 요소들을 가장 크게 감싸주는 태그,폼 데이터를 그룹화(묶어서) 서버에 전송
-action: 폼데이터를 처리하기 위한 서버의 주소
-method: 데이터를 전송하는 방식을 지정(get, post), 값을 전송할때 어떤 속성으로 전송할지를 알려줌. 겟이나 포스트중에 하나를 선택해서. 겟으로 전송하면 주소창에 내가 입력한 정보가 뜸. 따라서 민감한 정보를 다루는 곳에선 겟을 사용하면 안됨.3-1. 복사 붙여넣기 해서 써
3-4. 블록&인라인
블록 요소: 한줄의 하나의 요소 표시<div><p>,<h> 인라인 요소:한줄의 여러개의 요소 표시 <span>,<a>html에서는 블록 요소가 인라인 요소의자손으로 들어가는 것을 허용하지 않음.
다만, 인라인 요소인 a 요소는 유일한 예외로 어떠한 블록 레벨 요소도 자손으로 가질수 있음
