html 기초 공부 내용 모음

 

속성 : 하나의 태그에 여러 개의 속성 가능

 

공백으로 구분, id=”” class=””

속성들의 순서는 상관없다

 

<태그 중첩>

안에 선언된 태그는 부모 태그를 벗어나면 안된다.

<h1><i></i></h1> 이런 느낌.

 

빈태그 : 시작태그만 존재하고 종료태그 존재하지 않음 > 내용이 존재하지 않음

 

브라우저가 이미지나 비디오처럼 외부 리소스를 삽입할 때

-      <img src=””> 이런 식으로 내용이 없지만 경로를 제시하여 화면에 보이도록

 

주석 : <! - - (내용) - - >

 

Html 구조

Doctype : 어떤 버전으로 작성으로 되어있는지 선언하는거(최상단)

Lang 속성 : 언어 코드

Head : 문서의 기본 설정 등

Meta : 해당 문서에 대한 정보인 메타데이터를 정의할 때 사용

Title : 브라우저 탭 바에 나오는 제목

 

Body : 브라우저 화면에 출력

Head : 문서 내에 제목을 표현할 때 사용

-      H1~h6

 

P : 글의 단락을 나타낸다

Br : 글의 줄바꿈을 생성한다.

 

택스트 관련 태그들

B : 글자를 굵게 표현한다.

I : 글자를 이탤릭체로 표현한다

U : 글자에 밑줄을 표현한다

S : 글자에 중간선을 표현한다.

 

a : 다른 문서로 이동할 수 있는 링크를 생성한다.

 

Href : 링크의 목적지가 되는 url을 지정한다.

내부링크는 <a href=’#(id)’> : 내부에 해당 id로 연결(이동)하는 태그,마치 책갈피같이

 

Target

-      (_self) : target을 설정하지 않으면 기본적으로 이렇게 설정됨

-      (_blank) : 새로운 탭으로 열어서 연결

 

아무 의미 없는 태그 : 어떤 요소들을 묶기 위한 목적

-      Div : 블록 레벨

-      Span : 인라인 레벨

리스트로 표현

-      Ul : 순서가 없는 리스트(unordered)

-      Ol : 순서가 있는 리스트(ordered)

dl : 용어를 설명하는 리스트(description list)

-<dt> : 용어를 구분한다. (definition term_

-<dd> : 용어의 정의를 나타낸다.(definition description)

 

이미지 넣기

-      <img src=””>

-      닫는 태그가 없음

-       

Src : 이미지 경로를 지정한다.

-      상대경로와 절대경로 존재

-      현재 웹문서의 기준으로 찾는 게 상대경로

-       ./ 현재 페이지,  ../ 상위폴더로 이동

-      절대경로는 어디에 있든 사용가능하도록

-       

Alt : 이미지의 대체 텍스트를 입력한다, > 이미지를 설명하는 글

 

Width/ height : 이미지의 크기를 지정한다. > optional, 하나가 조절되면 나머지 비율에 맞게 자동 조절

 

사진 확장자의 차이

Gif : 256색을 제한적, 용량이 작음, 애니메이션과 투명 이미지 가능

Jpg : 높은 압축률과 자연스러운 색상표현이 가능하여 사진이나 일반적인 그림에 사용

Png : jpg와 비교했을 때, 이미지 손실이 없고 투명과 반투명 모두 지원한다.

 

 

 

표(table) : 데이터 표를 나타내는 태그

<td>,<th> : 데이터 셀, th는 제목행을 나타낼 때

<tr> : 행

<table> : 표

 

테이블 구조 관련 태그

<caption>: 표의 제목, table 태그에 가장 위에 선언되어야 함

<thead> : 제목 행을 그룹

<tfoot> : 바닥행을 그룹(합계 등) > 가장 밑에 노출이 됨.

<tbody>: 본문 행을 그룹

 

셀의 병합

Colspan : 셀을  가로방향으로 병합

Rowspan : 셀을 세로방향으로 병합

 

폼 관련 요소(FORM)

서버에 데이터를 전달하기 위한 요소들

Input 요소

-      대표적인 폼 요소로, 다양한 type 속성으로 여러 종류의 입력 양식으로 나타난다.

-      Checked 는 이미 체크되게끔(초기값)

-      Text, placeholder : 가이드 해주는거(로그인할 때 회색으로 보이는 거)

-      Password : 별표시

-      Radio : 상호베타적인 버튼, name 을 설정해줘야함.

-      File : 파일을 등록할 때

-      Image : submit과 동일하지만, src, alt가 들어가야함.

-      Submit(제출), value를 지정해서 이름 지정가능

-      Reset(초기화), value 지정으로 이름 변경가능

-      Button : 개발자가 커스텀해야함.

 

Select 요소 : 선택 목록상자(콤보박스)

-      <option>태그를 이용한다.

-      Selected : 유사 checked

Textarea 요소 : 여러 줄 텍스트 입력상자

-      속성 cols, rows

Button 요소 : 사용자가 클릭 가능한 버튼 (닫는 태그 있음)

-      input과의 차이점 : 스타일적인 측면에서 더 자유로운 표현이 가능함.

Label 요소 : 폼 컨트롤과 연결 시켜주기 위함으로 웹 접근성 향상에 도움이 됨

-      <label></label> id=””와 for=””를 연결시켜준다.

Filedser 요소 :여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용

<legend> : 폼 요소의 제목으로 <fieldset> 요소 내부에 작성 (fieldset 의 자식)

 

Form 요소 : 폼 데이터를 그룹화하여 서버에 전송(분리?)

Action : 폼 데이터를 처리하기 위한 서버의 주소

Method : 데이터를 전송하는 방식을 지정(get, post)

-      Get : 민감한 정보 ㄴㄴ, url 창에 나옴

-      Post는 민감한 정보, url 창에 안나옴.

-       

컨텐츠 모델

Metadata : 콘텐츠의 style(표현), script(동작)을 설정하거나 다른 문서와의 관계 등의 정보를 포함하는 요소

-      Base, link, meta, noscript, script, style, title >> head 태그에 들어감

Flow : 문서에 사용되는 대부분의 요소

Sectioning 헤딩과 푸터의 범위를 결정하는 요소, 아웃라인이 있음, 문서의 구조

-      Article,aside, nav, section

Heading

Phrasing : 문서의 텍스트이며 문단 내부 레벨로 마크업 하는 요소

Embedded : 이미지, 비디오, 플래시 등 외부 콘텐츠를 문서 내에 표현하는 요소

Interactive : 사용자와 상호작용을 하는 요소

 

시멘틱 마크업 : 시멘틱은 ‘의미론적인’ 의 의미

-      컴퓨터(브라우저)가 잘 이해할 수 있는 코드

-      의미에 맞는 요소를 사용

-      문서의 구조화

-      인간과 기계가 모두 이해할 수 있는 것이 목표

-      예시 : <b>와 <strong>은 출력은 똑같으나 의미가 다름.

 

블록, 인라인 레벨

Block level 요소 : 한줄에 하나의 요소 표시

-      일반적인 모든 요소 포함하며, div, h1-h6, p, ul, li, table 등

Inline level 요소 : 한 줄에 여러 개의 요소 표시

-      Block 레벨의 자식요소이며, span, img, em, strong 등

*블록 레벨 요소가 인라인 레벨 요소의 자손으로 들어가는 것을 허용하지 않음.

- <span><p></p></span> 는 불가능함.