CSS 의 기본설명

1. CSS의 기본규칙

선택자 { 속성:값; } / 세미콜론 생략가능하나 쓰는 것을 권함 ※ 기본사용 font{color:#fff;} / 복수사용 div,p,span{color:#000;}

2. 스타일시트 참조 방법

- 개별속성 :

- style요소 : - 외부 스타일시트 참조 : < link rel =" stylesheet" type ="text/css" href ="/Common/Css/M_setup.css" /> - @import로 외부 스타일시트 참조 : - xml-stylesheet로 외부 스타일시트 참조 : 외부 스타일을 참조할때는 항상 스타일 시트 언어의 MIME타입을 지정해 주도록 하자 [text/css]

3. 스타일시트의 우선순위

p{color:Black} p.attn{color:Red} p#attn1{color:Purple} 와 같은 스타일시트는 개별성이 높은 스타일을 우선적으로 적용한다. 따라서 p#attn1{color:Purple} > p.attn{color:Red} ＞p{color:Black}으로 우선순위가 결정된다.

4. Class와 ID

- class 선택자는 문서 안의 복수의 요소에 스타일을 적용할 때 사용 (선택자에[.], 지정안함, class이름으로 식별) -ID 선택자는 문서 안의 단 하나의 요소에 스타일을 적용할 때 사용 (선택자에[#], ID명을 붙여 식별)

모바일웹에서의 필수 Meta 태그 & CSS 속성

< meta http-equiv ="Content-Type" content ="text/html;charset=utf-8" /> -> 웹문서 언어를 utf-8로 설정 (다국어지원이 가능함) 스타일 적용대상이 충돌하는 경우도 있으므로 적용 < meta name ="viewport" content initial-scale : 초기의 확대 비율 maximum-scale : 최대 확대 비율 ="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" /> -> 모바일 웹브라우저의 기본 화면 크기 및 확대/축소 배율등을 정하는 모바일 웹사이트 및 웹앱을 만들시 제일 중요한 Meta태그 width : 화면 가로 사이트 (device-width로 폰의 크기로 자동지정) user-scalable : 사용자가 Zoom기능 사용 제어(no일 경우 Zoom기능이 disable) @charset “UTF-8 -webkit-text-size-adjust : none 모바일 사파리브라우저는 텍스트 Block 의width에 맞춰(즉, 뷰포트가 변할시) 텍스트의 크기를 자동으로 조절한다. 이때 -webkit-text-size-adjust를 이용해 텍스트의 크기를 고정 또는 원하는 대로 조절할 수있다.

auto : 기본값. 화면의 폭에 맞춰 텍스트의 크기를 자동으로 조절 none : 폰트의 자동크기변환을 막음.

모바일 웹에서는 폰트크기도 레이아웃 구성에 간접 영향을 주는 요소가 될수 있으므로 일반적으로 none으로 설정.

n% : 폰트크기를 지정된 사이즈로 변경함.

레이아웃

Div란?

Division의 준말로 구역, 지역을 나타내는 블록레벨 가장 기본적으로 레이아웃의 박스를 담당함.

Top TopMenu Body Bottom

사용된 CSS 용어정리

1. margin, padding속성

- margin속성은 박스의 바깥부분에 해당된다. - margin의 속성에는 margin-top, right, bottom, left가 있다. - margin의 값을 일괄 지정하기 값이 한 개이면[상하좌우], 값이 두 개면[상하, 좌우], 값이 세 개면[상, 좌우, 하], 값이 네 개면[상,하,좌,우] - padding속성은 박스의 안쪽부분에 해당된다. - padding의 속성에는 padding-top, right, bottom, left가 있다. - padding의 값을 일괄 지정하기 값이 한 개이면[상하좌우], 값이 두 개면[상하, 좌우], 값이 세 개면[상, 좌우, 하], 값이 네 개면[상,하,좌,우]

2. border속성

- border속성은 박스의 테투리를 지정한다. [border:1px] - border의 속성에는 border-top, right, bottom, left가 있다. - 값 : thin, medium, thick, 길이(px) - border의 값을 일괄 지정하기 값이 한 개이면[상하좌우], 값이 두 개면[상하, 좌우], 값이 세 개면[상, 좌우, 하], 값이 네 개면[상,하,좌,우] - border의 스타일(style) 관련속성 [solid] 값 : none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset - border의 색(color) 관련속성[ #000;] 값 : 색, transparent

사용된 CSS 용어정리

3. position속성

-값 : static, relative, absolute, fixed -기본값 : static positon:static : 일반적인 배치 (top, right, bottom, left)의 속성을 설정해도 적용되지 않는다. position:relative : 상대적인 배치, 본래의 위치에서 상대적으로 이동되어 위치된다. (top,right,bottom,left)의 속성이 지정되며, 뒤에 오는 요소의 박스는 이 박스가 본래 위치에서 이동되지 않은 것으로 여겨진다. position:absolute : 절대적인 배치, (top,right,bottom,left)의 속성이 지정되며, 뒤에 오는 요소의 배치에 영향을 주지 않고 margin을 설정하여도 다른요소의 margin과 상쇄되지 않는다. poition:fixed : 고정배치 (absolue와 유사하다) 하지만 틀린점은 scroll바를 내렸을 때 fixed로 셋팅된 속성은 스크롤을 따라 다시 해당 하는 자리에 위치한다는 점이다.

4. width속성, height속성

- 속성 : width - 값 : 길이, %, auto - 기본값 : auto - 속성 : height - 값 : 길이, 퍼센테이지, auto - 기본값 : auto 길이 : 내용영역의 폭 또는 높이의 고정값이다. 마이너스 값은 지정할 수 없다. %: 내용영역의 폭 또는 높이를 포함블록에 대한 %로 지정한다. 마이너스 값은 지정할 수 없다.

사용된 CSS 용어정리

5. Display속성

-값 : inline,block,list-item,run-in,compact,marker,table,inline-table,table,table-row-group,table-header-group, table-footer-group, table-row,table-column-group,table-column,table-cell,table-caption, none - 기본값 : inline display: block : 그요소를 블록박스로 만든다. [줄바꿈 O, 상,하 margin과 padding속성 O, width와 height사용 O] span1 span2 span3 display: inline: 그요소를 한 개 이상의 인라인박스로 만든다. [줄바꿈 X, 상,하 margin과 padding속성 X, width와 height사용 X] span1 span2 span3 display:inline-block : inline으로 정렬 된 것들이 block속성을 가지고 정렬된다. (block형태로 만들지만, 자체 속성은 inline이다.) : text-align:center; span1 span2 span3 ※ display:inline은 서체의 종류 크기에 영향을 받기 때문에 메뉴 정렬에는 적절하지 않다.

display: table관련속성 : 그 요소를 테이블 관련 요소와 비슷한 형태로 만든다. ※ div코딩시 가운데 정렬하는 것이 굉장히 힘들다 이런때에 table관련 속성을 사용하면 간단하게 해결된다. table코딩시에 vertical-align:middle이 부분을 적용해야 하는대 사용하기 위해서는 아래와 같이 사용하면 된다.

사용된 CSS 용어정리

DIV A DIV B 이 Text를 세로로 가운데 정렬 div A의 속성을 display:table로 지정 div B의 속성을 display:table-cell로 지정하면 vertical-align이 지정이 돼서 왼쪽의 화면과 같이 나옴. .div A {display:table} .div B {display:table-cell; vertical-align:middle} display: none : 그 요소의 박스를 생성하지 않고, 자식 요소에도 박스를 만들지 않는다. 따라서 그 요소는 시각적으로 표시되지 않는다.

6. float속성, clear속성

-박스 이동, 정렬(float 속성) -값 : left, right, bottom -기본값 : none; float:left : 요소의 왼쪽으로 float된 블록 박스를 만든다. float:right : 요소의 오른쪽으로 float된 블록 박스를 만든다. float:none : 요소를 float처리하지 않는다. - 속성 : clear - 값 : left, right, none, both - 기본값 : none clear:none : float에 대하여 박스의 위치를 제약하지 않고 float는 계속유효, float는 해제되지 않는다. clear:left : 왼쪽으로 float된 박스보다 아래에 새로운 박스를 생성하여 표시, 왼쪽 float해제 clear:right : 오른쪽으로 float된 박스보다 아래에 새로운 박스를 생성하여 표시, 오른쪽 float해제 clear:both : 좌우로 float된 박스보다 아래에 새로운 박스를 생성하여 표시, 좌우 양측 float해제

사용된 CSS 용어정리

9. z-index 속성

- 속성 : z-index - 값 : auto, 정수 - 기본값 : auto z-index:auto : 박스의 겹쳐지는 순서는 부모 요소와 같다. 새로운 순서를 지정하지 않음 z-index : 정수 : 박스의 겹쳐지는 순서를 명시하며, 기준이 되는 0으로 자동지정.

값이 큰 박스가 작은 박스보다 항상 앞에 표시된다. 마이너스 값도 지정이 가능

10. 폭과 높이의 최소값과 최대값 (min,max-width, min,max-height)

- 속성 : min-width, max-width - 값 : 길이, %, auto, inherit - 기본값 : auto 길이 : 내용영역의 폭의 최소값 또는 최대값을 고정값으로 지정한다. 마이너스 값은 지정할 수 없다.. %: 내용영역의 폭의 최소값 또는 최대값을 포함블록의 폭에 대한 %지정. 마이너스 값은 지정할 수 없다. auto : 내용영역의 폭을 제한하지 않는다. max-width 속성에만 지정 가능하다.

11. 인라인박스나 칸의 수직위치 (vertical-align 속성)

- 속성 : vertical-align - 값 : top, text-top, middle, bottom, text-bottom - 기본값 : baseline middle : 가운대정렬 text-top : 인라인박스의 윗변을 부모 요소의 글꼴의 윗변에 정렬한다. text-bottom : 인라인박스의 아랫변을 부모 요소의 글꼴의 아랫변에 정렬한다. top : 윗변정렬 bottom : 아랫변정렬

사용된 CSS 용어정리

12. Background속성

배경색 (background-color 속성) - 속성 : background-color - 값 : 색, transparent - 기본값 : transparent 색 : 배경색을 RGB값, 16진수값 또는 키워드로 지정한다. transparent : 투명하게 보여 부모 요소의 배경이 비친다.

배경이미지 (background-image 속성) - 속성 : background-image - 값 : url, none -기본값 : none url : 배경 이미지를 url() 함수로 지정한다. none: 배경 이미지를 사용하지 않는다. 배경이미지반복(background-repeat속성) - 속성 : background-repeat - 값 : repeat, repeat-x, repeat-y, no-repeat - 기본값 : repeat 이 속성은 요소의 배경 이미지가 반복되는 방향을 지정한다. repeat : 수평과 수직으로 반복된다. repeat-x : 수평으로 반복된다. repeat-y : 수직으로 반복된다. no-repeat: 반복하지 않고 한 번만 표시한다.

사용된 CSS 용어정리

배경이미지의 이동, 고정 (background-attachment 속성) - 속성 : background-attachment - 값 : scroll, fixed -기본값 : scroll 이 속성은 배경 이미지가 요소와 함께 스크롤될지 안될지 결정한다. 대부분 body에 적용한다. scroll : 배경이미지가 문서의 스크롤과 함께 이동한다. fixed : 고정되도록 지정한다. 브라우저 표시영역에 대해서 고정된다. 배경이미지의 초기 위치 (background-position 속성) - 속성 : background-position - 값 : 퍼센테이지, 길이, top center bottom, left center right -기본값 : 0% 0% 이 속성은 요소의 배경 이미지의 시작 위치를 지정한다. 이 속성은 배경의 반복이 시작되는 지점이나, 반복되지 않으면 이미지 자체의 위치를 나타낸다. 백분율 값은 그 요소 내부의 저점뿐만 아니라, 원래 이미지 자체의 동일한 지점도 정의한다. 백분율 : '백분율(x축) 백분율(y축)' 쌍으로 수평(x축) 위치와 수직(y축) 위치를 지정한다. 길이 : '길이(x축) 길이(y축)' 쌍으로 수평(x축) 위치와 수직(y축) 위치를 지정한다. 0% 0% : 맨위 왼쪽 | 50% 0% : 맨위 중앙 | 100% 0% : 맨위 오른쪽 0% 50% : 왼쪽 중앙 | 50% 50% : 중앙 중앙 | 100% 50% : 오른쪽 중앙 0% 100% 바닥 왼쪽 | 50% 100% 바닥 중앙 | 100% 100% 바닥 오른쪽 배경관련 속성의 일괄지정 (background 속성) - 속성 : background -값 : background-color,background-image,background-repeat,background-attachment,background-position 이 속성은 배경과 관련된 background-color, background-image, background-repeat, background-position, background attachment, 속성을 한꺼번에 지정할 수 있는 단축 속성이다. 값에는 배경관련 속성의 값을 공백으로 구분하여 복수 지정할 수 있 고, 순서에 구애받지 않으며, 일부 생략 가능하다.

사용된 CSS 용어정리

13. font속성 글꼴이름(font-family속성) - 속성 : font-family - 값 : [ [<글꼴 이름> | <대표 글꼴>],]*[<글꼴 이름> | <대표 글꼴>] - 기본값 : 브라우저에 의존 이 속성은 요소에 특정 글꼴이나 대표 글꼴을 지정한다. 특정 글꼴은 사용자의 시스템 환경에 의존하므로, 대표 글꼴을 반드시 지정하 길 권장한다. 브라우저에 따라 쉽표가 아닌 공백(space)으로 글꼴 이름을 구분할 수 있으므로, 공백을 갖는 글꼴 가족 이름들은 따옴표로 묶어야 한 다. (예: "맑은 고딕") 사용자의 시스템에 설치되지 않은 글꼴을 대비해서, 다양한 글꼴 이름을 순서대로 지정한다. 첫번째 지정한 글꼴이 사용자 시스템에 설치되어 있으면, 해당 글꼴이 출력된다. 그렇지 않으면, 두번째 지정한 글꼴을, 그도 아니면 세번째 글꼴을 출력한다. 만일 지정한 글 꼴이 모두 설치되지 않았다면, 브라우저에서 지정한 기본 글꼴이 적용된다. 글꼴 이름 : 글꼴 이름을 지정한다. 글꼴 이름은 쉼표(,)로 구분한다. 대표 글꼴 : 'serif', 'sans-serif', 'cursive', 'fantasy', 'monospace'의 대표 글꼴을 지정한다. 대표 글꼴 이름은 키워드이므로, 따옴표로 묶으면 안된다. 글꼴 스타일 (font-style 속성) - 속성 : font-style - 값 : nomal, italic, oblique - 기본값 : nomal 이 속성은 요소의 글꼴 스타일을 지정한다. 구체적으로는 보통체(nomal), 이탤릭체(italic), 사체(oblique)의 한 값을 지정할 수 있다. nomal : 정상적인 형태를 지정한다. italic : 이탤릭체로 분류된 글꼴을 지정한다. 이탤릭체가 사용 불가능 할때는 사체로 분류된 글꼴을 선택한다. oblique : 사체로 분류된 글꼴을 지정한다. 사체가 사용 불가능 할때는 이탤릭체로 분류된 글꼴을 선택한다.

사용된 CSS 용어정리

글꼴 변형 (font-variant 속성) - 속성 : font-variant - 값 : nomal, small-caps - 기본값 : nomal 이 속성은 요소의 영어 알파벳 소문자를 작은 크기의 대문자(small-cap)로 변경한다. nomal : 기본 형태로 지정한다. small-caps : 작은대문자 글꼴로 지정한다. 소문자를 크기를 유지하면서 대문자로 변경한다. 글꼴 굵기 (font-weight 속성) - 속성 : font-weight - 값 : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit - 기본값 : nomal 100 ~ 900 : 100~900까지 100의 배수를 지정한다. '100'은 가장 얇고, '900'은 가장 두껍다. lighter : 더욱 얇게 지정한다. '100'과 같으나 글꼴에 의존하므로, 보통 '400'으로 표현된다. nomal : 보통 두께를 지정한다. '400'과 같음. bold : 두껍게 지정한다. '700'과 같음. bolder : 더욱 두껍게 지정한다. '900'과 같으나 글꼴에 의존하므로, 보통 '700'으로 표현된다. 글꼴 크기 (font-size 속성) - 속성 : font-size - 값 : <절대 크기> | <상대 크기> | <길이> | <백분율> - 기본값 : medium 이 속성은 요소의 글꼴 크기를 지정한다. 절대 크기, 상대 크기, 백분율으로 크기를 지정할 수 있으나, 브라우저는 px로 크기를 계산하 여 출력한다. 현재 브라우저별로 기본 글꼴 크기가 다르기 때문에 절대단위 이외의 단위를 지정하면 브라우저에 따라 의도한 크기대로 표시되지 않 는 경우가 있고 레이아웃에까지 영향을 미치기도 한다. 상대단위 'em' 이나 'ex' , '절대사이즈' 로 지정가능한 키워드 펴센테이지를 사 용하자.

사용된 CSS 용어정리

글꼴관련 속성의 일괄지정 (font속성) - 속성 : font-variant - 값 : nomal, small-caps 이 속성은 요소의 영어 알파벳 소문자를 작은 크기의 대문자(small-cap)로 변경한다. nomal : 기본 형태로 지정한다. small-caps : 작은대문자 글꼴로 지정한다. 소문자를 크기를 유지하면서 대문자로 변경한다. 글꼴 색 지정 (color속성) - 속성 : color - 값 : 색 - 기본값 : 브라우저에 의존 (255, 0, 255) : RGB값으로 지정한다.

#000000 : 16진수값으로 지정한다.

Red : 특정 키워드값으로 지정한다.

사용된 CSS 용어정리

14. text속성 들여쓰기(text-indent 속성) - 속성 : text-indent - 값 : <길이> | <백분율> - 기본값 : 0 이 속성은 요소의 첫 번째 행의 들여쓰기를 지정한다. 음수값은 허용되지않는다. 음수값을 적용하면 첫번째 행이 요소 범위에서 튀어나온다. 길이 : 길이를 지정한다. 음수를 지정하면 내어쓰기가 된다. 퍼센테이지 : 백분율(%) 값을 지정한다. 부모 요소를 기준으로 계산된다. 텍스트 정렬 (text-align 속성) - 속성 : text-align - 값 : left | right | center | justify | <문자열> - 기본값 : 브라우저와 기본 스타일 참조 이 속성은 요소가 포함한 인라인 요소의 수평 정렬을 지정한다. 주로 글자의 수평 정렬을 지정할 때 사용하며, 요소 안에 포함한 이미지나 인풋 박스나 라디오 버튼 같은 폼 요소와 같은 인라인 요소 의 수평 졍렬도 지정할 수 있다. 블록 요소의 수평 정렬은 margin-left, margin-right 속성으로 지정한다. left : 왼쪽으로 정렬하도록 지정한다. right : 오른쪽으로 정렬하도록 지정한다. center : 가운데로 정렬하도록 지정한다. justify : 좌우양쪽으로 정렬하도록 지정한다.

사용된 CSS 용어정리

텍스트 장식 (text-decoration 속성) - 속성 : text-decoration - 값 : none | [ underline || overline || line-through ] - 기본값 : none 이 속성은 요소의 글자에 underline이나 overline 등의 꾸밈을 지정한다. none : 글자의 꾸임을 지정하지 않는다. 기본 형태로 출력됨. underline : 글자의 밑에 줄을 지정한다. overline : 글자의 위에 줄을 지정한다. line-through : 글자의 가운데에 줄을 지정한다.

대문자와 소문자 변환 (text-transform 속성) - 속성 : text-transform - 값 : capitalize | uppercase | lowercase | none - 기본값 : none 이 속성은 요소 글자의 대/소문자를 전환한다. capitalize : 단어의 첫번째 글자를 대문자로 지정한다. uppercase : 단어의 모든 글자들 대문자로 지정한다. lowercase : 단어의 모든 글자들 소문자로 지정한다. none : 변환하지 않는다.

사용된 CSS 용어정리

15. 텍스트 글자간격 (letter-spacing 속성 )

- 속성 : letter-spacing - 값 : normal | <길이> - 기본값 : normal 이 속성은 요소의 글자 사이의 공백의 크기(자간)를 지정한다. 음수 길이값을 지정할 수 있으나, 텍스트를 인식하는데 장애를 줄 수 있기 때문에 사용에 신중해야 한다. normal : 기본 간격을 지정한다. 브라우저가 텍스트를 양 끝으로 정렬하려고 문자간격을 조정하는 경우가 있다. 길이 : 길이를 지정한다. 이 길이는 글자 사이의 간격에 추가

16. 텍스트 단어간격 (word-spacing 속성)

- 속성 : word-spacing - 값 : normal | <길이> - 기본값 : normal 이 속성은 요소에 포함된 단어 사이의 공백의 크기(단어간/어간)를 지정한다. 단어란 공백문자(white space)에 둘러싸인 문자열을 의미 한다. (예: "word spacing"의 단어는 "word"와 "spacing" 2개며, "word-spacing"의 단어는 "word-spacing" 1개다.) 공백문자의 출력 방식은 white-space 속성으로 지정할 수 있다. normal : 기본 간격을 지정한다. 길이 : 길이를 지정한다. 이 길이는 글자 사이의 간격에 추가

17. 공백문자 처리방법 (white-space 속성)

- 속성 : white-space - 값 : normal | pre | nowrap - 기본값 : normal 이 속성은 요소의 공백문자를 어떻게 다룰지 지정한다. normal : 정상적으로 출력하도록 지정한다. 연속 공백과 줄바꿈을 통합한다. pre : 연속 공백와 줄바꿈을 통합하지 않고, 원문 그대로 출력하도록 지정한다. (엔터) nowrap : 연속 공백은 통합하지만, 줄바꿈은 통합하지 않도록 지정한다.

사용된 CSS 용어정리

15. list-style속성

목록스타일 (list-style-type 속성 ) - 속성 : list-style-type - 값 : none | circle | disc | square | armenian | decimal | decimal-leading-zero | georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman - 기본값 : disc none : 목록 스타일을 사용하지 않는다. circle : 뚫린원 모양의 스타일을 사용한다. disc : 채워진원 모양의 스타일을 사용한다. square : 채워진 사각형 모양의 스타일을 사용한다. armenian : 아르마니아 숫자 스타일을 사용한다. decimal : 1부터 시작하는 십진수 스타일을 사용한다. decimal-leading-zero : 01부터 시작하는 십진수 스타일을 사용한다. georgian : 그루지아 숫자 스타일을 사용한다. lower-alpha : 알파벳 소문자 스타일을 사용한다. lower-greek : 고대 그리스 문자의 소문자 스타일을 사용한다. lower-latin : 라틴어의 소문자 스타일을 사용한다. lower-roman : 로마숫자의 소문자 스타일을 사용한다. upper-alpha : 알파벳 대문자 스타일을 사용한다. upper-latin : 라틴어의 대문자 스타일을 사용한다. upper-roman : 로마숫자의 대문자 스타일을 사용한다. 목록 스타일 이미지 (list-style-image 속성) - 속성 : list-style-image:url(이미지경로)} - 값 : url | none | inherit - 기본값 : none none : 표시자(marker) 이미지의 경로를 지정하지 않는다. url : 표시자(marker) 이미지의 경로를 지정한다.

사용된 CSS 용어정리

15. list-style속성

목록스타일 (list-style-type 속성 ) - 속성 : list-style-type - 값 : none | circle | disc | square | armenian | decimal | decimal-leading-zero | georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman - 기본값 : disc none : 목록 스타일을 사용하지 않는다. circle : 뚫린원 모양의 스타일을 사용한다. disc : 채워진원 모양의 스타일을 사용한다. square : 채워진 사각형 모양의 스타일을 사용한다. armenian : 아르마니아 숫자 스타일을 사용한다. decimal : 1부터 시작하는 십진수 스타일을 사용한다. decimal-leading-zero : 01부터 시작하는 십진수 스타일을 사용한다. georgian : 그루지아 숫자 스타일을 사용한다. lower-alpha : 알파벳 소문자 스타일을 사용한다. lower-greek : 고대 그리스 문자의 소문자 스타일을 사용한다. lower-latin : 라틴어의 소문자 스타일을 사용한다. lower-roman : 로마숫자의 소문자 스타일을 사용한다. upper-alpha : 알파벳 대문자 스타일을 사용한다. upper-latin : 라틴어의 대문자 스타일을 사용한다. upper-roman : 로마숫자의 대문자 스타일을 사용한다. 목록 스타일 이미지 (list-style-image 속성) - 속성 : list-style-image:url(이미지경로)} - 값 : url | none | inherit - 기본값 : none none : 표시자(marker) 이미지의 경로를 지정하지 않는다. url : 표시자(marker) 이미지의 경로를 지정한다.

사용된 CSS 용어정리

목록 스타일 위치 (list-style-position 속성) - 속성 : list-style-position - 값 : inside | outside | inherit -기본값 : outside 이 속성은 목록의 항목(list item) 요소에 부여할 불릿이나 번호 등 표시자(marker)의 위치을 지정한다. inside : 마커 박스를 기본 블록 박스의 최초의 인라인 박스로 배치한다. outside : 마커 박스를 기본 블록 박스의 바깥쪽에 배치한다. 목록 스타일관련 속성의 일괄지정 (list-style 속성 ) 목록 관련 속성 일괄지정 (list-style 속성) - 속성 : list-style - 값 : [ || || ] -기본값 : 개별 속성의 기본값 참조

사용된 태그정리

1. 공간지정 태그

DIV 태그 - 정의 : DIV 태그는 DIVISION의 약자로 시작태그인 < DIV 속성=“요소”>와 마감태그인