HTML5 & CSS3

Updated: August 26, 2021

HTML

HTML은 Hypertext Markup Language의 약자.
1990년도 이후 웹(Web, World Wide Web)에서 사용하는 문서 양식
문서에 하이퍼텍스트, 표, 목록, 비디오 등을 포함할 수 있는 tag(Tag)를 사용.
문서를 웹브라우저에 표현할 때 tag를 사용

웹표준이란?

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

HTML5의 특징

HTML5는 지금도 개발 중에 있고, 다양한 기능이 추가됨
멀티미디어 요소 재생
서버와 통신 : 서버와 클라이언트 사이에 소켓 통신이 가능
Semantic tag 추가
- 웹사이트를 검색엔진이 좀더 빠르게 검색할 수 있도록 하기 위해 특정 tag에 의미를 부여하는 방식
- 예를 들어 <header>tag는 무서의 주제를 나타내는 tag로써 <header>tag가 사용된 웹 문서의 경우 검색엔진은 웹문서의 모든 내용을 검색하는 것이 아닌 <header>tag의 태용만을 검색해서 보다 빠르게 검색을 진행할 수 있다.

HTML 문서 구저

<!DOCTYPE html>tag는 현재 문서가 HTML 문서임을 정의
시작tag<tagname>와 종료tag</tagname>가 있으며, tag사이에 문서 내용을 정의
각 tag는 고유의 의미를 가지고 있으며, 웹브라우저는 이의미에 따라 문서를 화면에 표시.
<html> => root tag,
기본적인 틀

<html>
	<head>
	</head>
	<body>
	</body>
</html>

HTML 기본

HTML(웹 페이지 문서 담당-구조), CSS(웹 페이지 디자인 담당-표현), JS(웹페이지 이벤트 담당-동작)
HTML은 마크업 언어로 웹 문서를 작성하며, tag를 사용하여 문서의 구조 등을 기술하는 언어.
HTML 문서는 ‘tag’로 만들어진다.

Tag

HTML 문서의 전체 구성은 html, head, body tag로 구성
tag는 시작tag와 종료 tag로 쌍을 이루거나 시작 tag만 존재하는 tag도 있다
시작 tag<tagname>와 종료 tag</tagname>는 ‘/’로 구분하며 중첩되지 않도록 한다.
- 시작과 종료 tag: <body>…</body>
- 시작 tag만 있는 경우: <br/>, <hr/>, <img/>,…
각각의 tag는 속성과 속성의 값이 존재한다.
HTML tag에는 어느 tag에나 넣어서 사용할 수 있는 글로벌 속성이 있따.
- class : tag에 적용할 스타일의 이름을 지정
- Ex) <div class="content">...</div>
- dir : 내용의 텍스트 방향을 지정. 왼쪽»오른쪽(기본값, Itr), 오른쪽 » 왼쪽(rtl), 왼쪽 또는 오른쪽 정렬과 비슷한 형태로 표현
- Ex) <p dir="rtl"> 오른쪽에서 왼쪽으로 표시됨.(오른쪽 맞춤)</p>
- id : tag에 유일한 ID를 지정함. 자바스크립트에서 주로 사용
- Ex) <input type="text" id="userid">
- style : 인라인 스타일을 적용하기 위해 사용
- Ex) <p style="color:red; text-aligh:center;">빨간색 가운데</p>
- title : tag에 추가 정보를 지정. tag에 마우스 포인터를 위치시킬 경우 title의 값 표시
- Ex)<p><abbr title="Web Application Server">WAS</addr>는 ...</p>

주석

* 주석의 내용은 브라우저에 출력이 되지 않는다
* HTML tag의 내용을 설명하기 위한 용도로 사용.
* `<!-- -->`

Root요소

<html> tag는 HTML문서 전체를 정의
Head(<head>…</head>)와 Body(<body>…</body>)로 구성

Body 요소

문단의 제목을 지정할 때 사용. <h1></h1>부터 <h6></h6>까지 구분. 숫자가 커질수록 글자는 작아짐
<section> tag를 이용하면 같은 tag를 서로 다르게 표현
문서 구조를 <section>tag를 이용하여 구분하면 각 문단의 제목을 하나의 tag로 작성가능.

특수문자

  : Non-breaking space(공백)
< : Less than : <
> : Greater than : >
& : Ampersand : &
" : Quotation mark : “
© : Copyright : ©
® : registered trademark : ®

목록형 요소

목록 tag는 하나 이상의 하위 tag를 포함
목록 tag는 각 항목을 들여쓰기로 표현.
번호 또는 심볼을 이용해서 목록을 표현.
<ul> 번호 없는 목록을 표시. 항목 앞에 심볼을 표시
<ol>번호 있는 목록을 표시 , 숫자, 알파벳, 로마숫자등으로 표시
<li> 목록 항목 <ul>이나<ol>tag 하위에서 사용
<dl> 용어 정의와 설명에 대한 내용을 목록화해서 표시
<dt> 용어 목록의 정의 부분을 나타냄
<dd> 용어 목록의 설명 부분을 나타냄

table

HTML table 모델은 데이터를 행과 열의 셀에 표시
행 그룹요소인 <thead>, <tbody>, <tfoot>요소를 사용하여 행들을 그룹화
<colgroup>과 <col>요소는 열 그룹을 위한 추가적인 구조정보를 제공.
table의 셀은 머리글(<th>)이나 데이터 (<td>)를 가질 수 있음
데이터가 너무 많으면 로딩이 길어져서 요새는 div로 한다.
<table>, <tr>, <td> tag에는 table에 스타일을 적용하는 다양한 속성들이 있다.
frame 속성은 table의 특정 선을 보여줄지를 결정하며, rules 속성은 셀과 셀사이의 줄이 나타날 것인가를 지정.
table 정렬을 위한 align 속성, background, bgcolor, border속성등이 있음
HTML5부터는 이러한 속성들을 더이상 지원하지 않는다. 스타일은 CSS를 사용하여 적음
table 행 그룹 요소는 table의 행들을 머리글, 바닥글, 하나 이상의 본체 항목으로 그룹핑
행 그룹 요소에는 머리글(<thead>), 본체 항목(<tbody>), 바닥글(<tfoot>)요소가 있다.
각 행 그룹은 최소 하나 이상의 <tr>을 가져야 함
table 열 그룹 요소는 table내에서 구조적인 분리를 가능케함
<colgroup> 요소는 명시적인 열 그룹을 만들며, <col>요소는 열을 묶어 그룹핑 함
<colgroup> 요소의 span 속성은 열 그룹에서 열의 개수를 정의
<col> 요소이 span 속성은<col>에 의해 묶여진 열의 개수를 말함.
cellspacing은 table Cell 과 Cell 사이의 공간을 의미
cellpadding은 Cell외곽과 Cell 컨텐츠 사이 공간을 의미
HTML5부터는 테두리 스타일 관련 속성을 지원하지 않고, CSS를 사용
HTML table의 <td>요소에는 셀을 병합하기 위한 두개의 속성이 있음
colspan 속성은 두개 이상의 열을 하나로 합치기 위해 사용.
rowspan속성은 두개 이상의 행을 하나로 합치기 위해 사용.

이미지 요소

<img>tag를 사용하며 이미지를 삽입하기 위해 사용
src 속성은 이미지 경로를 지정하기 위해 사용(상대경로, URL 모두 가능)/
height, width속성은 이미지 사이즈를 지정하기 위해 사용
alt속성은 이미지를 표시할 수 없을 때 화면에 대신하여 보여질 텍스트를 지정.
<figure>는 설명 글을 붙여야 할 대상을 지정

링크 요소

<a>tag를 사용하며, 하나의 문서에서 다른 문서로 연결하기 위해 사용.
tag를 서로 중첩해서 사용할 수 없다.
href 속성은 하이퍼링크를 클릭했을 때, 이동할 문서의 URL이나 문서의 책갈피를 지정
target속성은 하이퍼링크를 클릭했을 때 현재 윈도우 또는 새로운 윈도우에서 이동할지를 지정.
_self는 현재 윈도우에서 다른 문서로 이동, _blank는 새로운 윈도우 또는 새로운 탭에서 다른 문서로 이동(브라우저 설정에 따름)
_parent : 프레임을 사용했을 때 링크 내용을 부모 프레임에 표시. _top프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체화면으로 표시.
기본은 self
#anchor
- 같은 페이지 안에서 특정요소를 클릭 시 그 위치로 한번에 이동시킨다.
- <tag id = "anchor name"> text or image</tag>
- <a gref="#anchor name"> text or image<a>
map
- 하나의 이미지에 여러 개의 link(Click 위치에 따라 서로 다른 link) *<map name="map name"> …</map>
- 이미지에 영역을 표시할 때 <area>사용
- area의 속성은 href(링크 경로), target(링크표시대상), shpae(링크로 사용할 영역의 형태)등.
- shape의 값으로는 default, rect, circle, poly가 있다.
iframe
- 화면의 일부분에 다른 문서를 포함
- src 속성은 포함시킬 외부 문서의 경로를 지정(상대경로, URL 모두 가능)
- height, width 속성은 프레임 사이즈를 지정
- name 속성은 프레임의 이름을 지정.

form control

사용자로부터 데이터를 입력 받아 서버에서 처리하기 위한 용도로 사용
사용자의 요청에 따라 HTML form을전달(회원가입양식, 검색양식 등)
사용자는 HTML form에 적절한 데이터를 입력한 후 서버로 전송. 이를 submit이라 함
서버는 사용자의 요청을 분석한 후 데이터를 등록하거나, 원하는 데이터를 조회하여 결과를 다시 반환

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
    <title>Document</title>
    <script>
      function checking() {
        if (document.getElementById("username").value == "") {
          alert("이름 반드시 입력!!!");
          return;
        } else {
          alert("서버로 모든 데이터 전송!!!");
        }
      }
    </script>
  </head>
  <body>
    <h2>간단한 폼연습</h2>
    <form action="http://www.naver.com">
      <img src="../img/dog.jpg" alt="" /><br />
      이름 <input type="text" name="name" placeholder="이름을 입력하세요" id="username" /><br />
      아이디 <input type="text" name="id" id="" /><br />
      비밀번호 <input type="password" name="password" id="" /><br />
      성별 <input type="radio" name="gender" value = "남" id="" / checked>남
      <input type="radio" name="gender" value="여" id="" />여 <br />
      취미
      <input type="checkbox" name="hobby" id="" value="영화" />영화보기
      <input type="checkbox" name="hobby" id="" value="음악" />음악감상
      <label for="게임"><input type="checkbox" name="hobby" id="게임" value="게임" />게임</label>
      <input type="checkbox" name="hobby" id="" value="공부" />공부<br />
      지역
      <select name="area" id="area">
        <option value="s">서울</option>
        <option value="d">대전</option>
        <option value="b">부울경</option>
        <option value="k">광주</option>
        <option value="g">구미</option></select
      ><br />
      자기소개 <textarea name="" id="" cols="30" rows="10"></textarea>
      <br />
      나이 <input type="number" name="" id="" /><br />
      전화번호
      <select name="" id="">
        <option value="">020</option>
        <option value="">010</option>
        <option value="">02</option>
        <option value="">031</option>
        <option value="">041</option>
      </select>
      -
      <input type="tel" name="" id="" />
      -
      <input type="tel" name="" id="" /><br />
      이메일 <input type="email" name="" id="" /><br />
      홈페이지 <input type="url" name="" id="" />
      <input type="button" value="그냥버튼" onclick="javascript:checking()" />
      <input type="submit" value="전송" />
      <input type="reset" value="취소" /><br />
      <input type="image" src="../img/dog.jpg" alt="" /><br /><br />
      <button>버튼</button>
      <!--이미지 버튼과 기본버튼은 submit-->
</form>
    <h3>네이버에서 검색</h3>
    <form action="https://search.naver.com/search.naver">
      <input type="tel" name="query" id="" />
      <input type="submit" value="검색" />
    </form>
  </body>
</html>

CSS

웹 페이지 표현 담당
Cascading Style Sheets의 약자
스타일 사용 이유
- 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.
- 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다.
웹 페이지를 표현하기 위한 스타일 규칙을 모아 놓은 문서
웹 브라우저 별 CSS3지원
CSS 규칙은 선택자(selector)와 선언(declaration)두 부분으로 구성.
선택자는 규칙이 적용되는 엘리먼트
선언 부분에서는 선택자에 적용될 스타일을 작성
선언은 중괄호로 감싸며, 속성(propert)와 값(value)로 이루어짐.
.css{margin: 30px; color: #000; }
속성은 선택자에서 바꾸고 싶은 요소(color, font, width, height, border, …)
값은 속성에 적용할 값
여러 선택자에 동일한 스타일을 적용할 때, comma(,)로 구분하여 나열(선택자 그룹화)
선언 안에 하나 이상의 속성을 작성할 수 있으며, 각 속성은 semi-colon(;)으로 구분
주석 : /* 내용 */

외부 스타일 시트 적용-1

<link>를 사용하여 외부 스타일 시트를 적용.
<link>는 <head>안에 작성하여 rel, type, href 3가지 속성을 주로 사용
rel은 HTML 페이지와 링크된 파일간의 관계를 의미.
href는 CSS file 경로를 의미함.

외부 스타일 시트 적용 -2

@import를 사용하여 외부 스타일 시트를 적용
@import는 스타일 시트 중 최상단 위치
@import url(“file path”); 또는 @import “file path”; 형태로 사용.
<link>와 달리 <style>의 media 속성을 통해 보여지는 미디어 타입을 설정.

내부 스타일 시트 적용

<style>을 사용하여 내부 스타일 시트를 적용.
<style>tag 내부에 CSS 규칙을 작성
외부 스타일 시트보다 우선 적용
<head>tag 내부에 작성.

인라인 스타일 적용

개별 element마다 스타일을 지정하므로 유지보수에 용이하지 않다.
스타일 적용 우선순위는 “인라인 스타일>내부 스타일 시트> 외부스타일”시트 순
Style 속성을 사용하고 속성값으로 CSS규칙을 작성.

CSS 이해

HTML 문서에서 CSS 규칙 적용 타겟이 되는 다양한 종류의 CSS선택자가 존재.
일반 선택자는 전체 선택자, 타입 선택자, 클래스 선택자, ID선택자로 분류.
복합 선택자는 자식 선택자, 하위선택자, 인접 형제 선택자, 일반 형제 선택자로 분류.
그 외에도 가상 클래스 선택자, 가상 엘리먼트 선택자, 속성 선택자가 존재.

일반선택자 요소

전체 선택자 사용법은 *{}이다.
HTML 문서내 모든 element를 선택
잘 사용되지 않으며 우선 순위가 가장 낮다.
일반 선택자의 우선 순위는 전체 선택자< 타입선택자< 클래스 선택자< ID 선택자이다.
타입선택자 사용법은 elementName {}이다.
태그명을 이용해서 스타일을 적용할 태그를 선택
1개 이상의 HTML 엘리먼트를 사용할 수 있다.
여러 엘리먼트를 선택할 때는 컴마(,)로 구분.
클래스선택자 사용법은 .className{}이다.
클래스 명은 공백 없이 대소문자 또는 Hypen(-), UnderSore(_)로 시작. (기호나 숫자시작 x)
HTML 문서에서 동일한 클래스 명을 중복해서 사용 가능.
class 속성 값에 하나 이상의 클래스를 적용 가능.
ID선택자 사용법은 #IDNAME{}이다.
HTML 문서에서 동일한 ID를 중복 사용할 수 없다.
id 속성 값엔 1개의 id만 사용 가능
일반 선택자 중 가장 우선순위가 높다.

복합 선택자 요소

하위 선택자 사용법은 element element {}이다.
하위 선택자는 1단계 하위요소와 2단계 이상 하위요소에 모두 적용.
자식 선택자 사용법은 element > element {}이다.
자식 선택자는 1단계 하위 요소에만 적용.
인접 형제 선택자 사용법은 element + element {}이다.
형제 관계인 엘리먼트가 여러 개 존재할 경우 첫번째 엘리먼트만 선택
일반형제 선택자 사용법은 “element ~ element{}”이다.
형태 관계인 엘리먼트가 여러개 존재할 경우 모든 엘리먼트를 선택.

가상 클래스 선택자 요소

가상 클래스 선택자는 User Agent가 제공하는 가상의 클래스를 지정.
사용법은 ‘:가상클래스{}”이다.
:link는 방문하지 않은 링크를 선택하고, :visited는 방문한 링크를 선택
:hover는 요소에 마우스가 올라간 경우 선택하고, :active는 요소가 활성화된 경우 선택.
:focus는 요소가 포커스를 가질 경우 선택
:link, :visited, :hover, :adtive는 IE 6.0에서 지원하지 않고, :focus는 IE 6.0 7.0에서 지원하지 않는다.
:nth-child(n)은 지정된 요소 부모의 n번째 자식들에 적용.
괄호에 상수 뿐만 아니라 수열(2n+1)도 가능
n은 0부터 시작하며, 자식 순번은 1부터 시작
첫번째 요소와 마지막 요소에 대한 스타일 지정은 :first-child와 :last-child선택자를 사용.

가상 엘리먼트 선택자 요소

가상 엘리먼트 선택자는 보이지 않는 가상의 엘리먼트를 선택
사용법은 “::가상 엘리먼트{}”dlek.
가상 엘리먼트 표기법은 CSS1과 CSS2에서 single colon(:)을 사용함.
CSS3에선 가상 클래스와 가상 엘리먼트를 구별하기 위해 double colon(::)으로 대체.

속성 선택자 요소

특정한 속성을 가지거나 속성 값을 갖는 엘리먼트를 선택
Existence([]), Equalist([=]), Space([~=]), Prefix([^=]), Substring([*=])등이 있다.
속성 선택자를 사용하기 위해서는 HTML 문서를 작성할 때에 name , title등의 속성값을 규칙적으로 정의
화면에 같은 분류의 많은 항목들을 일괄적으로 선택할 때 유용. (예: 특정이름을 갖는 체크박스)

CSS 규칙 적용 우선순위

같은 엘리먼트에 두개 이상의 CSS규칙이 적용된 경우 마지막 규칙, 구체적인 규칙, !important가 우선 적용.
CSS 규칙들 중 하단에 작성한 규칙이 마지막 규칙이다.
P {}보단 p b {}가 더 구체적이므로 p {}가 아닌 p b{}가 적용됨.
속성 값 뒤에 !important를 작성하면 ,같은 엘리먼트에 대해 보다 우선적으로 스타일 적용.

Share on

Twitter Facebook LinkedIn

boomini

HTML5 & CSS3

HTML

웹표준이란?

HTML5의 특징

HTML 문서 구저

HTML 기본

Tag

주석

Root요소

Body 요소

특수문자

목록형 요소

table

이미지 요소

링크 요소

form control

CSS

외부 스타일 시트 적용-1

외부 스타일 시트 적용 -2

내부 스타일 시트 적용

인라인 스타일 적용

CSS 이해

일반선택자 요소

복합 선택자 요소

가상 클래스 선택자 요소

가상 엘리먼트 선택자 요소

속성 선택자 요소

CSS 규칙 적용 우선순위

Share on

Leave a comment

You may also enjoy

MVC

JSP

JSP

문자열 패턴 매칭