2024. 12. 23. 15:44ㆍFullStack Steps/CSS Practicing
이번 시간에는 CSS에 대해 소개하려고 한다.
CSS(Cascading Style Sheets)란 무엇인가?
- 계단식으로 스타일을 정의하는 문서
- CSS는 HTML문서에 스타일을 더해준다.
- HTML 문서는 태그가 태그를 포함하는 계단식 구조를 갖고 있다.
- HTML과 CSS를 더해서 웹브라우저로 실행하게되면 웹브라우저는 문서에 적혀있는대로
화면을 구성하고 사용자에게 보여준다 이 과정을 렌더링이라고 한다.
단, CSS 문서 자체는 독립적으로 존재할 수 있지만, 그 목적이 구조화된 HTML 문서의 스타일을 정리하는데 있으므로
HTML문서가 없는 CSS문서는 사실상 의미가 없다.
- HTML : 웹문서의 콘텐츠를 구성하는 언어 -CSS : 웹문서의 콘텐츠에 스타일을 추가하는 언어(색상, 크기, 위치등...)
- HTML과 함께 사용되지 않는 CSS는 단순 텍스트일 뿐이며 웹브라우저를 통해 결과물을 확인하기 위해서 반드시
HTML 문서 작성이 선행되어야 한다.
다음은 CSS 기본 문법이다
선택자{
속성명: 속성값;
속성명: 속성값;
속성명: 속성값;
}
-Selector(선택자)
-선택자 : 어떤 요소에 스타일을 적용할지에 대한 정보
-{ } : 선택한 요소에 적용할 스타일을 정의하는 영역
-속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보(생삭, 너비, 높이 등...)
-속성값 : 어떻게 정의하고 싶은지에 대한 정보
Example
p{
color: red;
}
-선택자 : p태그에 스타일을 적용
-{ } : 중괄호 안의 정보들을 p태그에 정의하겠다.
-속성명 : p태그에 색상을 변경하겠다.
-속성값 : p태그를 red색으로 변경하겠다.
-CSS에서 주석처리는 /* 주석처리 */를 사용한다.
아마 저번 HTML에서 CSS 아주 살짝 다뤘을 때 위의 내용들을 설명했던 것으로 기억한다.
다음은 HTML에 CSS를 입히는 방법에 대해 설명하겠다.
HTML 문서9에 CSS 문서를 적용하고자 할 때는 다음과 같은 방식을 사용할 수 있다.
1. inline 적용
2. internal 방식(선언적방식) : <style></style>
3. external 방식 : 외부파일 참조
이렇게 3 가지가 있다.
인라인 스타일이란 태그에 style 속성을 추가하여 요소에 직접 스타일을 정의하는 방식이다.
따라서 위의 예시처럼 선택자를 이용하여 작성할 필요는 없다. 하지만 웹 콘텐츠와 스타일 시트 분리를 위해서는 사용하지 않는 것을 권장한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p style="color:red;">이 글은 빨간색입니다</p>
</body>
</html>위는 p 태그에 직접 스타일을 입힌 예시이다
다음은 출력 결과다
다음은 스타일 태그에 대해 설명하겠다.
스타일 태그란 HTML 문서에 style 태그를 추가하여 그 안에 CSS 코드를 작성하는 방식이다.
(저번 HTML에서 CSS를 적용했을 때 이 방식을 사용했었다.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 선택자를 활용한 CSS 코드이다 */
p{
color: green;
}
</style>
</head>
<body>
<p style="color:red;">이 글은 빨간색입니다</p>
<!-- 위는 인라인 스타일을 적용한 p 태그이고
아래는 인라인 스타일을 적용하지 않은 p 태그이다 -->
<P>이 글은 초록색입니다</P>
</body>
</html>다음은 실행 결과다
마지막으로 문서간 연결에 대해 설명하고 포스팅을 마치겠다.
문서간 연결이란 확장지가 .css인 스타일 시트 파일을 생성해 그 안에 CSS 코드를 작성하고 HTML문서에 이를 연결할 수 있다. 이때 link 태그를 사용한다. link태그는 HTML문서의 head 태그 내부에서 작성해야 한다.
다음은 link 태그를 사용하기 위한 기본 문법이다.
<link href="./style.css" rel="stylesheet">
href : 연결하고자 하는 외부 소스의 url을 기술하는 속성
rel : 현재 HTML 문서와 외부 소스의 연관 관계를 기술하는 속성
자 link 태그를 적용해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- head 태그 안에 작성한 link 태그를 활용해 문서를 적용한 모습이다 -->
<link rel="stylesheet" href="./css/mystyle.css">
<style>
p{
color: green;
}
</style>
</head>
<body>
<p style="color:red;">이 글은 빨간색입니다</p>
<P>이 글은 초록색입니다</P>
</body>
</html>다음은 실행결과다
배경 전체를 하늘색으로 바꿔주는 외부 파일을 사용하여 적용된 모습이다.
자 이렇게 CSS를 적용하는 세 가지 방식에 대해 알아보았다.
'FullStack Steps > CSS Practicing' 카테고리의 다른 글
| CSS 레이아웃 만들기 2 (0) | 2025.01.17 |
|---|---|
| CSS 레이아웃 만들기 1 (0) | 2025.01.15 |
| CSS 수평메뉴 수직메뉴 간단하게 만들어 보기 (0) | 2025.01.07 |
| CSS 선택자(Selector)의 요소 정리 (0) | 2025.01.02 |