프론트엔드 - HTML5, CSS3 소개

이상해씨·2022년 8월 30일

SSAFY 프론트엔드

웹 풀스택(JAVA)

목록 보기

34/54

✔ HTML5

◾ HTML.

HTML : Hypertext Markup Language
- 1990년도 이후 웹(Web, World Wide Web)에서 사용하는 문서 양식.
- 문서에 하이퍼텍스트, 표, 목록, 비디오 등을 포함할 수 있을 tag 사용.

◾ HTML5 개발 배경.

수많은 플러그인들로 인한 Browser간의 부작용을 막기 위해.
- W3C에서 Web Application1.0을 HTML5로 수용.
- 2014년에 정식으로 배포 및 업그레이드 지속.

◾ 웹 표준.

모든 브라우저에서 웹서비스가 정상적으로 보여질 수 있도록 하는 것.
W3C(World Wide Web Consortium) - http://www.w3.org
- www의 창시자인 팀 버너스 리를 중심으로 창립된 월드 와이드 웹 컨소시엄.
W3C에서 HTML5를 웹 표준으로 권고하고 웹 브라우저는 이를 따름.

◾ HTML5의 특징.

HTML5는 지금도 개발 중에 있꼬, 다양한 기능이 추가됨.
멀티미디어 요소 재생 : 플러그인없이 멀티미디어 요소 재생 가능.
서버와 통신 : 서버와 클라이언트 사이에 소켓 통신 가능
Semantic tag 추가 : 웹 사이트를 검색엔진이 좀더 빠르게 검색할 수 있도록 하기 위해 특정 tag에 의미를 부여하는 방식.

◾ HTML 문서 구조.

tag는 현재 문서가 HTML 문서임을 정의.
시작 tag(< tagname >)와 종료 tag(< /tagname >) 존재. tag 사이에 문서 내용 정의.
tag : 고유의 의미를 가지며, 의미에 따라 Browser에 표시.

<!DOCTYPE html>
<html>	<!--Root Element (문서의 시작과 끝.)-->
  <head>	<!--문서 머리글 : 제목, 검색 엔진에서 사용할 키워드, 기타 정보-->
    <meta charset = "UTF-8">
    <title>document title</title>
  </head>
  <body>	<!--문서 본체 : 문서의 내용-->
    document contents
  </body>
</html>

◾ Web & HTML 작동 원리.

서버는 클라이언트의 요청 내용 분석 및 결과를 HTML로 전송.
- 클라이언트와의 연결 종료.
클라이언트는 서버로부터 전달받은 HTML을 Web Broser에 표시.
- Web Browser의 엔진에 따라 tag 해석하여 표시.

✔ CSS

◾ CSS(Cascading Style Sheets)

HTML 문서를 화면에 표시하는 방식을 정의한 언어.
- W3C에서 공인한 표준.
기존 웹 문서를 다양하게 설계하고, 변경 요구 대응에 따르는 어려움 보완.

◾ CSS 규칙

선택자(selector)와 선언(declaration)으로 구성.
선택자는 규칙이 적용되는 엘리먼트.
선언 부분에서는 선택자에 적용될 스타일 작성.
선언은 중괄호로 감싸고 속성(Property)과 값(Value)으로 설정.
속성(property) : 선택자에서 바꾸고 싶은 요소(color, font, width, height, border,...)
값(value) : 속성에 적용할 값
여러 선택자에 동일한 스타일 적용 : comma(,)로 구분하여 나열(선택자 그룹화)
선언 안에 하나 이상의 속성 설정 : semi-colon(;)으로 구분.

<!-- 
- .css : 선택자
- { } : 선언 블록
- margin, color : 선언 (속성 : 값)
-->
.css{margin : 30px; color: #000;}

◾ 스타일 적용 방법

외부 스타일시트, 내부 스타일시트, 인라인 스타일 3가지로 분류.
외부 스타일시트(External Style Sheet) : *.css 파일을 < link >나 @import로 HTML 문서에 연결하여 사용.
- 하나의 CSS 파일만 수정하면 해당 스타일시트를 사용하는 모든 페이지에 변경 내용 적용.
- 가장 많이 사용.
내부 스타일시트(Embedded Style Sheet) : < style >을 이용하여 HTML 페이지 내부에 CSS 적용.
- < style >은 < head >안에 작성.
- 페이지마다 반복해서 작성해야하는 단점.
- 여러 페이지에 동일한 스타일 적용시에는 외부 스타일시트 활용.
인라인 스타일(Inline Style) : Style Attribute를 사용하여 개별 엘리먼트에 스타일 적용.
- Style 속성 값은 CSS 규칙의 선언과 동일.
- 세 가지 스타일 중 가장 먼저 반영.