회원가입∴아이디/비번찾기
홈으로


스타일 시트를 배우자 - 개념과 사용법 && 폰트 관련 속성
홈페이지홈페이지 23년 전
스타일 시트가 필요한 가장 큰 이유는 웹페이지를 보다 깔끔하고 보기 좋게 꾸며 가독성이 높은 문서를 작성하는데 있다.
스타일 시트의 가장큰 장점을 든다면 같은 스타일의 문단이 반복적으로 사용될 경우 작업의 속도를 향상시키고 웹 페이지의 용량을 줄일 수 있다는데 있다.
또한 글자의 크기 자간과 행간을 마음대로 조절할 수 있으며 하이퍼 링크의 형태를 다양화 시킬 수 있다.
그 외에도 여러가지 기능이 있지만 생략 하도록 하자..
아무튼 스타일 시트는 현재와 앞으로 웹 페이지를 작성하면서 몰라서는 안됄 부분의 하나이다.

스타일 시트를 선언하는 방법은 3가지가 있다.

첫번째는 <head>와 </head>사이에 넣는 방법이다.
아래 예제와 같이 사용한다.
<html>
<head>
<title>스타일 시트 선언하기</title>
<STYLE TYPE="text/css"> [스타일 시트의 시작을 의미한다]
<!--
선택자 스타일 속성1:속성의 값; 스타일 속성2:속성의 갑; ...
//-->
</STYLE>[스타일 시트의 끝을 의미한다]
</head>
<body>
본문내용
</body>

두번째는 HTML태그 내에 삽입하여 선언한다.
<태그 style="스타일 속성1:속성의 값; 스타일 속성2:속성의 값;..">....</태그>

세번째는 외부파일을 이용하여 선언한다.
스타일 시트의 외부 파일의 이름은 확장자가 CSS인 파일을 사용한다.
사용법은 <head>와 </head>사이에 넣는다.
<html>
<head>
<title>스타일 시트 선언하기</title>
<link rel="StyleSheet" HREF="스타일파일의 경로/스타일파일의 이름.css" type="text/css">
<body>
본문내용
</body>

CSS란 Cascading Style Sheet의 약자로서 웹 페이지 제작에 사용되는 HTML의 한계를 보안하기 위해 W3C에서 발표한 것이다.
1바이트 문자인 영어의 경우에는 글자의 여백을 주는 등의 효과를 따로 설정할 필요가 없지만 한글과 같은 2바이트의 문자에는 이것이 불가능하다
따라서 이런 2바이트의 문장의 한계를 보안하기 위해서 생겨난 것이 바로 CSS라 할 수 있다.

########################################################################################################
폰트 관련 속성

font-family

값..............c:windowsfonts 디렉토리에 있는 폰트 이름
설명......화면에 나타나는 글씨의 종류를 설정할 때 쓰인다. 시스템에 있는 폰트 이름 중 하나를 사용하면 된다.

예제......P{font-family:Courier New}
기타......만일 윈도우 시스템에 굴림체가 없다면 Arial로 대체 하라는 의미로 다음과 같이 사용할 수도 있다. 참고로, 이것은 제작자의 시스템에는 해당 폰트가 있으나, 다른 사람들의 컴퓨터에는 폰트가 없을 시 아주 유용하게  쓰인다.
               P{font-family:굴림,Arial}

font-style

값...........normal,italic,oblique
설명......화면에 나타나는 글씨의 모양, 즉 이탤릭으로 나타낼 것이냐 아니면 오를리크로 나타낼 것이냐를 설정한다.
예제......H1{font-style:italic}  

font-weight

값...........normal,bold,border,lighter,100,200,300,400,500,600,700,800,900
설명......글씨의 굵기 설정.일반적인 폰트는 normal 또는 bold만을 지원한다.
예제......H2{font-weight:bold}  

font-size

값..........절대값-포인트(pt),센티미터(cm),픽셀(px),인치(in)
         상대값- larger,smaller
         퍼센트 값 등
설명......글씨의 크기를 설정한다.
예제......H3{font-size:9pt}
추천추천 : 520 추천 목록
번호 제목
1,348
Windows 서비스 관리자에서 Apache 서버가 멈췄을 때 시스템 자체를 재부팅
1,347
윈도우에서 Apache 서버 상태를 체크한 후 문제가 발생하면 자동으로 재부팅
1,346
윈도우 서버 2019 취약점 점검 보안
1,345
윈도우 서버 2019 취약점 점검 보안 (windows server 2019)
1,344
Windows 취약점진단 보안가이드라인
1,343
Windows Admin Center를 통한 서버 관리
1,342
윈도우 서버에서 실행되는 서비스 확인
1,341
Chrome NET::ERR CERT REVOKED 해결방법
1,340
cmd 명령어 (명령 프롬프트 명령어) 모음
1,339
Windows10 특정 프로그램(OCS 2007 R2)에서 첨부파일 드래그앤드롭이 안 되는 현상
1,338
윈도우 로그, 관리 이벤트 삭제
1,337
클린 부팅
1,336
[SFC 명령어, DISM 명령어]] 무결성 검사 및 시스템 파일 손상 파일 복구
1,335
Windows Defender 검사 기록 삭제하기
1,334
간단한 윈도우 10 정품 인증 (크랙프로그램 필요없음)
1,333
오류난 폴더 강제삭제 방법
1,332
크롬에서 플래시 항상 허용하도록 설정하기 (레지스트리) reg 파일 만들기
1,331
GPT 디스크를 MBR 디스크로 변환
1,330
MBR 디스크를 GPT 디스크로 변환
1,329
구글 검색을 200% 활용하게 해주는 검색 명령어 총정리
1,328
[Jquery] jQuery로 우클릭 방지, 드래그 방지, 선택 방지 (IE10, 파이어폭스, 크롬 확인)
1,327
php 사용자 접속IP, 브라우저정보, os정보, http, https 접속프로토콜 알아오기
1,326
[PHP] IE 브라우저 접속 검출하기
1,325
윈도우10 시스템 예약 파티션 확인 및 삭제
1,324
윈도우10 복구 파티션 삭제 방법
1,323
윈도우10 부팅지연 검은화면에서 몇분간 머무는 현상 해결방법
1,322
삼성노트북 바이오스 진입이 불가능한 경우 바이오스 재설치와 NVRAM 초기화
1,321
익스플로러(IE)의 구글 검색공급자 한글로 변경 방법
1,320
윈도우 10 기본 앱 삭제 및 복구
1,319
meta 태그 http-equiv 설정방법과 차이점
목록
뮤직트로트 부산광역시 부산진구 가야동 ㅣ 개인정보취급방침ㅣ모바일버전
Copyright ⓒ musictrot All rights reserved.