본문 바로가기

자기 계발/CSS와 JAVA, HTML

목록과 문단 스타일 시트

반응형

목록과 문단 스타일 시트

 

목록(list) STYLE

 

HTML 관련 태그 - 순서 없는 목록 <ul>, 순서지정 목록<ol> 태그에 대한 다양한 서식 지정 가능

 

주요속성

 

속성 

기능 

예 

 List-style :값

목록과 관련한 모든 설정을 할 수 있음 

List-style :inside circle 

 List-style-image : url(주소)

 목록의 값을 이미지로 표시

 List-style-image : url(allow.gif)

 List-style-position : 값

 목록에서 다음 줄로 이동시 시작 위치 설정

 List-style-position : inside

 List-style-type : 목록유형

 목록에서 사용할 머리표 유형 설정

List-style-type : circle

 

 

 

 

<style type="text/css">

UL {list-style : inside square}

OL {list-style : outside upper-roman}

</style>

</head>

<body>당분에 의한 와인의 분류<br>

<ul>

<li>dry wine</li>

<li>mediumdry wine</li>

<li>sweet wine</li>

 

 

 

 

 

 

문단 서식 지정 STYLE

 

 

 

 

MARGIN 속성 문단의 여백을 설정하기 위해서 사용하는 속성

 

 속성

기능 

예 

MARGIN - TOP : 값 

문단 경계로부터 위쪽 여백 값 설정

MARGIN : 30px;(상하 좌우 여백 30px 지정)

MARGIN:20px20px30px20px;

위쪽 오른쪽 20픽셀, 아래쪽 30픽셀, 왼쪽20픽셀 여백 지정

 MARGIN-TOP:20px;

위쪽여백 20픽셀 지정

MARGIN - LEFT : 값  

 문단 경계로부터 왼쪽 여백 값 설정

 MARGIN - RIGHT : 값

 문단 경계로부터 오른쪽 여백 값 설정

MARGIN - BOTTOM : 값  

문단 경계로부터 아래쪽 여백 값 설정 

 

 

 BODER 속성 -MARGIN 여백 안에 외곽선의 종류나 두께를 설정, 일반적인 테두리 선의 환경 설정에 사용

 

속성 

 기능

 BORDER-WIDTH

 테두리 너비 지정

 BORDER-COLOR

 테두리 색상 지정

 BORDER-STYLE

 테두리 스타일 지정

 

 

1. BORDER-WIDTH 속성

 

BORDER-WIDTH : 상하 좌우 모든 방향에 대해 너비 지정

 

각 방향에 대해 너비를 지정할 경우 BORDER-TOP-WIDTH, BORDER-TOP-COLOR, BORDER-LEFT-COLOR. 등등으로 기술

 

 

형식

 

BORDER-WIDTH : 너비수치 혹은

 

BORDER-WIDTH : THIN / THICK / MIDIUM

 

 THIN : 기본 너비보다 더 얇은 너비

 

THICK : 기본 너비보다 더 두꺼운 너비

 

MIDIUM : 기본 너비

 

 

2. BORDER-COLOR 속성

 

BORDER-COLOR : 상하좌우 모든 방향에 대해 테두리 선 색 지정

 

각 방향에 대해 서로 다른 색 지정할 경우 BORDER-TOP-COLOR,BORDER-LEFT-COLOR. 등등으로 기술

 

 

 형식BORDER-COLOR : 색상명 혹은 # 색상값

 

예) #PW{BORDER-COLOR:#404040}

 

 

 

3. BORDER-STYLE 속성

 

BORDER-STYLE : 테두리 선 스타일을 지정

각 방향에 대해 다른 선 모양을 지정할 때 BORDER-TOP-WIDTH,BORDER-LEFT-WIDTH 등등으로 기술

 

 

 

 형식: BORDER-STYLE : 스타일 종류 기술

 

 

 

 스타일 상수

기능

스타일 상수 

기능 

Dashed

  긴 점선 표시 

None

외곽선 표시 안함 

 Dotted

  짧은 점선 표시

 Outset

 안쪽 전체가 튀어나와 보임

 Double

  이중선으로 표시

 Ridge

 입체적으로 튀어나와보이는 효과

 Groove

  입체적으로 들어간 모양 표시

 Soild

 실선표시

 Insert

  안쪽 전체가 들어가 보이게 하는 표시

   

 

예)

   #style1 {border-style:solid}    현재 테두리 상하좌우 전체를 실선으로 표시

   #style2 {border-top:2px blue solid;

  border-botoom:2px red solid;

  border-left:3px green dotted;

  border-right:3px green dashed}   테두리 상하좌우 모두 굵기, 색상, 스타일이 다를 경우 한칸씩 공백을 지정하여 기술하면 됨

 

 

4. PADDING 속성 - BORDER의 여백을 설정하여 BORDER와 내용 사이의 공간을 제어

 

 속성

 기능

 PADDING

 전체 BORDER의 여백 지정

 PADDING-TOP

 위쪽 BORDER의 여백 지정

 PADDING-BOTTOM

 아래쪽 BORDER의 여백 지정

 PADDING-LEFT

 왼쪽 BORDER의 여백 지정

 PADDING-RIGHT

 오른쪽 BORDER의 여백 지정

 

예)

#style1{border:2px blue solid;

padding : 10px} 테두리 지정 후 테두리 상자 내 상하좌우 여백 10px 지정

 

 

 

 

 

 

 

 

 

 

 

 

728x90
반응형

'자기 계발 > CSS와 JAVA, HTML' 카테고리의 다른 글

웹표준 퍼블리싱 이론 수업 첫째날  (2) 2015.12.08
Flash 플래쉬 소개  (0) 2015.10.10
링크 지정 스타일 시트  (0) 2013.01.03
FONT 스타일 시트  (0) 2013.01.02
CSS (Cascading Style Sheet) 개요  (1) 2013.01.02