css는 인테리어다!
css는 Cascading Style Sheets의 약자로, 웹페이지의 디자인과 레이아웃을 담당하는 스타일 시트 언어입니다.
html이 홈페이지의 뼈대라면 css는 인테리어라고 보면 된다.
html로 작성된 웹페이지의 내용을 꾸미고, 사용자가 보기 좋은 시각적인 경험을 제공하는데 사용됩니다.
1. 기본구조
선택자{
속성: 값;
}- 선택자 : 스타일을 적용할 html 요소를 선택합니다.
- 속성 : 선택한 요소에 적용할 스타일의 속성을 정의합니다.
- 값 : 해당 속성에 적용할 값입니다.
2. 예시
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f2f2f2;
}
h1 {
color: #3498db;
}
p {
font-size: 16px;
line-height: 1.5;
}
</style>
3. 클래스와 아이디
.button {
background-color: #4caf50;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
#header {
font-size: 24px;
font-weight: bold;
}- - 클래스(Class) : 여러요소에 동일한 스타일을 적용하려면 같은 클래스 이름을 부여합니다. 이때 css에 표기할때 .(점)이 클래스 표시입니다.
- 아이디(ID) : 한페이지에서 유일한 요소에 스타일을 적용하려면 유일한 아이디를 부여합니다. (고유명사) 이때 id를 css에 표기할때 #(샵)으로 표시합니다.
4. 외부 스타일시트
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="header">Welcome to my website!</h1>
<p>This is a simple webpage with external styles.</p>
</body>
</html>/* styles.css */
.header {
color: #e74c3c;
font-size: 28px;
}- style.css 파일은 웹페이지의 스타일을 정의하고, link태그를 통해 html파일에 연결하여 사용합니다.
'developer > html & css' 카테고리의 다른 글
| Font Awesome 아이콘 사용하기: 아이콘으로 좋아요 사용해보기 (0) | 2024.02.18 |
|---|---|
| 시맨틱 웹과 HTML5: 의미론적 태그로 더 나은 웹 구축하기 (0) | 2024.02.05 |
| CSS Reset에 대한 이해: reset.css의 필요성과 사용법 (0) | 2024.02.01 |
| HTML '<a>'태그 : 하이퍼링크 생성과 활용 (0) | 2024.01.31 |
| html은 무엇일까? (0) | 2024.01.21 |
