블로그 이미지
윤영식
Full Stacker, Application Architecter, KnowHow Dispenser and Bike Rider

Publication

Category

Recent Post

2015. 10. 31. 17:24 HTML5, CSS3/CSS

10월 마지막날 유난히 차가운 공기를 마시며 사당역에서 지하철을 타고 구로디지털단지에서 내렸다. 익숙한 풍경이 한눈에 들어왔고 갈곳의 골목을 헤아려 보지도 않고 찾아갔다. 오늘은 처음으로 CSS강좌를 듣는날이다. CSS 를 강좌로 들어보질 않았고 어떤 내용일지 하나하나 따져보고 싶기 때문에 프론트 앤드 개발을 위해 수강하게 되었다. CSS는 디자인 영역이기도 하지만 개발자 영역에 들어와 함께 고려해야할 사항이다. 총 4일간의 일정으로 CSS 배우게 된다. 실습을 통해 보고 느껴보자. CSS는 사랑. Love is Touch~~~ 




Web Components의 세상


늦어도 5년 후에는 웹 컴포넌트로 통일 된다. 컴포넌트의 구성요소는 HTML, CSS, DOM, JavaScript 이고 이들은 분리해서 생각할 수 없고 개발자는 각 요소를 확실히 알고 가야 한다. 최근 인기있는 프레임워크인 Angular, React, Polymer등의 기본은 웹 컴포넌트이다. CSS는 HTML, SVG 콘텐츠의 시각적 표현을 담당한다. 





CSS Specification


CSS 스펙 진행사항

  - Level1 : 1996.12.17

  - Level2 : 2011.06.07 종료

  - Level3, 4 : 진행중


CSS 스펙 한글버전


W3C는 표준이 아니라 권고(Recommendation)을 사용

  - 표준은 모든 브라우저(5대 브라우저)가 사용해야 표준이 된다.

  - 표준 진행 상태 단계

    WD: 초안

    LC, LCWD: 최종 초안

    CR: 권고 후보

    PR: 권고안 

    REC: 최소 2개 브라우저에서 지원





CSS 룰셋


Selector와 Property 에 값을 설정한다. (참조)




Value 설정

  |, ||, && 사용

  modifier: 정규표현식으로 [] * + ? 기호 사용


그외

  shorthand 사용   

  벤더 식별자(prefix) 사용: -ms- mso- (MicroSoft), -moz- (Mozilla), -o- -xy- (Opera Software), -webkit- (Google Chrome, Apple) - 참조

  @import "xxx.css"; 처럼 뒤에 반드시 ; 세미콜론 넣는다. @안에 @을 넣을 수 없다. 

  Default Style Sheet : selector에 기본 적용된 스타일이 있다. - 스펙

  길이 단위: px, em 이다. 0일 경우 px 붙이기는 옵션





단위


  절대 단위 

    - mm(밀리미터) 

    - cm(센치미터)

    - 1in(인치) === 2.54cm

    - pt(포인트) === 1in/72

    - pc(피카) === 12pt

    - 1px(픽셀) === 0.75pt


 상대 단위

    - em: font-size가 상댓값의 기준 예) font-size em을 작성하면 부모 엘리먼트의 font-size가 기준이 된다. 반응형 웹 사이트의 경우 유용

    - ex: 영문 소문자 x의 높이가 상댓값 기준. x-height라 부름

    - %: font-size 50% 형태로 작성. 부모값 기준

JS Bin on jsbin.com


  



Cascade


케스케이딩은 3가지 스타일시트를 적용하는 규칙이다. 


스타일 시트 원천(origin) 타입

 - Author: 개발자가 작성한 것

 - User: 콘텐츠 사용자가 직접 핸들링 가능

 - User agent: 브라우저 디폴트 스타일시트 적용

   (스펙)


개발자 스타일(Author)

  <link href="xxx.css" rel="sytlesheet" type="text/css">

  <p style="property: value">


사용자 스타일

  - IE에서 적용가능


케스케이딩 사전 준비

  - 스타일을 적용을 위해 먼저 DOM(Document) Tree를 만들어야 한다. 

  - DOM트리를 읽으며 CSS 적용을 위한 박스 모델을 생성(generate)한다. 

    즉, HTML에 DOM tree처럼 CSS는 Box 모델이 있다. HTML/CSS는 둘다 DOM, Box와 같이 오브젝트 모델을 갖는다. 

  - 생성된 박스 모델에 따라 프로퍼티 값 추가

  - 박스 모델

    



엘러먼트에 스타일시트 프로퍼티 적용 우선 순위

  - 밑으로 갈 수록 우선순위가 높음: 되도록 !important는 사용치 말자. 

    1. 브라우저 디폴트 스타일 시트

    2. 사용자 스타일 시트

    3. 개발자 스타일 시트

    4. 개발자 !important

    5. 사용자 !important

  - selector에 따른 적용 순위

    우선 순위 계산 방법에 따라 적용 (참조)

    CSS 스펙에서 #wrap은 id="wrap" 이고, .wrap은 class="wrap"을 표현한다. 

  - 적용 방법

    <link>

    @import

    <style>: head 또는 body 작성가능 

    inline: <p style="xxx">


@import

  - 파일을 분리해서 관리 

  - @import  url("xx.css");





Box Model


박스 모델을 통해 컨텐츠의 위치와 이웃과의 경계를 만든다.  (참조)


- line box

  margin, border, padding, 컨텐츠를 가진 박스생성하고 엘리먼트에 연결(링크)

  DOM트리의 논리적 순서(Logical Order) 중심


- inline box 

  style 중심의 시각적인 순서(Visual Order)로 각 엘리먼트를 정리함


- border-color

  border-<top, right, bottom, left>-color

Border Color on jsbin.com


- border-style

  디폴트 none

JS Bin on jsbin.com


- border-width

  thin, medium, thick

JS Bin on jsbin.com

- border-shorthand

  border-width, border-style, border-color 지정

  TRBL 지정불가

Border Shorthand on jsbin.com


- border-radius

  모서리 둥글게

Border radius on jsbin.com


- padding

  table에서는 패딩은 제외된다. 

  1개 모두

  2개 위/아래, 좌/우

  3개 위/좌/우, 아래

  4개 위/우/아래/좌


- margin, margin-collapse(상쇄) 

  margin-top, margin-bottom, margin-left, margin-right

  2개 이상의 box(엘리먼트)가 연속되어 있을 때 마진이 상쇄된다. 한쪽으로 접힌다. 하나는 10이고 다른 하나가 10이면 20이 아니라 10이 된다. 

  수직(위/아래) 마진 상쇄가 기본이다.  (밑의 값이 마진으로 잡히고 위의 값이 상쇄된다.)

  수평방향은 상쇄하지 않는다. 

JS Bin on jsbin.com


- outline

  자리를 차지 하지 않고 콘텐츠 위에 표현

  width, height에 영향을 주지 않는다. 

  TRBL 지정 불가 

  

- outline-style

  border-style과 유사


- outline-width

- outline-color  

outline on jsbin.com





Formatting 


DOM 트리 구조를 시각적 형태와 구조로 만들려면 규칙이 필요하다. 이를 위한 규칙을 정의한것이 시각적 형태 모델(Visual Formatting Model)이다. 

박스 생성 레이아웃 조건

  - 박스 치수 : w, h

  - 타입: block level, inline level

  - 위치 결정: flow, float 절대 위치

  - DOM 트리에서 엘리먼트 간의 관계 

  - 외부 정보, 예) viewport size, 이미지 본래 사이즈


사용할 프로퍼티 

  - display: 박스 표시

  - position: 박스 위치 

  - float: 박스 정렬

  - clear: float 삭제

  - z-index: 3차원 레이어 


Viewport

  브라우저가 제공하는 window 또는 다른 형태의 스크린 영역, viewport에 다큐먼트의 콘텐츠 표현

  CSS의 Canvas는 정형화된 구조로 렌더링되는 공간을 의미

  뷰포트 사이즈가 변경되면 브라우저는 다큐먼트 레이아웃을 변경

  

포함블록(Containing Block)

  안에 Child 엘리먼트가 들어갈 수 있는 엘리먼트로 박스 위치와 크기는 시각형 가장자리를 기준으로 계산된다. 이때 사각형을 포함 블록이라 한다. 

  - 블록 레벨 엘리먼트 : <p>, <div>

  - 블록 레벨 박스 : display 프로퍼티를 이용. 의도적으로 블록 레벨 박스를 만들고 싶을 경우 display 속성을 이용하는 것이다. 

     display: block, list-item, table 

  - 블록 컨테이너 박스 : 블록 박스로 보자

  - 블록 : 블록 레벨 박스, 블록 컨테이너 박스, 블록 레벨 엘리먼트 3가지를 총칭해 블록이라 한다.  

  * 부모 블록 박스내에 텍스트는 익명 블록 박스로 만든다. 


inline-level box

  <em>, <strong> 인라인 엘리먼트는 새로운 콘텐츠 블록을 형성하지 않고 라인안에 콘텐츠를 분리. 인라인 엘리먼트는 인라인 레벨 박스를 생성한다.  

  display: inline 설정 

  

display

  inline, block, list-item ... 종류가 많음. 기본값 inline 이다. 

  상속 안됨 

formatting on jsbin.com





위치 결정 체계


3가지 체계로 포지셔닝 한다. 

  - Normal Flow: 일반적인 포지셔닝. block level box의 블록 포맷팅. inline-level box의 포멧팅

  - Float : Normal Flow로 포지셔닝한 후 박스를 왼쪽 또는 오른쪽으로 이동

  - Absolute :  지정한 위치로 이동, Normal Flow와 연동안함 


Position

  - 종류: static, relative, absolute, fixed, inherit 

  - static 

    디폴트 값으로 Normal Flow의 일반적 포지셔닝

    top, right, bottom, left 적용 안 됨 

  - relative

    Normal Flow로 박스 위치 계산. 해당 위치에서 상대 offset 값을 구해 포지셔닝, 

    relative 박스의 다음 박스는 relative 박스 공간을 유지한다. 

Position relative on jsbin.com


  - absolute

    TRBL지정위치로 이동

    Normal Flow와 완전히 단절 된다. 

  - fixed 

    absolute와 같은 방법으로 포지셔닝이나 창 스크롤해도 지정한 위치에 고정

Position absolute on jsbin.com

   

  - relative 부모와 absolute 자식을 혼합할 때

    relative 부모는 body가 되어 absolute 자식이 움직인다. 

    이때 offset 기준으로 relative 값이 반영된다. 

Position relative absolute on jsbin.com


  - fixed

    스크롤에도 박스가 그대로 위치한다. 

Position fixed on jsbin.com



Box offset 

  - position static이 아닐 때 지정가능 

  - top, right, bottom, left로 지정: %로 지정 가능

  - 부모의 width 에 대한 %만큼 위치 offset을 한다. 

Box Offset on jsbin.com



float

  - 포함 블록 행을 기준으로 박스를 좌우로 이동한다. 

  - float된 박스가 있으면 겹치지 않고 좌우로 이동한다. 이동할 공간이 없으면 수직으로 이동한다. 

  - float 해제를 위해 clear를 사용한다. 

float on jsbin.com




posted by 윤영식
2015. 9. 6. 17:49 HTML5, CSS3

Selector는 패턴에 매치되는 노드를 추출하는 것이다. Selector를 배워보자 




Selector


패턴사용은 div[class] 이다. 스펙 참조


"querySelector vs querySelectorAll" : finding element

엘리먼트를 추출한다. querySelector는 하나만 찾고, querySelectorAll은 모두 찾아준다. 

DOM Query Selector-1 on jsbin.com


"Selector Attribute, Selector-Pseudo"

li:nth-child 같은 것은 Selector-Pseudo 이다. 





CSS


Cascading Style Sheet. 콘텐츠의 표현. HTML 엘리먼트에 CSS 적용. 모바일에서 SVG의 용도는 Zoom In/Out해도 깨지지 않는 해상도를 지원한다. 


"Rule Set"


CSS를 설정하는 규칙 

className {

  key: value;

}


"HTML 엘러먼트에 스타일 적용 순서"

디폴트 스타일 < 사용자 스타일 < 개발자 스타일

개발자 스타일이 가장 높음.


"Default Style"

<h1>이 <h2>가 큰 것은 디폴트 스타일에서 적용되어 있기 때문이다. (스펙 참조)


"사용자 Style"

브라우저에 스타일 지정이 가능하다. IE에서만 가능 (옵션에서 사용자 스타일 파일을 지정해 주면 된다.) 예로 만일 파란색을 강제로 브라우저레벨에서 노란색으로 보고 싶을 경우 사용한다. 


"개발자 Style"

개발자 Style 에서 !important 사용은 많이 고려한다. 가장 우선하기 때문이다. 


"DOM View는 최종적으로 스타일이 적용된 상태이다."

최종으로 적용된 스타일 추출로 DocumentView, AbstractView 인터페이스가 있다. 


"getComputedStyle() 은 우선순위에 의해 최종적으로 스타일이 적용된 결과값을 준다."

IE는 currentStyle이다. 

DOM CSS compoutedStyle on jsbin.com





Ajax


"Asynchronous JavaScript + XML"

Jesse James Garrett이 2005년 2월 18일 블로그에 썼다. 제목은 A New Application to Web Application으로 웹 애플리케이션이라 말을 처음 거론함. 이전은 마크업으로 말함. 


"JJG의 원문 블로그를 읽자" 

AJAX는 기술이 아니다. = "XHTML/CSS" + "XML/XLST" + "XMLHttpRequest(XHR)" + "DOM" + "JavaScript" 현재는 "XHTML/CSS"는 "HTML5"가 되고, "XML/XLST"는 사용 안한다. 각 요소기술을 AJAX라고 부른다. 

"XMLHttpRequest는 HTTP 통신 오브젝트이다."

비동기 통신을 하여 데이터 송수신 한다. XMLHttpRequest가 Ajax가 아니라 Ajax라 통칭하는 개념의 일부 요소기술이다. 


"Ajax Web Application Model"

비동기로 받은 데이터를 DOM 제어를 통해 반영한다. Web Application이 복잡해 지면서 MVC, MV* 패턴들이 나온다. 



"동기, 비동기 통신의 차이"

동기는 요청을 보낸 후 응답이 오기전까지 사용자의 액티비티를 할 수 없다. 비동기는 요청과 상관없이 사용자 액티비티가 가능하다. 



'HTML5, CSS3' 카테고리의 다른 글

[DOM] 김영보 Document Object Model 이해 - 2  (0) 2015.09.06
[DOM] 김영보 Document Object Model 이해 - 1  (0) 2015.09.05
[HTML5] 이해하기  (0) 2012.09.13
[CSS3] 시작하기  (0) 2012.09.11
posted by 윤영식
2015. 9. 6. 15:29 HTML5, CSS3

피곤할 때는 술 한잔을 하고 자면 풀릴까 하고 두잔을 하고 잤더니 피곤이 풀리기는 커녕 눈꺼풀만 무겁다. 7시 알람이 휴대폰에서 요란하게 울리지만 20분을 뒤척인 끝에 DOM생각에 벌떡 일어나 냉동실에 얼려 놓은 찹쌀떡을 하나 먹고 길을 나썼다. 관악산의 산바람이 시원하게 얼굴을 스치고 반바지 아래로 차가움이 감싼다. 2일차 DOM강의실로 삼양 컵라면 하나를 들고와서 따끈한 국물을 마시고 손놀릴 준비를 한다. 





Event


"다큐멘트에서 발생하는 이벤트를 설정하고 작용한다."

이벤트 설정에는 이벤트 타입이 있다. 이벤트 처리는 핸들러/리스너라 부르지만 리스너가 표준(스펙)용어이다. 캡쳐/버블은 DOM Tree와 관련이 있다. 이벤트의 버블링은 document 밑의 html 객체까지 올라간다. 기본이 이벤트 전파이기 때문에 적절히 방지를 해주어야 한다. 


"스펙을 보자. 이벤트 스펙"

이벤트 전체 스펙을 읽어보자 

Target : 이벤트가 발생한 곳

1, 2, 3 : 이벤트의 발생 Phase



"캡쳐, 버블링"

window부터 캡쳐링 된다. DOM의 path구조를 메모리상에 만들어 놓고 캡쳐/버블링 phase로 찾아간다. 예로 아래와 같이 파란색의 tr을 클릭하면 먼저 밑으로 간 후 위쪽으로 버블링된다. 3번의 버블링은 막을 수 있지만 1번 단계는 막을 수 없다. 왜 버블링을 발생하고 막게 할 수 있을까?


 

                                         그림에 대한 참조 사이트


"이벤트 설정은 element.addEventListener() 이다."

버블/캡쳐가 기본이고 캡쳐링은 모든 리스너가 무시(false) 한다. IE 6,7,8은 attachEvent() 이고 파라미터가 2개이다. 그리고 IE 6,7,8에서는 캡쳐/버블링을 하지 않는다. HTML5는 on을 넣어 이벤트 리스너를 표현한다. 예) onclick


"이벤트 리스너 사용 예제"

clickNode.addEventListener('click', handleClick, false); 소스에서 세번째 파라미터가 false 이면 버블링을 리스너가 처리하고 true이면 캡쳐링을 리스너가 처리한다. 전파(propagation)에 대해 버블링 막기는 event.stopPropagation() 호출한다. 태그에 할당된 이벤트를 막기위해 예로 <a> 태그의 화면 이동을 막기위해 event.preventDefault() 호출한다. 

DOM Event on jsbin.com 


"이벤트 해제"

이벤트 타입과 핸들러까지 해제를 해준다. 즉, 해제시 이벤트 설정과 파라미터를 같게 설정한다. element.removeEventListener, (IE, element.detachEvent)

DOM - Remove Event on jsbin.com


"메모리 누수"

설정한 이벤트를 해제하지 않았을 때 발생한다. unload 이벤트가 발생했을 때 일괄 해제한다. 설정한 이벤트 인식이 필요하다. 이벤트 설정 내역을 별도로 저장한다. 


"리스너 작성 형태"

엘리먼트에 onclick과 같이 작성할 수 있게 HTML5에서 채택함. <input type="button" onclick="handler()"> 이런 형태는 구조와 제어가 혼합되므로 비추! .js파일을 별도로 작성하여 구조와 제어를 분리한다. 

DOM onclick on jsbin.com


"버블링" 

세번째 파라미터가 false 버블링시에 핸들러 작동하고, true이면 캡쳐링시에 핸들러가 작동한다. true, false를 바꾸어 swim을 클릭하면 실행해 보면 캡쳐링할 때는 sports -> swim으로 찍히고 버블링시에는 swim -> sports가 찍힌다. 

JS Bin on jsbin.com


"버블링 방지" 

전파(propagation)에 대한 방지는 버블링시에 가능하고, 캡쳐링시에는 불가능하다. 

JS Bin on jsbin.com


"디폴트 액션 방지"

preventDefault() 호출. IE 경우는 event.returnValue=false로 설정한다. 이벤트 리스너를 설정하면 헨들러가 먼저 동작하므로 디폴트 액션을 막을 수 있다. 

JS Bin on jsbin.com


"이벤트 속성"

type

target : 이벤트를 설정한 엘리먼트 

currentTarget : 버블링 되면 버블링 엘리먼트로 변경 설정됨 





마우스 이벤트


"마우스 이벤트"

UX적으로 더블클릭은 제외시킨다. click은 mouseup, mousedown을 포함한다. 모바일에서는 mousemove를 쓰지말고 touchmove를 통해 하고 움직일때 x/y 좌표값을 계산하는 DOM parsing을 하지 않도록 프로퍼티를 먼저 설정해준다. 사용자의 베터리를 절약해 줘야 한다. 

mousedown -> mouseup -> click 순으로 발생한다. 

DOM Mouse Event on jsbin.com


"마우스 이벤트 프로퍼티"

altKey, ctrlKey, shiftKey, screenX/Y, clientX/Y

DOM Mouse Event Properties on jsbin.com


"마우스 over, out 이벤트는 어디서 들어왔는지 어디로 나갔는지가 중요하다"

어디는 relatedTarget 이다. margin: 20px의 영역은 마우스 over, out에서 제외된다. 즉, 나의 영역이 아니다. 

JS Bin on jsbin.com


"keypress는 되도록 사용하지 말라"

keydown, keyup 에서 input 태그에서 추천단어(suggest)를 보여주려고 할때는 keydown시 계속 누를 수 있으므로 keyup을 잡아준다. Firefox의 한글 사용 경우는 spacebar넣어야 suggest가 된다. keypress는 keydown <-> keyup 사이에 발생한다. 이를 이용해서 Firefox의 제약을 해결할 수 있다. 


"HTML 이벤트"

focus, blur, change, select, load (렌더링되면), unload (브라우저 닫을경우), resize, scroll, reset (form), submit (form)

DOMContentLoaded가 먼저 수행되어 DOM 객체 Tree 구조를 만들어 놓고, 다음으로 img 태그같은 이미지불러오기도 다 끝나면 onload가 불려지고, 다음으로 자바스크립트를 수행한다. 

JS Bin on jsbin.com

 




Mutation 이벤트


이벤트 타입: DOMNodeInserted, DOMNodeRemoved, DOMAttrModified...

해당 이벤트는 새로운 프로젝트에서 사용하지 말라. (MDN 참조) 속성값이 변한것을 인식해야 할 경우 DOMAttrModified 이벤트 타입을 사용할 수 있다. 

DOM Mutation Event on jsbin.com


'HTML5, CSS3' 카테고리의 다른 글

[DOM] 김영보 Document Object Model 이해 - 3  (0) 2015.09.06
[DOM] 김영보 Document Object Model 이해 - 1  (0) 2015.09.05
[HTML5] 이해하기  (0) 2012.09.13
[CSS3] 시작하기  (0) 2012.09.11
posted by 윤영식
prev 1 next