|
|
|
|
|
|
|
|
|
 |
|
|
 |
|
|
 |
|
|
 |
|
|
|
6만원 이상 무료배송
|
|
|
주문하시는
총상품금액의 합계가
6만원 이상일 경우
택배비가 무료입니다.
|
|
|
|
 |
|
|
|
|
|
|
|
|
|
작성자:
어라
작성일: 2009-07-07 09:57
조회: 11600
댓글: 0
|
|
|
HTML문서에서 직접 요소에 지정하는 방법을 이용할때는 요소에 직접 스타일을 입력하면 된다.
예) <p style="font-family:돋움">글꼴이 돋움으로 바뀜</p>
HTML문서의 HEAD에 두는 방법이나 외부에 CSS파일를 만들어 링크로 연결하는 방법을 이용하고자 할때는 스타일트를 선언하고 사용한다.
스타일시트를 선언하는 기본 형식은 선택자 { 선언 } 으로 대소문자를 구별하지 않는다.
예1) P {margin-left:20mm}
예2) P {margin-left:20mm;color:blue;background:yellow} - 여러개의 속성적용
선택자는 선언부분에서 지정해주는 속성값에 영향을 받아 웹페이지에서 스타일을 변경해준다.
선언은 속성(color)과 값(blue)으로 이루어지며, 속성과 값을 콜론(:)로 구별한다.
한 선택자에 여러가지 속성을 사용하려면 세미콜론(;)을 구분으로 속성값을 이어 적어주면 된다.
▶ 글자와 관련된 스타일(직접 요소에 적용한 방법사용)
글꼴 지정하기 : font-family를 이용하여 지정해준다.
글자의 크기 지정하기 : font-size로 지정해준다.
글자 색상 지정하기 : color로 지정하고 속성값은 컬러이름, 걸러 코드를 사용한다.
<html>
<head>
<title>글자와 관련된 스타일</title>
</head>
<body>
글자꾸밈
<p style="font-family:돋움">글꼴이 돋움으로 바뀜</p>
<p style="font-size:9pt">글자 크기가 9pt로 바뀜</p>
<p style="color:blue">글자 색상이 파란색으로 표현</p>
<p style="border-bottom: 1px dashed silver;">글자에 점선 밑줄이 생김</p>
<p style="border-bottom: 1px solid silver;">글자에 밑줄이 생김</p>
<p style="text-decoration: line-through;">글자에 취소선이 생김</p>
<p style="text-decoration: overline underline;">위선,밑선이 생김</p>
영문자의 대소문자
<p style="text-transform: capitalize">첫번째 영문자만 대문자 : This site is motifdn</p>
<p style="text-transform: uppercase">모두 대문자 : This sitem is motifdn</p>
<p style="text-transform: lowercase">모두 소문자 : This site is motifdn</p>
문자의 수직위치
<p style="vertical-align: baseline">보통글자</p>
<p style="vertical-align: super">윗첨자</p>
<p style="vertical-align: sub">아래첨자</p>
이미지의 윗쪽에 글자위치, 이미지에 스타일적용<img src="" style="vertical-align: top">
이미지의 중간에 글자위치, 이미지에 스타일적용<img src = "" style="vertical-align: middle">
이미지의 아래에 글자위치, 이미지에 스타일적용<img scr= "" style="vertical-align: bottom">
</body>
</html> |
▶ 문단와 관련된 스타일(직접 요소에 적용한 방법사용)
자간과 조절하기 : letter-spacing를 이용하여 지정하며 - 값도 지정할 수 있다.
들여쓰기 : text-indent로 지정할 수 있으며, 단위는 PT, PX, % 등의 거리단위이다.
문단의 여백조절하기 : margin-left(왼쪽),margin-right(오른쪽)등 상하좌우로 조절할수 있다.
문단 정렬하기 : text-align으로 지정할 수있으며, 정렬방법은 left, center, right, justify이다.
<html>
<head>
<title>문장, 문단와 관련된 스타일</title>
</head>
<body>
문자간격
<p style="letter-spacing:-5px">자간이 -5px로 지정됨</p>
<p style="letter-spacing:0px">자간이 0px으로 지정됨</p>
<p style="letter-spacing:-0.04em;">자간이 지정됨</p><br>
단어간격
<p style="word-spacing:-5px">자간이 -5px로 지정됨</p>
<p style="word-spacing:0px">자간이 0px으로 지정됨</p>
<p style="word-spacing:5px">자간이 5px로 지정됨</p>
들어쓰기
<p style="text-indent:0px">들여쓰기가 0px로 지정됨</p>
<p style="text-indent:20px">들여쓰기가 20px로 지정됨</p><br>
여백주기
<p style="margin-top:50px">위쪽여백이 50px로 지정됨</p>
<p style="margin-bottom:50px">아래쪽여백이 50px로 지정됨</p>
<p style="margin-left:50px">왼쪽여백이 50px로 지정됨</p>
<p style="margin-right:50px">오른쪽여백이 50px로 지정됨</p> <br>
정렬하기
<p style="text-align:left">왼쪽정렬</p>
<p style="text-align:center">가운데정렬</p>
<p style="text-align:right">오른쪽정렬</p>
<p style="text-align:justify">양쪽정렬</p><br>
공백그대로 표헌하기
<style type="text/css">
code { white-space: pre;}
</style>
<code> (공백그대로 표현하기)</code>
줄바꿈하기 않기
<p style="white-space: nowrap">위쪽여백이 50px로 지정됨</p>
그리드 적용하기
<style type="text/css">
p {
layout-grid-type: fixed;
layout-grid-char: 20px;
layout-grid-line: 20px;
background-image:url("그림이미지")
}
p#a { layout-grid-mode: both }
p#b { layout-grid-mode: line }
p#c { layout-grid-mode: char }
</style>
<p id="a"> 그리드(격자)에 전부 맞추어 배치할 수 있게 됩니다. </p>
<p id="b"> 리드(격자)의 줄에 맞추어 배치할 수 있게 됩니다. </p>
<p id="c"> 그리드(격자)의 세로글자에 맞추어 배치할 수 있게 됩니다. </p>
<p style="layout-grid: fixed 30px 30px both;background-image:url("이미지")>
그리드정용을 한꺼번에 하기 </p>
|
|
|
|
|
|
|
|
|
|
* 관련 댓글 한말씀 부탁합니다.
|
|
|
|
