CSS 폰트 다루기

모두 대문자로 바꾸기

 text-transform: uppercase;

새창에서 열기

<a href="http://www.nate.com/" target="_black"

폰트 반투명

background-color: rgba(255,255,255,0.5);

링크

/* 링크가 몇초후에 옮겨질것인가 */

a:link{
	color: pink;
	transtion: 1s;/* 몇초후에 옮겨질것인가 */
}

/* 방문한곳 */

a:visited {/* 방문한곳 */
	color: pink;
}

mousover(), mouseout()

a:hover{
	color: white;
	background: black;
}

a:active {
	color: red;
	background-color: blue;
}

<head>

<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
.aaa{
	font-size: 1cm;
}
.bbb{
	font-size: 1mm;
}
.ccc{
	font-size: 1in;
}
.ddd{
	font-size: 1pt;
}
.eee{
	font-size: 1pc;
}
.fff{
	font-size: 24px;
}
.ggg{
	font-size: 1em;
}
.hhh{
	font-size: 200%;
}
</style>
</head>

<body>

<body>

<p class="aaa">p Tag 글자크기 단위 1 cm 입니다</p>
<p class="bbb">p Tag 글자크기 단위 1 m 입니다</p>
<p class="ccc">p Tag 글자크기 단위 1 inch 입니다</p>
<p class="ddd">p Tag 글자크기 단위 1 pt 입니다</p>
<p class="eee">p Tag 글자크기 단위 1 pc 입니다</p>
<p class="fff">p Tag 글자크기 단위 24 px 입니다</p>
<p class="ggg">p Tag 글자크기 단위 1 em 입니다</p>
<p class="hhh">p Tag 글자크기 단위 1 200% 입니다</p>

</body>

버튼을 누르면 글자 "Hello CSS World"에서 위와같이 변경됨

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<div id="demo">Hello CSS World</div>
<br>
<button type="button" onclick="func()">적용</button>

<script type="text/javascript">
function func() {
	let obj = document.getElementById("demo");
	
	/* Java Script로 설정하기 */
	obj.style.color = "white";//글자색
	obj.style.backgroundColor = "blue";//배경색
	obj.style.textAlign = "center";//위치
	obj.style.borderStyle = "double";//테두리 2겹
	obj.style.borderColor = "#ff0000";//테두리색
	obj.style.fontFamily = "MS PGothic";//폰트체
	obj.style.fontStyle = "italic";//기울기
	obj.style.fontSize = "24pt";//크기
}
</script>
</body>

1. 배경화면 바둑판식이 아닌 1개로 설정

2. 나머지 여백은 red로 설정

3. 단락 배경 설정

4. 단락속 <p>태그 색상 다르게 설정

<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
body{
/*
	background-color: green; 배경색
	background-image: url("pic.jpg"); 바둑판모양 
	background-repeat: no-repeat; 바둑판 안하고 사진 하나만 띄우기 
	background-position: right top; 오른쪽 상단에 이미지 정렬 
*/
	/* 위의 태그를 한번에 설정하기 */
	background: #ff0000 url("pic.jpg") no-repeat right top;
}	
h1{
	background-color: #6495ed;
}
p{
	background-color: #e0ffff;
}
div {
	background-color: #d0c4de;
}
</style>

</head>
<body>

<h1>[속보] 코로나 국내 신규 62명… 해외 유입 43명·총 1만3479명</h1>

<div>
국내 코로나19 확진자 수가 전날 대비 62명 늘었다.
질병관리본부 중앙방역대책본부는 7월 13일 0시 기준 국내 코로나19 누적 확진자는 1만3479명이며, 이 중 1만2204명(90.5%)이 격리해제됐다고 밝혔다. 전날 대비 추가 사망자는 없다.
신규 확진자 중 <p>국내 발생은 19명, 해외 유입은 43명</p>이다.
국내 발생은 지역별로 서울 10명, 광주 6명, 경기 3명이다.
해외 유입은 검역에서 18명이 발견됐고, 지역별로 경기 8명, 충남 4명, 인천, 서울 각 3명, 강원, 경남 각 2명, 대구, 광주, 충북 각 1명이 확인됐다.
</div>

</body>

<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
ul.ucls{
	/* list-style-type: circle;  앞의 아이콘이 ○로 바뀜 */
	/*list-style-type: square;*/
	/*list-style-image: url('icon.jpg');*/
	list-style: circle inside url('icon.jpg')
}
.ocls{
	list-style-type: lower-alpha;/* 123 순서를 abc로 바꿈 */
}

</style>
</head>
<body>

<ul class="ucls"><!-- unordered list 순서 없는 목록 (●로 표현)-->
	<li>Coffee</li>
	<li>Tea</li>
	<li>Cocoa</li>
</ul>

<ol class="ocls"><!-- ordered list 순서 있는 목록(1,2,3.. / I II III... / a, b, c) -->
	<li>Apple</li>
	<li>Pear</li>
	<li>Banana</li>
</ol>

</body>

<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
body {/* 기본 바디깔고 아래서 나머지 따로 수정 */
	color: blue;
	text-align: center;
}
h1{
	color: #ff0000;
	text-decoration: overline;
}
p{
	color: #ffff00;
}
p.ex{
	color: rgb(0, 255, 0);
	text-align: right;
	text-decoration: line-through;
}
a{/* a태그에 링크 밑줄라인 제거 */
	text-decoration: none;
}
a:visited {/* 방문 한 사이트의 색상을 다르게 줌 */
	color: #0000ff;
}
a:hover {/* 마우스를 가져다 댔을경우 색이 바뀜 */
	color: #ffff00;
	background-color: #000;
}
a:active {/* 클릭하면(클릭한상태유지시) 색상이 바뀜 */
	color: rgb(255,255,255);
}
</style>
</head>
<body>

<h1>“윤석열은 할 수 있는 게 없었다”… 상처만 남은 檢</h1>

<p>“탈당하겠다” “피해자 편 고맙다”…조문 진통 겪는 정의당</p>

<p class="ex">“탈당하겠다” “피해자 편 고맙다”…조문 진통 겪는 정의당</p>

<a href="http://www.naver.com">Naver 사이트로 이동</a>
<br>
<a href="http://www.google.com">google로 이동</a>
<br>
<a href="http://zum.com">zum으로 이동</a>
</body>

저작자표시 변경금지

'CSS' 카테고리의 다른 글

CSS파일// js파일과 html호출하여 테이블 셋팅하기 (0)	2020.07.13
CSS 테이블 다루기 (0)	2020.07.13
CSS div 다루기 (0)	2020.07.13
단어 여백설정, 정렬 (0)	2020.07.13
CSS적용 방식 (0)	2020.07.13

______

CSS 폰트 다루기

링크

'CSS' 카테고리의 다른 글

티스토리툴바

CSS 폰트 다루기

링크

'CSS' 카테고리의 다른 글

'CSS' Related Articles

티스토리툴바