HKAND: CSS3

[개발] 주석

- 자바스립트

// 주석

/* 주석 */

- HTML5

- CSS3

/* 주석 */

- C++

/* 주석 */

// 주석

끝.

[CSS3] border-radius

1. 설명

- 테두리 모서리를 지정한 값(단위 : 픽셀)로 둥글게 만듦.

2. 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변경 타이틀</title>
<!--타이틀 변경(참고:https://hkand.blogspot.com/2023/01/html5.html)-->
<style>
p { background : #f00000; padding : 20px;  width : 200px; }
#radius  { border-radius : 45px; } /* id 셀렉터 */
</style>
</head>

<body>
<h3>border-radius</h3>
<hr>
<p id="radius">반지름 45px 둥근 모서리</p>
</body>
</html>

3. 참고

- https://www.w3.org/TR/2002/WD-css3-border-20021107

끝.

[CSS3] 하이퍼링크에 밑줄 제거

1. 설명

- HTML a 태그 하이퍼링크에는 파란색 텍스트와 밑줄이 있음.

- CSS3 text-decoration 프로퍼티로 하이퍼링크 밑줄 제거

2. 사용법

> text-decoration : none | underline | overline | line-through;

3. 예시

1	<a href="https://hkand.blogspot.com" style="text-decoration : none">HKAND 블로그</a>

4. 참고

- https://www.w3.org/TR/css-text-decor-3

끝.

[CSS3] 외부 스타일 시트 불러오기

1. 설명

- 웹 페이지마다 동일한 스타일 시트를 중복 작성 불편

- 스타일 시트 파일을 별도로 만든 후 사용하여 웹 페이지 일관성 확보

2. 사전 필요

- css3 스타일 시트 파일(예 : hkand.css)

/* hkand.css */

html, body { width: 100%; height: 100%; }

body { font-size: 12px; color: #000; }

3. 방법

3.1 <link> 태그

<head>

</head>

3.2 @import 이용

3.2.1 @import "외부 스타일 시트 파일명.확장자";

<style>

@import "hkand.css";

</style>

3.2.2 @import url("외부 스타일 시트 파일명.확장자");

<style>

@import url("hkand.css");

</style>

4. 참고

- https://www.w3.org/TR/css-cascade-3

끝.