모던 웹 디자인을 위한 HTML5+CSS3 입문
•

서문

HTML5를 공부하겠다는 것은 다음 세가지를 공부하는 것

  1. HTML5 기본태그
  2. CSS3 선택자 및 속성
  3. 자바스크립트

웹의 역사

1989년 팀버너스리가 인터넷 공간 안에서 문서가 서로 이동할 수 잇는 새로운 개념의 방법을 제안. 하이퍼링크라는 특수한 기능 이를 바탕으로 World Wide Web을 개발해 1991년에 배포. 1993년에 웹의 소스코드를 모든사람이 사용할수 있게 공개. 1994년 팀버너스리가 W3C 재단 창설. 웹 표준과 HTML 표준을 지정하지만 강제하지는 않음.

제 1차 웹브라우저 전쟁

모자이크 커뮤니케이션가 넷스케이프 커뮤니케이션즈로 이름을 바꾸고 웹브라우저도 넷스케이프로 발표. 넷스케이프와 익스플로러의 점유율 싸움. 넷스케이프의 패배.

플러그인

웹 브라우저 전쟁동안 웹은 엄청난 속도로 발전했지만, 웹 표준을 지정하는 W3C는 발 빠르게 대응하지 못해, 기업들이 플러그인을 만들기 시작. 액티브엑스와 플래쉬가 이러한 플러그인이고 웹을 점점 풍부한 공간으로 변하게 됨. 동영상과 음악을 감상, 은행업무도 처리. 액티브 엑스는 C++, 플래시는 액션스크립트를 사용해 개발. 자바스크립트가 현재의 위상을 차지한 것은 얼마 되지 않습니다.

웹 2.0 시대

2000년대 초반. 액티브엑스를 기반으로 기업의 웹 어플리케이션이 나오기 시작. 플래시를 기반으로 사용자를 위한 애니메이션이 만들어지기 시작. 플래시는 자체적으로 사용하는 프로그래밍 언어에 객체지향 개념을 도입하면서 애플리케이션을 쉽게 개발하는 형태로 발전. 2004년도에 이것이 플렉스로 발전.

WHATWG

플러그인이 많아지면서 익스플로러가 점점 무거워짐. 이에 익스플로러를 제외한 웹브라우저 제공기업 (애플, 모질라, 오페라 소프트웨어)가 독자적으로 새로운 웹 표준 기관을 설립. 2004년 6월에 HTML5 표준을 제정하는 WHATWG가 설립. XHTML2.0이 2009년에 폐기되고 WHATWG의 Web Application 1.0 표준 선택. HTML5을 표준으로 변경하고 WHATWG과 함께 HTML5 표준을 작성 2012년 초안 발표 2014년 10월에 정식 권고안 발표.

제 2차 웹브라우저 전쟁

마이크로소프트와 W3C가 함께한 XHTML 2.0 표준이 붕괴되면서 익스플로러의 기능 문제가 대두됨. 익스플로러가 지원하지 못하는 역현상. 다른 브라우저들이 빠른 속도로 업데이트.

HTML5 추가기능

익스플로러 8이전의 웹브라우저는 HTML5을 지원하지 않는다.

웹 생태계

각 디바이스마다 다른 운영체제를 갖고 있따면 각각 운영체제에 맞는 프로그램을 개발해야 하지만 웹에서 동작하는 프로그램이라면 모든 디바이스에서 사용할 수 있다.

…

HTML5는 웹 페이지에만 종속되지 않고 일반 운영체제로도 퍼지고 있다. 타이제 파이어폭스OS, WebOS등의 운영체제들이 출시될수록 다양한 운영체제 전용 애플리케이션을 HTML5로 개발할 수 있을 것.

Chapter 2

HTML

조직화 된 문서를 가질 수 있는 이유는 Anchor 태그 덕분 <a href="">

Note : a 태그는 본래 가지고 있는 하이퍼 링크 기능을 제거하고 사용하는 경우도 있지만 웹표준을 지키려면 href를 반드시 입력해야 한다. 웹표준을 지키면서 이동하지 않는 a 태그를 만들때는 href 속성에 #을 입력하고 이를 빈 링크라고 부른다.

글자형태

과거에는 이런 태그를 많이 사용했으나, 현대에는 모두 스타일 시트로 처리하므로 잘 쓰지 않는다.

루비문자

한자 위에 표시되는 글자

…

ruby 태그를 지원하지 않는 웹브라우저에서도 정상적으로 출력될 수 있게 만든 태그가 rp 태그

목록태그

<ol>
    <li></li>
</ol>
<ul>
    <li></li>
</ul>

정의목록 태그

<dl>, <dt>, <dd>

테이블 태그

<table>
    <tr>
        <th></th>
    </tr>
    <tr>
        <td></td>
    </tr>
<table>

이미지 태그

오디오태그

웹브라우저에서 플러그인 도움없이 음악을 재생할 수 있게 만들어줌. HTML5에서 추가된 기능이므로 익스8 이하에서는 사용 불가.

<audio src="Lalimba.mp3" contorls="controls" autoplay ="autoplay"></audio> <!-- XHTML5 표기법 -->
<audio src="Lalimba.mp3" contorls autoplay></audio> <!-- HTML5 표기법 -->

브라우저마다 지원하는 오디오 소스 확장자 형식이 다르다. -p90 참조 - 따라서 이를 해결하기 위해 아래와 같이 source 태그를 사용한다. mp3파일을 사용할 땐 주의해라 mp3는 5000회 이상 재생시 2500달러. 아래와 같이 type 속성을 지정해주어야 트랙픽이 낭비되지 않는다. - 지정하지 않으면 파일을 내려받고 재생가능한 파일인지 확인한다. -

<audio controls>
    <source src="Kalimba.mp3" type="audio/mp3" />
    <source src="Kalimba.ogg" type="audio/ogg" />
</audio>

비디오 태그

HTML5 전에는 플러그인 - 윈도 미디어 플레이어 플래스 -로만 동영상을 볼 수 있었지만 이제는 웹표준으로 동영상 플레이가 가능

비디오 태그도 웹 브라우저마다 지원하는 비디오 형식이 다르므로 source 태그를 사용해야 한다.

Note : 웹브라우저마다 표시되는 video 태그의 형태가 일관되지 않으므로 웹페이지를 디자인할 때 문제가 될 수 있다. 또 익스플로러 8 이하에서는 video 태그가 동작하지 않습니다. 이러한 문제를 해결할 수 있는 간단한 플러그인 video.js

track 태그

트랙 태그는 비디오태그에 자막을 표시할 때 사용하는 태그

입력 양식 태그

입력 양식은 사용자에게 입력받는 공간

타입 속성값을 웹브라우저에서 지원하지 않는 경우도 있다.

…

select 태그를 스마트폰에서 실행할 경우 스마트폰에 내장되어 있는 옵션화면을 사용합니다. 그렇지 않으려면 직접 만들어야 합니다.

…

여러가지를 선택할 때는

<select multiple="multiple">
    <option></option>
</select>

스마트폰에서는 잘 나오지만 일반 데스크톱에서는 잘 나오지 않기 때문에 데스크톱 웹 페이지에서는 잘 사용하지 않습니다.

…

<optgroup> 태그는 선택 옵션을 묶을 때 사용하는 태그

…

최근에는 select 태그가 아닌 div 태그로 만든다.

fieldset 태그와 legend 태그

서버와 사용

공간 분할 태그

대표적인 공간 분할 태그는 <div>와 <span>

block 형식과 inline형식은 스타일 시트에서 굉장한 비중을 차지한다.

HTML5 시멘틱 구조태그

HTML5 태그의 가장 큰 변화를 시맨틱 -의미론적인-태그라고 말합니다.

…

스타일 시트를 적용하면 어떤게 제목이고 어떤게 본문이다를 사용자가 알 수있습니다. 하지만 컴퓨터는 눈이 없으므로 레이아웃을 구분할 수 없습니다. 기계적인 검색 엔진은 태그가 어떤 기능을 하는지 모르므로 이를 해결하고자 특정한 태그에 의미를 부여해서 웹페이지를 만드는 시도가 시작 되었는데 이것을 시멘틱 웹이라고 합니다.

시맨틱 태그는 모두 div 태그와 같은 기능을 수행하는 태그입니다. 하지만 이전에 언급했던 것처럼 태그는 검색 엔진이나 그 이외의 기계적인 동작들이 웹 페이지를 쉽게 이해할 수 있게 하는 데 의미가 있습니다.

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <div>
        <h1>HTML5 Header</h1>
    </div>
    <div>
        <ul>
            <li><a href="#">Menu - 1</a></li>
            <li><a href="#">Menu - 2</a></li>
            <li><a href="#">Menu - 3</a></li>
        </ul>
    </div>
    <div>
        <div>
            <h1>Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div>
            <h1>Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div>
        <span>서울특별시 강서구 내발산동</span>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <header>
        <h1>HTML5 Header</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Menu - 1</a></li>
            <li><a href="#">Menu - 2</a></li>
            <li><a href="#">Menu - 3</a></li>
        </ul>
    </nav>
    <section>
        <article>
            <h1>Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </article>
        <article>
            <h1>Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </article>
    </section>
    <footer>
        <address>서울특별시 강서구 내발산동</address>
    </footer>
</body>
</html>

시멘틱으로 작성된게 코드를 읽을때도 편하다

내생각

Chapter 3

전체 선택자

* {
    color : red;
}

note : html, style title 태그도 전체 선택자에 포함이 된다.

여러개의 선택자

h1, h2, hr {
    color : red;
}

아이디와 클래스 선택자

#id {
    color : red;
}

.id {
    color : red;
}

속성 선택자

다른 선택자와 같이 사용한다.

선택자[속성=값]
.header[type=text]

문자열 속성 선택자

[attributename|="value"]

뭐 이런식인데, 복잡한 css 프레임 워크를 만들때나 사용

태그 자손과 후손

자손은 >, 후손은 밑에 모든 태그

동위 선택자

계층구조에서 동일한 위치에 있는 상태의 관계를 선택자로 사용.

반응 선택자

상태 선택자

상태 선택자는 입력 양식의 상태를 선택할 때 사용하는 선택자입니다.

<input value="enabled">
<input value="disabled" disabled="disabled">

input:enabled {background-color : red}
input:disabled {background-color : red}
input:focus {background-color : red}

구조선택자

구조 선택자는 CSS3부터 지원

형태구조선택자

형태 구조 선택자는 일반 구조 선택자와 비슷하지만 태그형태를 구분합니다.

문자 선택자

문자 가상 요소 선택자는 태그 내부 특정 조건의 문자를 선택하는 선택자입니다. 문자 선택자는 가상 요소 선택자 (Pseudo-Element selector)로 ::를 사용하는 것이 표준하지만 : 기호를 사용해도 정상 작동합니다.

시작문자 선택자

p::first-letter {
    font-size: 3rem;
}

p::first-line {
    color: red;
}

전후 문자 선택자

전후 문자 선택자는 특정 태그의 전후에 위치하는 공간을 선택하는 선택자입니다. 전후 문자 선택자에는 content 속성을 사용할 수 있따.

잘 사용 할 일이 없는 선택자인데 필요한 경우 예제를 참조하자 링크

사용자 지정속성

웹 표준에 따르면 각각의 태그에 지정된 속성 이외의 것을 사용하면 안된다. 하지만 문자열 앞에 data-를 붙이면 사용자 지정속성으로 인정한다.

<div data-role="page" data-theme="b">

jquery mobile 에서는 사용자 지정 속성을 사용하면 레이아웃을 자동으로 구성해준다.

반응 문자 선택자

p::selection {
    background-color: black;
    color: white;
}

링크선택자

링크 선택자는 href 속성을 가지고 있는 a 태그에 적용되는 선택자입니다. 한번 이상 다녀온 링크를 선택할 수 있는 선택자입니다.

부정선택자

Extras

복습해야 할것

Chapter 4

CSS3 단위

크기 단위

크기 단위의 복합사용은 전체 폰트 크기에 절대 크기를 지정하고 각각의 태그에 상대 크기를 지정하는 방법이 많이 사용된다.

* {
    font-size : 12px;
}

h1 { 
    /* font-size : 3.0em; */
    /* font-size : 3.0rem; */
}

값이 0인 경우 단위는 입력하지 않아도 된다.

색상 단위

URL 단위

display 속성

가시속성

display 속성

HTML5 시대가 되면서 다양한 display 속성이 등장. 중요한 속성만 몇개 살펴봄

visibility 속성

visibility: visible

display 속성의 none 키워드와 visibility 속성의 hidden 의 차이

opacity 속성

박스 속성

박스는 레이아웃을 구성할 때 가장 중요한 스타일 속성입니다.

box-sizing

box-sizing은 total width, total height를 계산하는 방식을 바꿈

box-sizing : Content-Box;
box-sizing : Border-Box;

기본은 Content-Box이고 Border-Box로 변경하게 되면

테두리속성 border

테두리속성은 원래 박스 속성이지만 분량이 많은 관계로 별도로 분류함

.box {
    border-width : thick;
    border-style : dashed;
    border-color : black;
}

<!-- short hand -->
.box {
    border : thick dashed black;
}

border-radius

이 속성을 이용하면 테두리가 둥근 버튼을 별도의 이미지 없이 만들 수 있다.

배경 속성

background-image

CSS3부터 여러개의 배경 이미지를 적용할 수 있다.

background-size

이 속성은 css3에서 추가되었으므로 익스플로러 8이하에서는 사용할 수 없습니다.

Note : background-size 속성에 숫자를 띄어쓰기로 구분하는것과 쉼표로 구분하는 것은 다르다. 쉼표로 구분하면 다른 이미지에 각각 적용한다. (너비 높이가 아니라)

background-repeat

background-attachment

안에 컨텐츠가 길어서 스크롤이 생기는 경우 fixed로 설정하면 배경화면이 따라간다. 기본은 scroll이다.

background-position

폰트속성

HTML은 대학에서 원격으로 논문을 제출하고 확인하는 용도로 만들어져서 글자와 관련된 속성이 굉장히 많음.

font-size

font-family

font-style font-weight

참고로 일반 폰트의 두께는 400이고 두꺼운 폰트의 두께는 700입니다. 두께를 지원하지 않는 폰트는 font-weight를 사용해도 두께를 조절할 수 없습니다.

line-height

글자의 높이를 지정하는 기능보다 글자를 수직 중앙 정렬할때 사용합니다.

<div class="button">
    <a href="#" class="font_center">Click</a>
</div>

<button class="button">button</button>

.font_center {
    text-align: center
}

.button {
    width: 150px;
    height: 70px;
    background-color: #FF6A00;
    border: 10px solid #FFFFFF;
    border-radius: 30px;
    box-shadow: 5px 5px 5px #A9A9A9;
}

.button>a {
    display: block;
}

div로 button을 만들었을 때와 button 자체를 사용했을 때가 다름. div로 만들면 정렬이 안되어 있음 수평은 text-align으로 수직은 line-height로 정렬을 해야됨. button으로 만들면 내용이 자동으로 수평, 수직 정렬이 되어 있음

따라서 위 css에서 이렇게 변경하는데 line-height를 div의 height 값과 똑같이 함.

.button > a {
    display: block;
    line-height: 70px;
}

근데 이렇게 하기 싫으면 그냥 flex 사용

text-align

<span>태그는 inline이므로 정렬이 되지 않는다.

text-decoration

링크의 밑줄을 제거하려면

위치 position

{
    position : absolute;
    left : 90px;
    top : 90px;
}

위치 속성과 관련된 공식

overflow 속성

자식 태그가 absolute 속성으 갖고 있다 하더라도 부모태그에서 over-flow처리를 하면 scroll아니 hidden이 된다.

4.8 float 속성

자손에 float 속성을 적용하면 부모의 overflow 속성에 hidden 키워드를 적용합니다.

레이아웃에서 float:left를 사용하게 되면 footer가 붙는 현상이 나타남. 아래와 같이 해결

.wrap {
    /* clear: both; */ /* 이걸 사용해도 됨 */
    overflow: hidden;
}

이것을 One True Layout 방식이라고 부름

그림자

text-shadow

text-shadow : 5px 5px 5px black
             오른쪽 아래 흐림도 색상

box-shadow

box-shadow : 5px 5px 5px black
             오른쪽 아래 흐림도 색상

중첩 그림자는 그림자 속성을 쉼표로 사용해 여러개의 그림자 키워드를 사용할 수 있음

box-shadow : 5px 5px 5px black, 10px 10px 10px orange

벤더 프리픽스

웹브라우저의 최신기능을 사용. border-radius도 처음에는 벤더프리픽스가 붙었지만 이제는 표준이 되어 벤더 프리픽스 없이 사용이 가능하다.

최신 웹브라우저에서는 벤더 프리픽스 없이도 많은 속성을 사용할 수 있으나, 구형 브라우저 환경 지원 여부도 고려해야 하므로 벤더프리픽스를 사용한다.

-webkit-transition: all 1ms ease;
-moz-transition: all 1ms ease;
-ms-transition: all 1ms ease;
-o-transition: all 1ms ease;
transition: all 1ms ease;

벤더가 안붙은것을 가장 마지막에 썼는데 그 이유는 최신 브라우저에서 지원을 하면 가장 마지막 것을 적용하기 위함

그레디언트

css3 이전에는 그레디언트 지원하지 않았음

Chapter 5

레이아웃 구분

웹 폰트

웹 폰트는 사용자가 웹 페이지에 접속하는 순간 폰트를 자동으로 내려받고 해당 웹 페이지에서 사용할 수 있게 만들어주는 기능입니다.

<head>
    <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic" rel="stylesheet">
</head>

{
    font-family: 'Nanum Gothic', sans-serif;
}