Background 관련 프로퍼티는 해당 요소의 배경으로 이미지 또는 색상을 정의한다. 1. background-image 프로퍼티 요소에 배경 이미지를 지정한다. background-image 에 복수개의 이미지를 설정할 경우, 먼저 설정된 이미지가 최전면에 출력 된다. 2. background-repeat 프로퍼티 배경 이미지의 반복 지정. 수직, 수평 또는 수직과 수평 모두의 반복을 지정할 수 있다. x축으로만 배경 이미지를 반복할 경우, background-repeat 프로퍼티값에 repeat-x, y축으로만 배경 이미지를 반복할 경우, repeat-y를 설정한다. 3. background-size 프로퍼티 배경 이미지의 사이즈를 지정한다. 배경 이미지의 고유 비율을 유지하기 때문에 설정에 따라 ..

1. display 프로퍼티 display 속성이란? display 태그는 화면에 어떻게 드러나게 할지, 요소 크기를 어떻게 결정할건가를 결정하는 속성이다. 프로퍼티값의 키워드는 다음과 같다. none : 화면에서 사라지며 크기 자체도 차지하지 않는다. block : width가 자신의 컨테이너의 100%가 되게끔, 가로 한 줄을 다 차지한다. 항상 새로운 라인에서 시작한다. 화면 크기 전체의 가로폭을 차지한다. (width: 100%) width, height, margin, padding 프로퍼티 지정이 가능하다. block 레벨 요소 내에 inline 레벨 요소를 포함할 수 있다 block 레벨 요소 예 : div, h1~h6, p, ol, ul, li, hr, table, form ... inli..

Box는 콘텐츠(Content), 패딩(Padding), 테두리(Border), 마진(Margin)으로 구성된다. 브라우저는 박스 모델의 크기(dimension)와 프로퍼티(색, 배경, 모양 등), 위치를 근거로 하여 렌더링을 실행한다. 웹디자인은 콘텐츠를 담을 박스 모델을 정의하고, CSS 프로퍼티를 통해 스타일(배경, 폰트와 텍스트 등)과 위치 및 정렬을 지정하는 것이라고 할 수 있다. content 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역이다. width, height 프로퍼티를 갖는다. padding 테두리(Border) 안쪽에 위치하는 요소의 내부 여백 영역이다. padding 프로퍼티 값은 패딩 영역의 두께를 의미하며 기본색은 투명(transparent)이다. 요소에 적용된 배경..

CSS 프로퍼티에는 키워드, 크기 단위, 색상 표현 단위 등의 특정 단위를 갖는 값을 지정한다. 1. 키워드 각 프로퍼티에 따라 사용할 수 있는 키워드가 존재한다. 예를 들어 display 프로퍼티의 값으로 사용할 수 있는 키워드는 block, inline, inline-block, none이 있다. 2. 크기 단위 cm, mm, inch 등의 단위도 존재하나 CSS에서 사용하는 대표적인 크기 단위는 px, em, %이다. (px은 절대값 / em, %는 상대값) 대부분 브라우저의 폰트 사이즈 기본값은 16px, 1em, 100%이다. 프로퍼티 값이 0인 경우, 단위를 생략할 수 있다. px 픽셀(화소) 단위이다. 1px은 화소 1개 크기를 의미한다. 픽셀은 디바이스 해상도(resolution)에 따라 ..

CSS(Cascading Style Sheets)는 HTML이나 XML과 같은 구조화 된 문서를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어이다. 즉, CSS는 HTML의 각 요소(Element)의 style(design, layout etc)을 정의하여 화면(Screen) 등에 어떻게 렌더링 하면 되는지 브라우저에 설명하기 위한 언어이다. HTML5 이전 버전의 HTML에는 style을 컨트롤할 수 있는 태그(font, center etc)가 존재해 CSS가 없이도 어느 정도의 스타일 표현이 가능했으나 정보와 구조를 담당하는 HTML의 본연의 역할과 동떨어진 기능까지 추가되어 복잡하고 혼란스러운 언어가 되어 버렸다. HTML5에서는 HTML은 정보와 구조화, CSS는 Styling의 ..

CSS 문서에서 style을 적용하고자하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일을 정의하는 것이다. 복수개의 셀렉터를 연속하여 지정할 수 있으며 쉼표( , )로 구분한다. 1. 범용 선택자 (Universal Selector) 문서에 있는 모든 요소에 대해 스타일을 적용한다. 전체 속성을 리셋하고 다시 지정해주고싶을 때 사용. 2. 타입 선택자 (태그 셀렉터) 지정된 태그명을 가지는 요소를 선택한다. 3. class 선택자 : . class 어트리뷰트 값을 지정하여 일치하는 요소를 선택한다. class 어트리뷰트 값은 중복될 수 있다. ex) .upper {} , h1.upper {} 4. id 선택자 : # id 어트리뷰트 값을 지정하여 일치하는 요소를 선택한다. id 어트리뷰트 값은..