1. list-style-position으로 목록 지정하기목록이 지정된 블록 영역의 "안쪽(inside)" 혹은 "바깥쪽(outside)"에 블릿을 표현합니다. 다음의 예제에서 그 결과를 확인할 수 있습니다. insidelist item1list item2list item3outsidelist item1list item2list item3 2. list-style-image으로 이미지 블릿 지정하기"list-style-image" 속성은 블릭을 이미지로 표현할 수 있게 하는데, 그 이미지의 위치를 섬세하게 지정할 수는 없기 때문에 보통 실무자들은 "background" 속성을 활용하는 편입니다. "list-style-image" 속성을 사용할 경우 불러 올 이미지의 경로는 "url()"로 지정합니다. l..

1. list-style-type으로 목록 타입 지정하기목옥에는 과 이 있습니다. "비순차적"인 목록은 항목 앞에 disc, circle, square 형태의 블릿(bullet) 표시가 생깁니다. "순차적"인 목록은 각 항목 별로 숫자가 붙는데, 알파벳이나 로마숫자로 변경할 수도 있습니다. css에서는 , 관계없이 모든 형태의 블릿과 넘버가 가능합니다.1-1. 비순차적 목록(Unordered List, ul) 타입 지정하기 이때 지정할 대상은 개별 항목인 보다는 모체에 해당하는 이나 요소에 지정하는 것이 좋습니다. 이와 같은 타입들은 각 항목을 꾸미기 위한 것이기보다 항목을 그룹화(Grouping)하려는 목적이 더 크기 때문입니다. 1-2. 순차적 목록(Ordered List, ol) 타입 지정하기요소를..

1. 글자 스타일 지정하기글자를 기울이는 방법으로 "font-style" 속성을 사용합니다. 기울이는 값은 "italic(기울임)"과 "oblique(비스듬하게)"가 있으며, 기울어진 글자를 바로 세울 때에는 "nomal"을 적용합니다.1-1. 기울이는 값은 "italci"과 "obliique"가 있습니다. 1-2. , 요소 등은 원래 기울어진 형태로 표현됩니다. font-style 속성에 "nomal" 값을 지정함으로써 해당 요소의 글자를 바로 세울 수 있습니다. 2. 글자의 색상 설정하기"color"속성으로 글자의 색상을 지정합니다. 다음 예제는 요소의 글자에 색상을 지정했습니다.

1. CSS로 지정하는 길이의 단위 알아보기CSS에서 지정하는 길이값의 단위는 문서가 표현되는 매체의 종류(인쇄물/모니터)에 따라 달라질 수 있습니다. 인쇄용이라면 "절대값"과 관련된 단위인 "in(인치), cm(센티미터), mm(밀리미터), pt(포인트), pc(파이카)" 등을 적용하고 모니터(또는 스크린)용이라면 "em, ex, px, %" 등의 "상대값"을 적용합니다. 웹작업에서는 주로 상대값으로 지정하는 것이 효과적입니다. HTML5에서는 "ren과 ch"가 추가됐고, 뷰포트(viewport)의 백분율 길이인 "vw, vh, vmin, vmax"등이 추가됐습니다. 1-1. 절대값에 해당하는 단위는 in, cm, mm, pt, pc 등이 있는데, 이 값들의 길이는 다음과 같습니다. 1in = 96i..

1. CSS의 값을 표현하는 규칙들1-1. CSS로 표현하는 색상값 알아보기글자와 배경의 색상을 지정할 때 그 값으로 "16진수를 이용한 헥사표기법, 색상의 키워드(이름)를 입력하는 방법, RGB의 범위 값 입력 방법"등을 사용할 수 있습니다. HTML5에서는 "색조/채도/명도 입력"과 "투명도 추가"방법이 도입됐습니다. ex1) "16진수 표기법"은 "#"으로 시작해서 R(red), G(green), B(blue)에 해당하는 색상값을 16진수로 연이어 입력합니다. 각 16진수는 2자리로 표현되며 "#rrggbb"의 형식이 되는데, 각 값들이 반복되는 값일 경우 "#rgb"의 형식으로 한 자리씩 생략 가능합니다.#ffddbb ☞ #fdb 앙큼한유채`S 일상 Story ex2) "색상 키워드"를 입력하는 ..

1. CSS는 적용할 대상인 선택자(selector)를 지정해야 하고, 중괄호({, })로 감싼 영역에 속성(Attribute)과 값(value)을 작성합니다. 속성은 얼마든지 작성할 수 있으며 '세미콜론(;)'으로 구분합니다. 선택자(selector)에는 적용하고자 하는 요소의 태그명, 클래스 명, 아이디명 등을 지정할 수 있습니다. selector{Attribute: value;} 1-1. 각 요소에 직접 적용하는 CSS 각 HTML 시작 요소에 직접 CSS를 적용할 수 있습니다. 이방법은 웹 표준의 관점에서 본다면 아주 나쁜 방법인데요, 각 요소마다 스타일을 적용한다는 것을 구조를 작성하는 HTML과 표현을 담당하는 CSS를 분리해야 한다는 웹 표준 규정을 무시하는 것이기 때문입니다. 그럼에도 불구..