웹표준,CSS



프리랜서 웹디자이너 RELATION RELATION.CO.KR

RELATION 로고

홈페이지 소스

[CSS] 웹표준,CSS

2014.05.13
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>font</title>


<style type="text/css">
#font1{
/**글꼴 지정.여러개를 지정할경우 콤마(,)로 구분
* - 사용자pc에 첫번째 폰트가 없을경우 두번째 폰트가 사용됨
* - 글꼴의 이름은 쌍따옴표로 묶지 않는다
*/
font-family:궁서,굴림,돋움;

/**글자의 굵기 지정
* normal, bold, bolder, lighter
* 100~900(100단위)
* 100~500:normal
* 600~900:bold
*/
font-weight:bold;

/**글자의 크기 지정
* 단위:px,pt,em
*/
font-size:1.5em;

/**글자의 모양 지정
* normal,italic
*/
font-style:italic;

/**소형대문자의 표기(한글에서는 의미없음)
* normal,small-caps
*/
font-variant: small-caps;
}
#font2{
/**모든글자 관련 속성을 한번에 지정,콤마안됨,공백으로 구분해야함
* [font-style || font-variant || font-weight] font-size,font-family
* [~~]는 생각가능,순서변경가능,
* font-size,font-family는 순서변경안됨,생략안됨
*/
font:italic 15px 돋움;
}
#text1{
/**정렬관련속성
* right, left, center
* box의 정렬과는 관계없음
*/
text-align:left;

/**내용의 형태지정
* underline,overline,line-throungh, blink, none,
* overline과 underline을 같이 사용가능,overline과 line-through와 underline을 같이 사용가능(구분 공백)
* BLINK는 파이어폭스,오페라에서만 적용됨
*/
text-decoration:overline line-through underline;

/**자간*/
letter-spacing:10px;

/**어간(단어사이의 간격)*/
word-spacing:10px;

 

/**줄바꿈관련
* normal:글이 박스를 넘을때 자동줄바꿈(기본)
* nowrap:자동 줄바꿈 안함 */
white-space:nowrap;

/**들여쓰기 관련지정*/
text-indent:50px;
}

/**웹접근성예제*/
h1{
display:block;
width:210px;
height:78px;
background:url(http://static.naver.net/www/u/2010/0611/nmms_215646753.gif);
text-indent:-10000px;/**글씨숨기기*/
}
</style>
</head>

 

<body>
<div id="font1">
이곳은 글자가 표시됩니다.
AAAAAAAA
</div>

<div id="font2">
가나다라마바사
</div>

<div id="text1">
가나다라마바사
<div style="width:100px; background-color:#ff00ff">abcd</div>
</div>

<h1>제목의 사용</h1>
</body>
</html>

이 포스트 공유하기

글수정  글삭제 전체목록
<
 
1
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 자바스크립트 이미지변경 예제 innerHTML, setAttribute 이해  이미지 파일이 첨부되어 있습니다. 꿘쓰 2021.03.16 334
중요 [소스] 메뉴바 UI 소스1 (반응형)  이미지 파일이 첨부되어 있습니다. 꿘쓰 2021.04.02 3665
중요 [소스] jquery 달력 Datepicker  이미지 파일이 첨부되어 있습니다. 꿘쓰 2017.11.02 2953
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다.  이미지 파일이 첨부되어 있습니다. 꿘쓰 2017.02.10 73
중요 [소스] [소스] 메뉴바 UI 소스2 (반응형)  이미지 파일이 첨부되어 있습니다. 꿘쓰 2016.07.19 6075
중요 [기타] 구글맵 플랫폼  이미지 파일이 첨부되어 있습니다. 꿘쓰 2019.01.22 4630
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다.  이미지 파일이 첨부되어 있습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시  이미지 파일이 첨부되어 있습니다. 꿘쓰 2018.01.18 5103
중요 [소스] 구글맵 좌표값 구하기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2019.01.08 3373
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 21875
중요 [소스] 제시어기능 자동완성 검색  이미지 파일이 첨부되어 있습니다. 꿘쓰 2011.05.18 2438
232 [소스] 슬라이드 배너 Swiper Slide 작성글은 비공개로 설정 되었습니다. 꿘쓰 2021.04.06 0
231 [소스] gnb 메뉴 작성글은 비공개로 설정 되었습니다. 꿘쓰 2021.04.02 0
230 [소스] 자바스크립트 이미지변경 예제 innerHTML, setAttribute 이해  이미지 파일이 첨부되어 있습니다. 꿘쓰 2021.03.16 334
229 [소스] Mouse Scroll Dwon 꿘쓰 2021.03.08 146
228 [기타] innerHTML 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.11.16 0
227 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
226 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 351
225 [소스] Window.scroll() 꿘쓰 2020.06.22 280
224 [소스] scrollLeft(), scrollTop() 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.15 0
223 [소스] 숫자 카운트 1 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.03 2
222 [CSS] 그라데이션 자동 생성 사이트 꿘쓰 2020.11.12 274
221 [CSS] flex-wrap:wrap 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.05.29 0
220 [SCRIPT] 자바스크립트 number_format 숫자 콤마 제이쿼리 꿘쓰 2019.12.03 343
219 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 683
218 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 562
217 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 742
216 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 882
215 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 821
214 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 1109
213 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1