[HTML] 기초

suyeon·2022년 5월 31일
html
0

Frontend

목록 보기
2/19
post-thumbnail

💫 HTML

  • Hyper Text Markup Language
  • 하이퍼텍스트 마크업 언어
  • 프로그래밍 언어가 아닌 표현 언어이다.
  • Hyper Text : 링크(Link)
  • Markup Language : 태그(Tag)를 사용해서 문법을 표기하는 언어
    - 마크업을 사용하는 언어 : SGML, HTML, XHTML, XML, VoiceML, **ML,
  • HTML 주관단체 : W3C, World Wide Web Consortium
  • HTML 1.0 ~ HTML5
  • HTML 4.01 : 가장 대중화된 버전(웹 가장 활성화)
  • XHTML 1.0 : XML + HTML > 문법 강력하게 준수
  • HTML5 : 2014년 10월

💭 브라우저 전쟁

💫 HTML 구성 요소

1. 태그(Tag)와 요소(Element)

  • 태그는 HTML 페이지에서 객체를 만들 때 사용하는 것
  • 태그를 사용해 만들어진 객체를 요소라고 부른다.
  • HTML 문서의 뼈대를 만드는 역할

1.1 태그 표현 방식

  • <태그명> 내용물 영역 </태그명>
  • 쌍태그
  • <태그명> : 시작태그
  • </태그명> : 끝태그
  • 영역을 가지는 태그
  • <태그명>, </태그명/>, <태그명></태그명>
  • 단독태그, 빈태그(Empty Tag)
  • 영역을 가지지 않는 태그

2. 속성(Attribute)

  • 태그의 성질을 정의하는 요소
  • 태그에 추가 정보를 부여할 때는 속성을 사용한다.

2.1 표기법

  • <시작태그 속성명="값"></끝태그>
  • <시작태그 속성명="값" 속성명="값" 속성명="값"></끝태그> : 속성이 여러개 일 때(스페이스로 구분)
  • <단독태그 속성명="값">

2.2 유형

  1. 숫자(단위 없음)
    a. 픽셀(px)> 화소 > 화상(이미지)을 구성하는 최소 단위 > 단일 색상을 가지는 점 1개
    b. 글자수
  2. 숫자(단위: %)
    - 100%의 기준이 누구인지?
    - 부모 태그 영역(body, html)을 100으로 하는 상대 단위
  3. 열거형
    - 정해져있는 속성값 중 하나 선택 사용
  4. 색상
    - 색상명, RGB
  5. 플래그형(boolean)
    - 속성명 기재(no), 미기재(off)
  6. 문자열
    - 자유롭게 기재
  7. URL
    - 상대경로, 절대경로, 외부경로

3. 텍스트(PCDATA)

  • 화면에 출력하는 데이터
  • Parsed Character Data : 브라우저가 해석하는 영역의 문자열

4. 엔티티(Entity)

  • 브라우저와 정해진 약속이 되어있는 표현
  • 약속된 표현을 작성하면 브라우저가 약속된 출력으로 바꿔서 출력한다.

4.1 &엔티티명; (Built - in Entity)

&#nbsp;	공백 1개
&lt;	'<' 표현
&gt;	'>' 표현 
&amp;	'&' 표현
&qout;	"(쌍 따옴표)
&apos;	'(호 따옴표)
&copy;	Copyright 표현
&#문자코드;	문자코드 표현

5. 주석(Comment)

<!-- 주석 -->

6. 선언문(Declaration)

- HTML 선언

💫 HTML 파일 구조

  1. 문서 유형(선언문)
    • 이 문서를 읽는 브라우저에게 '해당 문서가 어떤 문서다'라고 알려주는 역할
    • 현재 사용 중인 HTML5로 작성된 문서
    • DTD 언어(Document Type Definition)
  2. <html>
    • 문서의 모든 코드를 감싸는 역할
    • Root Tag
    • lang : 웹 페이지 언어를 설정하는 속성
  3. <head>
    • 브라우저에게 전달할 내용을 작성
    • 브라우저에 표시되지 않는다.
    • 내부 정보
    • head 태그 내부에는 표에 있는 태그만 입력할 수 있다.
      태그 이름설명
      meta웹 페이지에 추가 정보를 전달
      title웹 페이지의 제목
      script웹 페이지에 스크립트를 추가
      link웹 페이지에 다른 파일을 추가
      style웹 페이지에 스타일시트를 추가
      base웹 페이지의 기본 경로를 추가
  1. 문자 인코딩 방식을 UTF-8로 지정
  2. 웹 페이지 제목 지정
    • 여기에 설정한 제목이 브라우저 상단이나 즐겨찾기에 등록했을 때, 검색했을 때 페이지 제목으로 표시된다.
  3. 페이지 설명 기록
  4. <body>
    • 브라우저에 출력될 내용을 작성
    • 사용자에게 보이는 실제 부분
    • 출력 정보

💭 HTML 문서 구조 : 태그의 트리구조(계층구조)로 되어있다.

💫 <body> 태그

1. 글자 태그

제목

  • <h#> 태그
  • heading
  • # : 1 ~ 6
  • <h1>: 페이지에서 가장 중요한 제목
    ...
    <h6> : 페이지에서 가장 덜 중요한 제목
  • 눈에 보이는 크기가 중요한게 아님(★★★)
<h1>Heading 1</h1>

본문

  1. <p> 태그
    • paragraph
    • 텍스트 집합
    • p.align 속성 |
      - horizontal alignment : 수평 정렬
      - 내용물의 수평 정렬
      - 열거형 : left | center | right | justify(양쪽정렬)
<p>Lorem ipsum dolor sit amet.</p>
  1. <br>태그
    • 줄바꿈
    • 단독태그
<br>
  1. <hr>태그
    • 수평 줄
    • 단독태그
    • 속성 |
      • size : 선의 두께
      • width : 선의 너비(픽셀-절대크기, %-상대크기)
        * 절대(규격이 정해져 있음) / 상대(기준이 되는 시스템 설정 값에 따라 달라짐)
      • align : 수평 정렬
      • color : 선의 색상
      • noshade : 그림자 유무
      • title : 풍선 도움말(tooltip, hover text)
<hr>

💭 웹 문서에는 탭의 개념이 없다.
💭 모든 태그는 용도에 맞는 태그를 사용해야 한다. (시멘틱 웹, Semantic Web)

앵커

  • <a>태그
  • anchor, link
  • 서로 다른 웹 페이지 사이를 이동하거나 웹 페이지 내부에서 특정한 위치로 이동할 때 사용
  • 하이퍼링크
  • 속성
    • href : 클릭시 이동 할 링크
    • target : 링크를 여는 방법
      • _self : 현재 페이지 (기본값)
      • _blank : 새 탭
      • _parent : 부모 페이지로, iframe 등이 사용된 환경에서 쓰인다
      • _top : 최상위 페이지로, iframe 등이 사용된 환경에서 쓰인다.
      • 프레임이름 : 직접 프레임이름을 명시해서 사용할 수도 있다.

💭 _self 내부 링크, _blank 외부 링크에 잘 사용한다.

<a href="http://www.naver.com">Go NAVER</a>

<!-- 빈 링크 -->
<a href="#">언론사 전체보기</a>

<!-- 페이지 내부 이동 -->
<a href="alpha">Move to Alpha</a>
<h1 id="alpha">Alpha</h1>
<p>Lorem ipsum dolor sit amet.</p>

글자 형태

  • 물리적인 모양을 지정하는 태그

    태그 이름설명
    b굵은 글자
    i기울어진 글자
    small작은 글자
    sub아래에 달라 붙는 글자
    sup위에 달라 붙는 글자
    u밑줄 글자
    strike가운데 줄이 그어진 글자
    big큰 글자
    tt타자기 글자

  • 의미 자체를 중시하는 태그(시멘틱 웹)

    태그 이름설명
    strong강한 강조
    em강조
    mark강조
    q짧은 인용
    cite작품 제목
    blockquote인용문
    code개발 코드
    del삭제된 내용
    ins추가된 내용
    address주소

2. 목록 태그

기본 목록

  • 순서가 있는 목록
    - <ol> + <li>
    - Ordered List
    - List Item

  • 순서가 없는 목록
    - <ul> + <li>
    - Unordered List
    - List Item

  • 정의 목록
    - <dl> + <dt> + <dd>
    - Definition List
    - Definition Term
    - Definition Description

3. 테이블 태그

<body>
	<table>
    
    </table>
 </body>
  • tr : 표 내부의 행 태그, table row
  • th : 행 내부의 제목 셀 태그, table header
  • td : 행 내부의 일반 셀 태그, table data

  • 속성 |
    border : 표의 테두리 두께를 지정
    rowspan : 셀의 높이 지정
    colspan : 셀의 너비 지정

4. 이미지 태그

  • 단독태그

  • 속성 |

    • src : 이미지의 경로 지정
    • alt : 이미지가 없을 때 나오는 글자 지정
    • width : 이미지의 너비 지정
    • height : 이미지의 높이 지정

  • 속성의 종류 |

  1. HTML 필수 속성, Required
    • 반드시 작성해야 하는 속성
    • src, alt
  2. HTML 선택 속성, Optional
    • 필요할 때 작성하는 속성
    • width, height..
<img src="images/dog01.jp" alt="강아지 오형제">

<!-- 나머지 한쪽 안 적어도 브라우저가 알아서 계산해줌  -->
<img src="images/dog02.jpg" alt="강아지" width="500">

5. 입력 양식 태그

<form> 태그

  • 입력한 값을 서버로 전송하는 역할 ★★★
  • 클라이언트(사용자)로부터 입력장치(키보드, 마우스, 터치 등..)을 통해서 데이터를 입력받는 역할
  • 속성 |
  1. method : 입력 데이터의 전달 방식을 선택
  1. action : 입력 데이터의 전달 위치를 지정
  • 데이터를 수신할 서버측 주소(URL)
  • 서버측 동작하고 있는 프로그램 주소 : 아파치 톰캣의 주소 + 그 안에서 동작중인 자바 프로그램(Servlet, JSP, Spring)

1. <input> 태그

  • 인라인 태그
  • 단독 태그
  • input.type : 입력 컨트롤 종류 지정
  • input.name : 식별자. HTML에서 사용
  • input.id : 식별자. CSS, JavaScript에서 사용
  • input.class : 식별자. CSS, JavaScript에서 사용
  • input.size : 길이(문자 개수)
  • input.maxlength : 최대 입력 길이(문자 개수) + 유효성 검사
  • input.value : 컨트롤의 입력값(현재 입력값)
  • input.readonly : 읽기 전용(전원 ON) > 서버 전송 가능
  • input.disabled : 비활성화(전원 OFF) > 서버 전송 '불'가능
  • input.accesskey : 바로가기(Alt + 조합키)
  • input.autofocus : 자동 포커스
  • input.autocomplete : 자동 완성 끄기 off
  • input.placeholder : 입력될 값에 대한 짧은 힌트를 명시

  • <input> 태그의 type 속성값

    속성값설명
    button버튼
    checkbox체크박스
    file파일 입력
    hidden보이지 않음
    image이미지 형태
    password비밀번호 입력
    radio라디오 버튼
    reset초기화 버튼
    submit제출 버튼
    text글자 입력
    color색상 선택
    date일 선택
    datetime날짜 선택
    datetime-local지역 날짜 선택
    email이메일 입력
    month월 선택
    number숫자 생성
    range범위 선택
    search검색어 입력
    tel전화번호 입력
    tiem시간 선택
    urlURL 주소 입력
    week주 선택

2. <label> 태그

  • input 태그를 설명하는데 사용
  • input 태그에 id 속성을 입력하고 label 태그에 for 속성을 입력한다.
<form>
	<label for="name">이름</label>
	<input id="name" type="text">
</form>

3. <textarea> 태그

  • 다중라인
  • 대부분의 속성은 <input>과 유사하다.
  • maxlength 속성이 없다. > 많은 양의 텍스를 입력받는 컨트롤
  • value 속성이 없다. > PCDATA로 따로 지정한다.
  • <textarea>내의 영역은 컨트롤 영역이다. <body> 영역과 성질이 다르다. > 공백 문자를 있는 그대로 인식한다.
  • 속성 |
    • cols : 태그의 너비
    • rows : 태그의 높이
<textarea rows="5" cols="50">하나
둘
셋</textarea>

4. <select> 태그

  • 속성 |
    • select : 선택 양식을 생성
    • optgroup : 옵션을 그룹화
    • option : 옵션을 생성

5. <fieldset> 태그 <legned> 태그

6. 공간 분할 태그 ⭐

div : block 형식으로 공간을 분할
span : inline 형식으로 공간을 분할

  • 인라인 태그 vs 블럭 태그
    - 모든 태그는 위의 두 분류 중 하나에 속한다.
    - 랜더링(Rendering, 태그를 화면에 출력하는 작업) 결과가 서로 다르다.
  • 인라인 태그, Inline Tag
    • 자신의 내용물과 다른 태그의 내용물을 같은 라인(연속)에 출력한다.
    • why? 내용물의 크기가 태그의 영역이다.
    • PCDATA(텍스트)는 인라인 태그에 속하는 성질을 가진다.
  • 블럭 태그, Block Tag
    • 자신의 내용물과 다른 태그의 내용물을 다른 라인에 출력한다.
    • why? 내용물의 크기와 상관없이 태그의 영역(너비)는 항상 100%이다. 높이는 내용물의 크기와 동일하다.

  • 블럭 형식의 태그와 인라인 형식의 태그

    block 형식 태그inline 형식 태그
    divspan
    h#a
    pinput
    목록글자 형식
    테이블
    form

💭 시멘틱 웹(Semantic web)

  • 개발자가 의도한 요소의 의미가 명확히 드러나게 작성하는 방법이자 방식
<div class="title">합리적인 소비와 함께하는 여행</div>

<h1 class="title">합리적인 소비와 함께하는 여행</div> ★
  • '이건 제목이구나!'라고 바로 알 수 있다. 또한, 검색엔진은 대체로 h1 요소 내의 콘텐츠를 웹문서의 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높다.
  • 또한, h1 요소 내의 콘텐츠가 제목임을 알 수 있다. 이 처럼 의미를 가진 HTML 요소 작성 방식(즉, Semantic Web)이다.

  • 시멘틱 태그는 모두 div 태그와 같은 기능을 수행하는 태그이다.
profile
suyeon
이전 포스트

HTML, CSS, JavaScript ?

다음 포스트

[CSS] 기초

0개의 댓글