모바일코딩

Report
CSS의 기본설명
1. CSS의 기본규칙
선택자 { 속성:값; } / 세미콜론 생략가능하나 쓰는 것을 권함
※ 기본사용 font{color:#fff;} / 복수사용 div,p,span{color:#000;}
2. 스타일시트 참조 방법
- 개별속성 : <p style="margin: 15px;"></p>
- style요소 : <style type="text/css"> p{margin: 15px;} </style>
- 외부 스타일시트 참조 : <link rel="stylesheet" type="text/css" href="/Common/Css/M_setup.css" />
- @import로 외부 스타일시트 참조 : <style type="text/css"> @import url("./css/style.css"); </style>
- xml-stylesheet로 외부 스타일시트 참조 : <?xml-stylesheet type="text/css" href="./css/style.css"?>
외부 스타일을 참조할때는 항상 스타일 시트 언어의 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="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
-> 모바일 웹브라우저의 기본 화면 크기 및 확대/축소 배율등을 정하는 모바일 웹사이트 및 웹앱을 만들시 제일 중요한 Meta태그
width : 화면 가로 사이트 (device-width로 폰의 크기로 자동지정)
initial-scale : 초기의 확대 비율
maximum-scale : 최대 확대 비율
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
<div class=“Top”></div>
TopMenu
<div class=“M_Menu”></div>
Body
<div class=“Body_M”></div>
Bottom
<div class=“Bottom”></div>
사용된 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, backgroundattachment, 속성을 한꺼번에 지정할 수 있는 단축 속성이다. 값에는 배경관련 속성의 값을 공백으로 구분하여 복수 지정할 수 있
고, 순서에 구애받지 않으며, 일부 생략 가능하다.
사용된 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
- 값 : [ <list-style-type>|| <list-style-position> || <list-style-image> ]
-기본값 : 개별 속성의 기본값 참조
사용된 태그정리
1. 공간지정 태그
DIV 태그
- 정의 : DIV 태그는 DIVISION의 약자로 시작태그인 < DIV 속성=“요소”>와 마감태그인 </DIV>로 구성되어 있다.
태그내에 속성을 적지 않아도 시작태그와 마감태그 사이에 들어가는 내용에 따라 그 공간의 크기가 저절로 달라진다.
그 공간은 줄 단위로 할당되어 태그의 시작 전후에 자동으로 줄바꿈 기능을 가지고 있다.
SPAN 태그
- 정의 : SPAN태그는 시작태그인 < SPAN 속성-”요소”>와 마감태그인 </ SPAN >으로 구성되어 있다.
태그내에 속성을 적지 않아도 시작태그와 마감태그 사이에 들어가는 내용에 따라 그 공간의 크기가 저절로 달라진다.
다만, 그 공간은 내용에 국한되며, DIV와 달리 태그의 시작 전후 자동 줄바꿈 기능이 없어 연속으로 사용하면, 이웃하게 위치한다.
Tip. SPAN태그는 width로 넓이값을 적용시켜도 적용되지 않는다. 만약 강제로 적용시키고 싶다면,
<SPAN class=“a1”></SPAN>주고 css에서 span.a1 {width:100px;} 이런식으로 적용시키면 가능하다.
FILEDSET 태그
- 정의 : FIELDSET 태그는 시작태그인 <FIELDSET 속성=“요소”>와 마감태그인 </FIELDSET>으로 구성되어 있다.
DIV와 SPAN과 달리 테두리가 존재하며 모서리 부분이 둥근것이 특징이다.
<LEGEND align=“left | right | center”>제목</LEGEND>를 삽입하여 제목추가가 가능하다.
DIV와 마찬가지로 태그내에 속성을 적지 않아도 시작태그와 마감태그 사이에 들어가는 내용에 따라 그 공간의 크기가 저절로 달라지고,
그 공간은 줄 단위로 할당되어 태그의 시작 전후에 자동으로 줄바꿈 기능을 가지고 있다.
사용된 태그정리
2. 목록 태그
<ul></ul>
- 정의 : Unorder List의 약자이다. 순서가 없는 목록이라는 뜻
주로 숫자가 없는 목록을 만들 때 많이 사용 한다.
<ol></ol>
- 정의 : Order List의 약자이다. 순서가 있는 목록이라는 뜻
주로 숫자를 이용해 목록을 만들때 많이 사용 한다.
<li><li>
- 정의 : 항목을 나열하는 태그이다.
주로 ol이나 ul 세부에 쓰인다.
<dl></dl>
- Definition List의 약자이다.
주로 용어를 정의할 때 사용 한다.
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
목록태그는?
<ul></ul>입니다.
<ol></ol>입니다.
<dl></dl>입니다.
• 순서1
• 순서2
• 순서3
1. 순서1
2. 순서2
3. 순서3
사용된 태그정리
3. 글씨모양 정의 태그
<strong></strong>, <b></b>
굵은 글씨를 나타내 준다.
4. 문단 혹은 줄바꾸기 태그
<p></p>
문단을 바꾸는 태그, 줄바꿈과 동시에 줄을 띈 것같은 효과가 있다.
<br>
문단을 바꾸는 태그 줄바꿈의 역할만 수행한다.

similar documents