@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
-. 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
No comments:
Post a Comment