백엔드가 하는 HTML 정리

박정현·2023년 10월 26일
html
1

🎨 프론트 (HTML/CSS)

목록 보기
2/12
post-thumbnail

1. HTML

1) 정의

  • HTML 은 Hyper Text Markup Language 약어로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어
  • 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어라고 할 수 있다.
  • 간단히 웹(Web)이라고도 한다.
  • 웹페이지를 만드는 컴퓨터 언어이다. 페이지의 제목, 문단, 표, 이미지 등 웹의 구조를 담당한다.
  • 웹페이지를 만들면 정보를 public하게 공유할 수 있다는 점이 유용하며 이러한 웹페이지를 만들기 위한 언어로서 HTML은 필요하다.
  • 구조(기획자)

2) 하이퍼텍스트

  • 순서에 상관없이 하이퍼링크를 통해 접근 ⇒ 비순서성
  • 하이퍼텍스트를 만들기 위한 언어가 HTML이다.

2. HTML 특징

  1. 멀티미디어 기능 추가
    플래시 동영상 -> 플러그인 없이 동영상재생 < video >
  2. 그래픽 기능
    2차원 3차원 기능 구현 가능 (캔버스)
  3. 통신 / 디바이스/등 의 다양한 기능 추가
  4. 응용 프로그램 개발 가능 (HTML5로 제작)
    HTML5 = HTML(5)+CSS(3)+Jascript ->
    브라우저-> 크롬,파이어폭스, 사파리, 오페라,엣지
    웹표준
    -W3C 표준 권고안으로 웹을 개발 -> w3.org(웹표준권고안) ->유효성검사(인증) -인터넷 접속 환경이 다른 사용자들이 동등하게정보를 이용
    -빠르고 즐겁게 웹개발, 쉽게 앱 이용/ 상위 호환성 확보
    웹 접근성 -> http://www.wa.or.kr/
  5. 누구든지 인터넷에 접속해서 서비스 이용가능
  6. 신체적, 기술적 여건과 차별 없이 견고한 콘텐츠 접근 보장
    -청각 장애인을 위한 음성 정보 -> 문자로 제공
    -마우스를 이용 할 수없는 사용자 -> 키보드만 으로 콘텐츠에접근

3.용어

  • 엘리먼트(element) - 요소
    • HTML은 요소로 되어있다.
    • 예시)
      블록요소
      • div: 태그(tag)
      • 블록요소: 컨텐츠(content)
      • class, id: 속성(property)
  • open tag - 여는 태그
  • close tag - 닫는 태그
  • 여는 태그와 닫는 태그가 있는 이유는 콘텐츠를 감싸기 위함입니다.(또는 요소가 다른 요소를 감싸기 위해서)
  • 닫는 태그(close tag)가 없는 HTML 요소 - 콘텐츠(contents)를 감싸지 않아 비어있다는 의미ex) < meta charset="utf-8" >헤더는 브라우저가 인식할 수 있는 정보를 제공해 주는 영역으로 메타 태그의 문자셋은 utf-8 로 되어있음을 나타내는 정보만 제공하고 있기 때문에 내용(콘텐츠)을 감싸지 않았다라고 볼 수 있습니다.
  • 애트리뷰트(attribute) - 속성
  • 벨류(value) - 값
  • < tagname attribute="value" > 콘텐츠 < /tagname >

4. DTD: 문서 지정 형식 정의

  • HTML 을 작성하려면 문서타입이라는 것이 반드시 필요합니다.
  • 문서 타입을 DTD 라고 하며, DTD(DOCTYPE or Document type Definition)는 DTD는 HTML 문서의 반드시 최상 위에 위치해야 합니다.
  • 이러한 문서형 정의로 HTML5, HTML4, XHTML 세가지 문서 유형이 존재하며 기술한 유형에 따라 마크업 문서의 요소와 속성(attribute) 등을 처리하는 기준이 되고 이것은 또한 유효성 검사에 이용된다.
  • 문서형(DTD) 정의를 생략하는 경우 웹 브라우저가 표준모드가 아니라 비표준모드(Quirks mode)로 렌더링되어 크로스 브라우징에 어려움을 겪을 수 있습니다.
  • DOCTYPE 의 버전별선언(HTML5, HTML4, XHTML)에 따라서 HTML 은 지원하는 태그가 조금씩 다릅니다.
  • 그리고 DOCTYPE 태그가 아니라 선언문으로서의 역할이기 때문에 HTML문서 최상위에 위치하는 것입니다.
  • 또한 DOCTYPE 종료하는 태그가 없는 것이 특징이며 <!DOCTYPE>은 HTML 문서의 구성 요소는 아닙니다.

5. HTML 태그 정리

1) HTML 필수요소(태그)

  • < html >: 모든 HTML문서의 최상위 요소 → root element
  • < head >: HTML 페이지의 설정, 스타일, 스크립트 적용, 외부 파일 링크(연결)
  • < body >: HTML페이지의 표시될 내용 → 브라우저에 표시

2) < head >안에 포함되는 요소

  • < meta >: HTMl페이지의 설정 및 정보
  • < title >: 브라우저 탭에 표시될 제목
  • < style >: CSS(내부 스타일 설정)
  • < link >: CSS외부파일을 연결 *필수 CSS는 외부스타일로 연결(반드시)**
  • < script >: 내부 자바스크립트 작성 및 외부 자바스크립트 파일 명시

3) 단락(블록)요소 → block

*: 많이 사용하는 정도를 나타냄

  • 프로젝트 기본 레이아웃 설정 요소
  • width, height값을 설정할 수 있다. *
  • width값을 적용하지 않으면 자동으로 부모의 너비의 100% *
  • 하위 요소 추가시 자동으로 수직방향으로 정렬 *
  • 가로 배치를 할 경우 → float, clear:both, flex, grid *
  • display속성을 이용해서 설정 block → inline *
  • < div >: division의 약자로 영역을 의미 → 가장 많이 사용되는 태그
  • <h1~h6>: 제목, h1→로고에 사용하는 경우가 많다. **
  • dl, dtm dd: 목록태그
  • < li >: 리스트 → ul, ol과 같이 사용
    • li하위는 a링크 설정이 필수 → 하이퍼 링크
    • reset.css에서 설정
  • < ol >: 순서 있는 목록 < li >로 항목 표시
  • < ul >: 순서 없는 목록 < li >로 항목 표시 → GNB에 가장 많이 사용 ***
    • 블록요소이기 때문에 가로정렬을 해야 한다.
  • < p >: 앞 뒤로 여백이 있는 문단 형성 → 보통 텍스트로만 구성 ***
  • < table > : form → 회원가입폼, 로그인폼, 정형회된 구조에 사용****
  • < form >: 사용자의입력 정보를 서버에 전송해주는 요소 ***
  • < link >: 외부 리소스 연결 요소

4) 인라인요소 → inline

  • width, height값을 설정할 수 없다.

  • 크기를 적용하지 않으면 자동으로 자식의 크기로 조정한다

  • 하위요소 추가시 자동으로 부모요소 왼족부터 오른쪽으로 정렬

  • width, height값을 설정하려면 display속성을 이용해서 설정해야 한다.

    • inline → block

  • < a >: 텍스트나 이미지 등 컨텐츠를 클릭하면 링크된 이동경로로 이동 link

    • < a herf=”이동할 경로” target=”이동방식(보통생략)”>텍스트, 이미지, 동영상 등< /a >
    • target
      • _blank: 새창
      • 생략: 새창X
      • 코드
    • 내비게이션 등에 사용된다. → ul>li a{..}
    • 기본적으로 색상이 파란색, 밑줄이 있다.
      • resest.css 로 설정을 변경해주어야 한다.
      • a태그를 reset.css에서 설정한 모습

  • < span >: 특정 요소에 사용

5) 인라인블록→line-block → line

  • width, height값을 설정할 수 있다.
  • 크기를 적용하지 않으면 자동으로 자식의 크기로 조정된다.
  • 하위요소 추가시 자동으로 부모요소 왼쪽부터 오른쪽으로 정렬된다.
  • display속성을 이용해서 설정한다. inline-block → block
  • 자동으로 좌우 여백이 생긴다. → margin
  • < img >: 이미지(jpg, gif, png), 이미지 경로, 이미지 대체문구, 단일태그, 이미지 대체문구를 생략하면 웹접근성 위반이다.
    • < img src =“이미지경로” alt=”이미지 대체문구”>
    • 프로젝트 작업 시 쇼핑몰 작업 이미지 크기(비율)이 통일되어야 한다.
    • 웹용 이미지 저장 alt+ctr+shift+s
      • jpg: 웹의 기본포멧
      • png: 배경투명한 이미지
    • 이미지 저장할 때 규칙성있게 저장해야 한다.
      • shop_1.jpg, shop_2.jpg, …
    • 원본은 PSD파일로 저장한다.
    • < img >태그는 기본적으로 인라인이기 때문에 기본여백이 있다.
      • display:block; 설정으로 여백을 없애준다.
      • 여백설정
    • 이미지를 처리하는 기본 공식
      • 코드
profile
박정현
개발을 개발괴발하지 않기 위한 노력
이전 포스트

[SpringBoot] Thymeleaf 레이아웃을 사용해보자!

다음 포스트

(CSS) 프로젝트에 CSS 적용해 보기

0개의 댓글