웹표준 가이드 HTML5 + CSSS3

웹 표준에 대한 내용 4/5 + 정작 HTML5와 CSS3가 1/5  비율..

첫 회사에서부터 웹 표준대로 코딩 하는 습관이 있었기 때문에, 큰 인상은 없었다.

다만 웹 철학과 원칙, HTML 표준화 과정에 대해 소개 하는 등등의 내용으로 체계적으로 정리해주는 부분은 있다.

-- CSS2.0 및 HTML4 내용 정리 --

1.  label 태그의 for  속성 

2. background-attachment : scroll & fixed

3. 동적선택자 = 가상 클래스 = ':'

   -  css 파일의 뒤쪽에 나올 수록 우선순위가 높기 때문에 작성 [ link > visited > hover > focus > active ]  순서로 작성

   - 우선순위가 가장 높다. ==> 왜? 구체적일 수록 우선순위가 높기 때문.

4. 언어 선택자 = 태그의 lang 속성을 사용 하면 같은 속성값을 가진 요소들의 선택, 디자인 적용 등이 가능

5. DOM Event 

  - Event Capturing : 부모 -> 자식 순서로 이벤트 발생 : addEventListener의 세번째 인수값이  true -> IE는 지원 안함

  - Event Bubbing : 자식 -> 부모 순서로 이벤트 발생 : addEventListener의 세번째 인수값이  false -> 모든 브라우저 지원

  

6. " if(window.함수이름) " 으로 기능 지원 여부를 확인하라

  -> 브라우저를 확인 하는 것 보다 더 간결하고 정확함. --> 버전을 신경쓰지 않아도 되기 때문.

7. css Position 관련 참고 싸이트 

  http://www.positioniseverything.net/

8. 세로 중앙 정렬 관련 참고 싸이트

 http://www.student.oulu.fi/~laurirai/www/css/middle/

 

9. 박스 채우기

  -  자식 요소에는 [display:block] -> 이 부분만 하면, 자식 요소의  영역 전체에 링크가 걸리지 않고 텍스트에만 링크가 생김

  - 부모 요소에는 [border-style:solid; overflow:auto; width:100%] -> 자식요소의 링크 확장을 위해 border-style을 주게 되면,, 자식요소가  block 요소로 부모안에 띄워지게 되면  Height를 계산 할때 자식 요소의 height 는 무시되는 결고가 나오기 때문에, 모든 브라우저에서 float 요소의 높이를 부모 요소 높이 계산에 포함 시킴.

10. 레이아웃

 - 유동 레이아웃(%) 사용시 min-width, max-width, min-height, max-height를 겸하여 사용하면 확장성에 더욱 좋음..

 - 탄력 레이아웃(em)을 사용하면 글자 크기에 비례하여 레이아웃이 결졍 되기 때문에 가상 이상적일 듯..

11. 일진 레이아웃 background-color 까지 채우는 법

  - float layout + height(모든 단의 길이 동일 하도록) + background-colir(각 단의 배경색 다르게)

 -  참고싸이트 : http://positioniseverything.net/articles/onetruelayout/

#container { overflow:hidden;}

#nav{float:left;width:20%;

background-color:red;

padding-bottom:500em;

margin-bottom:500em;}

#content{float:left;width:40em;

background-color:yellow;

padding-bottom:500em;

margin-bottom:500em;}

#advertisements{float:left;width:20%;

background-color:black;

padding-bottom:500em;

margin-bottom:500em;}

--> padding 및 maring의 높이는 : 제일 짧은 단의 높이 + 패딩 길이 > 제일 긴단 높이

12. 폼스타일 : http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/

13.고급 선택자(156p)

 - 인접 선택자 = 형제 요소 가운데, 어떤 요소와 인접한 형제 요소를 기준으로 특정 요소를 선택 할 수 있는 방법

   -> 선택자 1 + 선택자 2(li+li)

   -> IE7 이상 대부분의 브라우저가 지원

- 속성 선택자

  -- selector[attribute name] : 어떤 요소에 특정 속성이 지정된 지에 따라 선택여부 결정, 값은 무관 -> img[alt]

  -- selector[attribute name=vlaue] :  어떤 요소에 지정된 속성 및 값이 일치하는 경우 선택 -> img[alt=photo]

  -- selector[attribute name ~= value]

 -> 따옴표를 사용하지 않음.

  css3.0 : ^=(시작 문자열), $=(끝나는문자열), *=(like 검색) 도 제공.