Dneirf: HTML & CSS

Showing posts with label HTML & CSS. Show all posts

Monday, December 30, 2013

CSS : Box Model

@Summary
-. CSS는 Box Model을 사용해 요소가 보여지는 방법을 제어함.
-. Box는 콘텐츠 영역, 패딩, 테두리, 마진으로 구성됨.

-. 콘텐츠 영역은 요소의 콘텐츠를 포함함.
-. 패딩은 콘텐츠 영역 주위 시각적인 빈 공간을 생성.
-. 테두리는 콘텐츠와 패딩을 둘러싸며 콘텐츠를 시각적으로 분리시킴.
-. 마진은 콘텐츠, 패딩, 그리고 테두리를 둘러싸며 요소와 요소 사이 공간을 만듬.

-. 패팅과 테두리, 마진은 모두 선택 가능함.
-. 요소의 배경은 콘텐츠와 패딩 밑에 보이며, 마진에는 적용되지 않음.
-. 패딩과 마진의 크기는 pixel 혹은 비율(em, %)로 설정 가능.
-. 테두리의 너비는 pixel이나 keyword(thin, medium, thick)로 설정 가능.
-. 테두리 스타일은 8가지(solid, dashed, dotted, ridge, double, groove, inset, outset)가 있음.
-. CSS는 패딩, 테두리, 마진에 대해 한 번에 모든 방향을 설정하는 속성을 제공.
-. 혹은 방향을 개별적으로 설정하는 것을 허용.

-. border-radius 속성은 테두리에 둥근 모서리를 만들기 위한 것임.
-. line-height 속성을 사용하여 텍스트의 줄 간격(행 간격, leading)을 늘릴 수 있음.
-. background-image 속성으로 배경 이미지를 선택할 수 있음.
-. background-position, background-repeat 속성으로 배경 이미지의 위치와 반복을 설정 가능.

-. class 속성을 사용해 하나의 그룹으로 스타일을 합칠 수 있음.
-. id 속성으로 유일한 요소에 스타일을 제공 가능.
-. CSS에서 id 선택자를 사용하기 위해 '#'를 이용. 예를 들면 #guarantee { ... } 와 같음.

-. HTML에는 여러 개의 CSS를 적용할 수 있음.
-. CSS 속성 정의가 충돌하는 경우 가장 마지막에 있는 스타일 시트가 우선시 됨.
-. <link> 요소의 media 속성을 사용해 'screen', 'print', 'handheld' 등 미디어 장치 선택 가능.
-. CSS3 미디어 쿼리 명세서 : http://www.w3.org/TR/css3-mediaqueries
-. 또는 <Head First Mobile Web: 웹앱으로 진화하는 모바일 웹 개발> 서적 참조.

@Example
-. lounge.html
-. lounge.css

Sunday, December 29, 2013

CSS : Font & Color

@Summary
-. CSS에는 font 제어를 위해 font-family, font-size, font-weight, font-style 속성이 있음.

-. font-family 속성은 공통적인 특징을 공유하는 font의 집합임.
-. 웹을 위한 font-family에는 serif, sans-serif, monospace, cursive, fantasy가 있음.
-. 이 중에서 serif 와 sans-serif 가 가장 일반적임.
-. 웹 페이지 방문자가 보는 font는 방문자의 컴퓨터에 설치된 font에 의존함.
-. font-family CSS 속성에 대체 font를 명시하는 것은 호환성 측면에서 좋은 아이디어임.
-. 그래서 serif 나 sans-serif 등 일반적인 font를 마지막에 위치시키는 것이 좋음.
-. 이렇게 하면 브라우저는 폰트를 찾을 수 없을 경우 적합한 대체 font를 만듬.
-. web font를 정의하기 위해 CSS의 @font-face 규칙을 사용할 수 있음.

-. font-size 속성은 일반적으로 px, em, %, 그리고 keyword로 명시함.
-. em이나 %처럼 font에 대해 상대적인 크기를 사용하는 것이 페이지 유지보수에 좋음.
-. body 요소에 font-size를 keyword로 설정하면 사용자의 요구를 쉽게 반영할 수 있음.

-. font-weight 속성은 텍스트의 굵기를 결정함.
-. font-style 속성은 텍스트 기울임을 위한 italic, oblique 가 있음.

-. 웹 color는 Red, Green, Blue가 합쳐져서 만들어짐.
-. 웹 color를 설정하는 방법으로는 색 이름 명시, RGB값 명시, Hex코드 명시가 있음.

-. 웹 color 참조 : http://en.wikipedia.org/wiki/Web_colors

-. text-decoration 속성은 텍스트 효과를 주는 데 사용됨.
-. 밑줄(underline), 윗줄(overline), 가운데줄(line-through), 무효과(none) 등이 있음.
-. text-decoration을 위해서는 여러 규칙이 적용되지 않고 마지막 한 가지만 선택됨.

@Example
-. journey.css

Saturday, December 28, 2013

CSS Basic

@Summary
-. CSS의 각 규칙은 HTML 요소에 스타일을 제공함.
-. 일반적인 규칙은 하나의 선택자(selector)에 하나 이상의 속성과 값으로 구성됨.
-. 선택자는 어떤 요소가 어떤 규칙에 적용되는지를 명시함.
-. 예를 들면, p { color: gray; } 에서는 선택자 p가 회색의 글자 색을 갖는 규칙이 적용됨.
-. 하나의 규칙은 '{', '}' 안에 놓이며, 각 속성의 정의는 ';'(semi-colon)으로 끝남.
-. ','(comma)로 한 번에 여러 개의 요소를 선택할 수 있음.

-. <style> 태그를 사용하면 HTML 내에서 스타일을 포함할 수 있음.
-. 외부 css 스타일시트와 연결하여 HTML의 스타일을 분리할 수 있음.
-. <link> 요소는 외부 스타일시트를 포함시키는 데 사용됨.

-. 많은 속성은 상속을 받음. 그리고 상속받지 않는 속성도 있음.
-. 예를 들면 <body> 요소에 설정된 속성은 모든 자식 요소들에 상속되어 적용됨.
-. 상속은 모든 자식에게 적용되므로 재정의를 통해 특별한 규칙을 설정할 수 있음.

-. class 속성을 사용하면 선택자의 제한을 벗어나 공통 적용할 항목을 묶을 수 있음.
-. 클래스의 특정 요소를 선택하기 위해 '.'을 사용할 수 있음.
-. 예를 들면, p.greentea와 같이 사용이 가능함.
-. 클래스에 속한 모든 요소를 선택하기 위해 요소 이름을 생략할 수 있음.
-. 예를 들면, .greentea와 같이 사용하면 greentea 클래스의 모든 요소에 적용할 수 있음.
-. 클래스 속성에 여러 개의 클래스 이름을 넣어 여러 클래스에 속하게 할 수 있음.
-. 예를 들면, <p class="greentea raspberry"> 와 같이 사용 가능. 공백으로 구분.
-. CSS 유효성 검사를 위한 Tool도 있음.
-. CSS Validation Service : http://jigsaw.w3.org/css-validator

-. Style 적용에 관한 작고 빠른 지침서
   1) 요소를 선택한 선택자가 있는가? (예를 들면, p { ... })
   2) 상속받는 속성이 있는가? (예를 들면, body { ... })
   3) 클래스가 설정되어 있는가? (예를 들면, <p class="greentea">)
   4) 여러 개의 클래스가 설정되어 있는가? (예를 들면, <p class="greentea, raspberry">)
   5) 아무런 설정값이 없는가? (기본 설정값)

Friday, December 27, 2013

HTML : Making Standard HTML

@Summary
-. HTML5 는 현재 살아있는 HTML 표준임.
-. W3C(World Wide Web Consortium)은 표준 HTML을 정의하는 표준화 기구임.
-. HTML 표준은 하위 호환성을 지키며 새로운 기능이 추가되고 변화되고 있음.

-. doctype 은 사용하고 있는 HTML 버전을 브라우저에 알려줌.
-. <head> 요소에 있는 <meta> 태그는 콘텐츠 타입과 문자 인코딩을 브라우저에 알려줌.
-. <meta> 태그의 charset 속성이 웹 페이지의 문자 인코딩을 브라우저에 알려줌.
-. 대부분의 웹 페이지는 utf-8 인코딩을 사용.

-. W3C 유효성 검사기는 웹 페이지가 표준과 일치하는지 확인하는 온라인 무료 서비스임.
-. 유효성 검사기로 HTML이 적격한지, 요소와 속성의 표준 준수 여부를 확인할 수 있음.
-. W3C Markup Validation Service : http://validator.w3.org/

-. 표준을 지키면?
     * 페이지가 더 빨리 로딩됨.
     * 브라우저 종류에 따른 차이점이 적어짐.
     * CSS도 훨씬 잘 동작함.

-. 기본적인 HTML 표준은?
   * 항상 <!doctype> 으로 시작하라.
   * <html> 요소는 doctype 다음에 반드시 열고 닫아라.
     * <head>와 <body> 외에는 <html> 의 자식이 될 수 없다.
   * <head> 안에는 <meta charset="utf-8">과 같은 문자 인코딩을 반드시 넣어라.
   * <head>안에는 신뢰성이 있다는 표시로 반드시 <title> 요소를 넣어라.
   * 속성을 체크하라. 예를 들면, <img> 요소에는 alt 속성이 필수이다.

HTML : Add images to a web page

@Summary
-. <img> 요소를 사용해 웹 페이지에 이미지를 넣을 수 있음.
-. 브라우저는 HTML 페이지를 읽고 난 후에 웹 서버로부터 각 이미지를 회수하여 보여줌.

-. 웹 페이지에 큰 이미지가 있다면 Thumbnail을 활용하는 것이 속도 면에서 좋음.
-. Thumbnail이란 큰 이미지를 보기 위해 사용자들이 클릭할 수 있는 작은 이미지를 말함.

-. <img> 요소는 인라인 요소임.
-. <img> 요소의 src 속성은 이미지 파일의 경로를 명시함.
-. 같은 사이트의 이미지를 위해 상대 경로를, 다른 사이트의 이미지를 위해 URL을 이용.
-. <img> 요소의 alt 속성은이미지에 대한 의미 있는 설명을 제공함.
-. 만약 해당 이미지를 못 찾을 때 일부 브라우저는 이 설명 내용을 보여줄 것임.
-. 시각 장애인을 위한 스크린 리더기에서도 사용될 수 있음.

-. 경험적으로 웹 페이지의 사진 이미지 크기는 800px 이하가 적당함.
-. 사진 편집을 위한 가장 대표적인 tool은 Adobe Photoshop Element xx(현재 12)임.
-. 브라우저의 웹 페이지 로딩 속도를 고려하여 이미지를 만들어야 함.

-. 웹브라우저가 널리 지원하는 이미지 형식은, JPEG, PNG, GIF가 있음.
-. JPEG은 사진이나 다른 복잡한 이미지에 적합함.
-. PNG나 GIF는 로고나 단색으로 구성된 간단한 그래픽, 선, 텍스트에 적합함.
-. JPEG은 다양한 품질로 압축될 수 있음. 파일 크기와 품질 사이의 최적안 선택이 가능.
-. PNG와 GIF는 투명한 배경이 가능함.
-. PNG와 GIF는 무손실 형식이므로 JPEG보다 보통 파일 크기가 큼.
-. PNG는 GIF보다 투명도 처리가 나음.
-. GIF는 256색으로 한정되어 있지만 PNG는 종류에 따라 지원하는 색상 선택이 가능함.
-. 예를 들면 PNG-24, PNG-16, PNG-8(256색 지원)이 있음.

-. Photoshop Element의Save for Web 대화상자에서 matte 색이라는 것이 있음.
-. 투명한 PNG 또는 GIF 이미지의 가장자리를 부드럽게 하는 적합한 색에 대한 선택임.

HTML : Connecting to the Internet

@Summary
-. 일반적으로 Web에 연결하는 가장 좋은 방법은 호스팅 회사를 찾는 것임.
-. Domain Name은 starbuzzcoffee.com 처럼 유일하며, web site를 식별하는 데 사용됨.

-. FTP(파일 전송 프로토콜)은 작성한 web page를 서버로 전송하는 데 사용됨.
-. Macintosh에서는 'Fetch', Windows에서는 'WS_FTP'를 사용할 수 있음.

-. URL은 Uniform Resource Locator의 약어로, 웹 주소를 의미함.
-. 또는 웹에 있는 자원을 식별하기 위해 사용됨.
-. 일반적인 URL은 protocol + website name + resource path 의 절대 경로로 구성됨.

-. HTTP는 웹 서버와 브라우저 간 웹 페이지 전송 시 사용되는 요청/응답 프로토콜임.
-. FILE 프로토콜은 브라우저가 로컬 컴퓨터 내 페이지를 읽을 때 사용함.

-.'index.html', 'default.htm' 은 기본 페이지를 나타냄.
-.URL이 디렉터리를 명시할 경우 웹 서버는 default page를 브라우저에게 전송함.

-.<a> 요소의 href 속성을 나타낼 때,
-. 같은 사이트에 있는 다른 페이지를 위해서는 상대 경로를 사용하는 것이 좋고,
-. 외부 링크를 위해서는 URL을 사용하는 것이 좋음.

-. page 내 목적지 anker를 만들기 위해 원하는 요소에 id 속성을 사용함.
-. <a> 요소의 href 속성에서 '#'을 붙여 특정 위치에 링크를 걸 수 있음.

-. <a> 요소의 title 속성으로 링크에 대한 설명을 제공할 수 있음.
-. 대부분의 브라우저에서 title 속성은 tool tip의 효과를 가짐.

-. <a> 요소의 target 속성은 새로운 브라우저 창에서 링크를 열기 위해 사용함.
-. target="_blank" 는 항상 새 창(또는 새 탭)으로 여는 것을 의미함.
-. target 속성은 특수한 브라우저 사용자에게는 문제의 소지가 있음을 기억할 것.
-. 예를 들면, 시각 장애인용 브라우저의 스크린 리더기의 경우에는 혼란을 줄 수 있음.

HTML : Making Blocks

@Summary
-. HTML 작성 전에 Web page 구조에 대한 설계가 선행되어야 함.
-. Page 작성 시에는 Block element로 시작하고 Inline element로 마무리 함.

-. 가급적 contents가 의미하는 바를 element를 사용해서 browser에 알려주는 것이 좋음.
-. 항상 contents의 의미와 가장 근접한 element를 사용해야 함.
-. 예를 들면 list가 필요할 때 paragraph를 사용하지 마라.

-. Block Element 들은 독립적이며 그 안에 contents를 가지고 있고 위, 아래 공백이 있음.
-. <p>, <blockquote>, <ol>, <ul>, <li> 는 모두 block element 임.
-. Inline Element 들은 자신을 포함하는 contents의 나머지 부분과 함께 움직임.
-. <q>, <em>, <img> 는 모두 inline element 임.
-. Line Break 를 삽입하고 싶을 때는 <br> element 를 사용.

-. <br> element 는 <img>와 같은 'void' element 임.
-. void element는 contents를 가지고 있지 않음.
-. void element는 오직 tag 하나로만 구성됨.

-. HTML에서 list를 만들기 위해서는 2개의 element가 필요함.
-. 정렬된 list를 위해 <li>와 <ol>을 사용함.
-. 정렬되지 않은 list를 위해 <li>와 <ul>을 사용함.
-. <li> 내부에 <ol>이나 <ul>을 넣음으로써 'nested' list를 만들 수 있음.

-. contents 에 특수문자를 사용할 경우 'character entity(문자 속성)'을 사용할 수 있음.
-. 예를 들면 다음과 같음. http://www.w3schools.com/tags/ref_entities.asp 를 참조.
< 를 표현하기 위해 <
> 를 표현하기 위해 >

HTML : Definition of Hypertext

@Summary
-. <a> element 는 한 페이지에서 다른 페이지로 링크를 걸 때 사용함.
-. <a> element 의 href 속성은 링크의 목적지를 명시함.
-. <a> element 의 contents는 링크를 위한 Label 임.
-. 링크의 Label은 단어(text)도 가능하고 그림(img)도 가능함.

-. 그림 파일 경로가 부정확하면 web page에서 깨져 보임.
-. web site의 파일이나 폴더 이름에는 whitespace(공백)이 있으면 안 됨.
-. web site 제작 초기부터 file tree를 체계화하는 것이 상대경로 관점에서 좋음.

HTML Basic

@Summary
-. HTML과 CSS는 web page를 만드는 데 사용하는 언어임.
-. HTML은 HyperText Markup Language의 약어로 web page를 구조화하는 데 사용됨.
-. CSS는 Cascading Style Sheets의 약어로 HTML의 presentation을 제어하는 데 사용됨.

-. Web Server는 web page를 저장하고 서비스를 제공함.
-. Browser는 web page를 요청하고 회수하며 HTML과CSS를 기초로 contents를 표현함.

-. HTML을 사용할 때 tag를 사용하여 contents를 구조화함.
-. Element(요소) = start tag(시작태그) + contents(콘텐츠) + end tag(종료태그)
-. Void Element(빈 요소)는 contents와 end tag를 포함하지 않음.
-. start tag는 attribute(속성)을 가질 수 있음.
-. end tag에는 '/'가 붙음.

-. web page는 항상 <html> element 안에 <head>와 <body> element 가 있어야 함.
-. <head> element 안에는 web page에 관한 정보가 있음.
-. <body> element 안에 넣는 내용은 browser 에서 볼 수 있음.
-. <style> element 내부에 CSS 규칙을 추가하여 HTML web page 내 CSS를 추가 가능함.
-. <style> element 는 항상 <head> element 내에 위치해야 함.

-. CSS를 사용하여 HTML에 있는 element의 스타일적인 특징을 명시함.

@Grammars
<html></html> : Browser에게 HTML 파일임을 인식하게 함.

<head></head> : Browser에게 Web page에 관한 정보를 알려줌.
    <title></title> : Browser 화면의 제목을 표시함.
    <style></style> : page의 style을 정의함.

<body></body> : Browser에 표시되는 내용을 기록함.
    <h1></h1> : 제목
    <h2></h2> : 부제목
     ...
    <h6></h6> : 부부부부부제목
<p></p> : 문단(paragraph)