JunO3O
CSS : 기초
CSS : 기초
2023. 3. 21. 03:11ㆍ비공개
CSS 란?
: 프로그램 언어는 아니지만 문서를 시각적으로 표현하기 위해서 사용하는 언어입니다.
: CSS를 입력하기 위해서는 규칙을 따라야 합니다.
selector { /* 선택자 { */
property : value; /* 속성 : 값; */
} /* } */
MDN - CSS
: CSS에는 많은 종류의 특성이 존재하는데 이를 다 외울 수는 없으므로 MDN의 CSS 페이지를 참고합니다.
: https://developer.mozilla.org/en-US/docs/Web/CSS
내부 CSS / 외부 CSS <link>
: 내부 스타일시트 작성법은 <head> 안에 <style> 을 추가하여 작성하는 방식입니다.
: 외부 스타일시트 작성법은 .CSS 파일을 따로 만들어 html 파일에 CSS 파일 경로를 추가하여 작성하는 방식입니다.
ㅁ 내부 스타일시트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 내부 스타일시트 작성법 */
h1 {
color: blueviolet;
}
</style>
</head>
<body>
<h1>내부 스타일시트 작성법</h1>
</body>
</html>
ㅁ 외부 스타일시트 작성법
: HTML 외부에 존재하는 CSS 파일을 HTML 파일에서 사용하기 위해서는 <link> 요소를 통해 경로를 연결시켜줘야 합니다.
: link 를 입력하고 Tab을 누르면 형식이 자동 완성됩니다.
<link rel="stylesheet" href="CSS 파일 경로">
ex)
<link rel="stylesheet" href="/Bootcamp/CSS/External_style_sheet.css"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 외부 스타일시트 작성법 -->
<link rel="stylesheet" href="/Bootcamp/CSS/External_style_sheet.css">
</head>
<body>
<h1> 외부 스타일시트 작성법 </h1>
</body>
</html>
색 / 배경색 속성 (color / background-color)
: color 은 글자색을 변경할 때 쓰는 사용하며, background-color 은 배경색을 변경할 때 사용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 외부 스타일시트 작성법 -->
<link rel="stylesheet" href="/Bootcamp/CSS/External_style_sheet.css">
</head>
<body>
<h1> 외부 스타일시트 작성법 </h1>
<h2> 버튼에 색상 입히기 </h2>
<button>버튼 1</button>
<button>버튼 2</button>
<button>버튼 3</button>
<button>버튼 4</button>
<button>버튼 5</button>
</body>
</html>h1 { /* h1 태그를 사용하는 요소들의 글자에 yellowgreen 색상을 적용합니다. */
color : yellowgreen;
}
h2 { /* h2 태그를 사용하는 요소들의 글자에 orange 색상을 적용합니다. */
color : orange;
}
button { /* button 태그를 사용하는 요소들의 글자에 yellow를, 배경색에는 black 색상을 적용합니다. */
color : yellow;
background-color: black;
}
색상 시스템(RGB)
: red, blue, black 처럼 색상에 대한 이름을 입력하여 색을 지정할 수 있지만 (93, 173, 226)과 같이 RGB 숫자로도 색을 지정할 수 있습니다.
: 또한, (#5DADE2)와 같이 헥사코드를 이용하여 색을 지정할 수 있습니다.
: https://htmlcolorcodes.com/ 에서 색상에 대한 많은 정보를 얻을 수 있습니다.
color : 색상이름;
color : rgb(__, __, __);
color : #핵사코드;
일반 텍스트 속성
ㅁ text-align
: text-align 속성은 텍스트를 정렬할 때 사용합니다.
: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
선택자 {
text-align : 정렬 기준;
}
ex)
h1 {
text-align : center; /* 가운데 정렬을 하기 위해서 text-align 속성의 center 키워드를 사용합니다. */
}
ㅁ font-weight
: font-weight 속성은 텍스트의 굵기를 지정할 때 사용합니다.
: 폰트에 따라 적용되는게 다릅니다.
: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
선택자 {
font-weight : ___;
}
ex)
h1 {
font-weight : bold; /* 500, 700 등 숫자를 입력하여 굵기를 조절할 수 있습니다. */
}
ㅁ text-decoration
: text-decoration 속성은 텍스트를 꾸미는 선을 조절할 때 사용합니다.
: 밑줄, 취소선 등을 조정할 때 사용합니다.
: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
선택자 {
text-decoration : 키워드;
}
ex)
h1 {
text-decoration : blue wavy underline; /* 키워드 앞에 색상을 입력하면 색이 있는 선을 만들 수 있습니다. */
}
ㅁ line-height
: line-height 속성은 텍스트 줄 간격을 조절할 떄 사용합니다.
: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
선택자 {
line-height : 크기;
}
ex)
h1 {
line-height : 2; /* 기본값은 1입니다. */
}
ㅁ letter-spacing
: letter-spacing 속성은 자간을 조절할 때 사용합니다.
: https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing
letter-spacing : 크기;
ex)
h1 {
letter-spacing : 20px;
}
ㅁ 활용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/Bootcamp/CSS/CSS_Text.css">
</head>
<body>
<h1>대한민국</h1>
<hr>
<h2> 대한민국</h2>
<p>
대한민국(大韓民國, 영어: Republic of Korea, ROK), 약칭 남한(南韓, 영어: South Korea), 한국(韓國)은 동아시아의 한반도 남부에 자리한 민주공화국이다. 대한민국의 국기는
대한민국 국기법에 따라 태극기[5], 국가는 관습상 애국가[6], 국화는 관습상 무궁화이다. 공용어는 한국어와 한국 수어이다. 수도는 서울이다. 인구는 약 5,160만 명으로, 전체 인구 중 절반
정도(약 2611만 명)가 수도권에 살고 있다.[7]
</p>
</body>
</html>h1 {
text-align : center;
font-weight : 900;
text-decoration: #02f72f underline wavy;
letter-spacing: 20px;
}
h2 {
text-align : right;
}
p {
text-align : center;
}
픽셀로 글꼴 크기 바꾸는 방법(font-size)
: font-size 속성은 글자의 크기를 지정할 떄 사용합니다.
: px, em, rem, vh, % 등 다양한 단위로 크기를 지정할 수 있습니다.
: 픽셀(px)은 가장 흔히 사용되는 절대 단위이며, 다른 요소나 원래 폰트 크기 등의 영향을 받지 않는다면 동일한 크기를 가집니다.
font-size : 크기;
ex)
h1 {
font-size : 50px;
}
글꼴 변경 (font-family)
: font-family 속성은 폰트를 바꾸기 위해 사용합니다.
: 기기마다 폰트의 사용 가능 여부가 다르기 때문에 폰트의 우선순위에 따라 적용시켜주는 것이 좋습니다.
font-family : 폰트 이름, 백업 폰트 이름;
/* 기기마다 폰트의 사용 가능 여부가 다르기 때문에 먼저 적용될 폰트와 없는 경우 다른 폰트를 같이 적어주는 것이 좋습니다. */
ex)
h1 {
font-family : Gill Sans Extrabold, Sans-serif;
}
'비공개' 카테고리의 다른 글
| CSS 박스 모델 (1) | 2023.03.21 |
|---|---|
| CSS 선택자 (1) | 2023.03.21 |
| HTML : 폼, 테이블 (0) | 2023.03.21 |
| HTML : 시맨틱(Semantics) (0) | 2023.03.21 |
| HTML 기초 (0) | 2023.03.21 |