CSS는 어떤 식으로 작성할까?
문법 형식
--
CSS의 문법은 크게 "선택자"와 "선언부"로 구분된다.
- 선택자 : CSS스타일을 적용할 HTML 태그(요소)를 선택하는 영역
- 선언부 : "선택자"에서 선택한 태그에 적용할 스타일을 작성하는 영역 (중괄호 사용)
"선언부"에 작성하는 스타일은 반드시 "속성"과 "값"을 한 쌍으로 작성해야 하며,
값 뒤에는 세미콜론(;)을 넣어야 하며, 여러 스타일을 연속하여 작성 또한 가능하다.
예시 코드
h1{
font-size: 24px;
color: red;
}해당 코드는
h1 태그에 사용된 텍스트 크기를 24px, 색상은 빨간색으로 지정하는 코드다.
--
주석
--
CSS에서도 주석을 담을 수 있다.
기본 형식
/* 주석 내용 */자바처럼 "//"는 사용 불가
--
CSS 적용하기
--
CSS를 HTML문서에 적용하는 방법은 대표적으로 3가지가 존재한다.
- 내부 스타일 시트 사용하기
- 외부 스타일 시트 사용하기
- 인라인 스타일 사용하기
내부 스타일 시트 사용 방법
HTML 파일(문서) 내부에 CSS 코드를 작성하여 적용하는 방법으로
HTML에서 제공하는 "style 태그"를 통해 해당 태그의 콘텐츠에 CSS 코드를 작성한다.
기본 형식
<style>
/* CSS 코드 */
</style>
예시 코드
<head>
<title>내부 스타일 시트</title>
<style>
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>내부 스타일 시트</h1>
</body>"style 태그"를 사용하는 위치는 정해진 기준은 없지만, 일반적으로 "head 태그"에 작성한다.
웹 브라우저는 HTML 문서를 해석할 때 HTML 문서에 작성된 코드를 첫 번째 줄부터 순차적으로 해석하기 때문에
"head 태그"에 CSS코드를 작성하면 "body 태그"에 작성된 내용이 화면에 노출되기 전에 CSS를 불러와
빠르게 디자인을 적용할 수 있는 장점이 존재한다.
다만 웹 브라우저에서 HTML 문서를 해석할 때마다 CSS코드를 매번 다시 읽어야 하기 때문에
성능상으로는 좋지 못하다.
외부 스타일 시트 사용 방법
CSS 코드를 작성하는 별도의 CSS파일을 만들어 HTML 문서와 CSS파일을 연결하는 방법으로
CSS 코드를 작성하는 파일의 확장자는 ".css"이어야 한다.
연결하는 방법으로는 HTML 문서에서 "link 태그"를 통해 연결할 수 있다.
기본 형식
<link rel="stylesheet" href="css 파일 경로">rel 속성은 연결한 CSS파일과의 관계를 정의하는 속성으로 연결한 CSS 파일에 대해 알아보기 편하게 작성한다.
예시 코드
/* style.css 파일 */
h1{
color:red;
}<head>
<title>외부 스타일 시트</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>외부 스타일 시트</h1>
</body>
인라인 스타일 사용 방법
HTML 태그에서 "style 속성"을 통해 원하는 태그에 바로 CSS 코드를 작성하여 적용하는 방법으로
태그에 직접 CSS코드를 작성하는 방법이라서 CSS의 기본 문법 형식에서 선택자는 필요가 없다.
기본 형식
<태그 style="CSS 코드"></태그>
예시 코드
<body>
<h1 style="color:red; font-size:24px">인라인 스타일</h1>
</body>
위 3가지 방법 중에서 정답은 없지만,
실무에서는 대부분 "외부 스타일 시트" 방법을 선호한다.
코드를 유지 보수하기 편하고 성능적으로도 가장 좋기 때문이다.
--
'Language > CSS' 카테고리의 다른 글
| CSS 기본 특징 (0) | 2025.02.28 |
|---|---|
| 다양한 선택자 조합 방법 (0) | 2025.02.27 |
| 가상 요소/클래스 선택자 사용하기 (0) | 2025.02.27 |
| 조합 선택자 지정 방법 종류 (0) | 2025.02.26 |
| 기본 선택자 지정 방법 종류 (0) | 2025.02.25 |
CSS는 어떤 식으로 작성할까?
문법 형식
--
CSS의 문법은 크게 "선택자"와 "선언부"로 구분된다.
- 선택자 : CSS스타일을 적용할 HTML 태그(요소)를 선택하는 영역
- 선언부 : "선택자"에서 선택한 태그에 적용할 스타일을 작성하는 영역 (중괄호 사용)
"선언부"에 작성하는 스타일은 반드시 "속성"과 "값"을 한 쌍으로 작성해야 하며,
값 뒤에는 세미콜론(;)을 넣어야 하며, 여러 스타일을 연속하여 작성 또한 가능하다.
예시 코드
h1{
font-size: 24px;
color: red;
}해당 코드는
h1 태그에 사용된 텍스트 크기를 24px, 색상은 빨간색으로 지정하는 코드다.
--
주석
--
CSS에서도 주석을 담을 수 있다.
기본 형식
/* 주석 내용 */자바처럼 "//"는 사용 불가
--
CSS 적용하기
--
CSS를 HTML문서에 적용하는 방법은 대표적으로 3가지가 존재한다.
- 내부 스타일 시트 사용하기
- 외부 스타일 시트 사용하기
- 인라인 스타일 사용하기
내부 스타일 시트 사용 방법
HTML 파일(문서) 내부에 CSS 코드를 작성하여 적용하는 방법으로
HTML에서 제공하는 "style 태그"를 통해 해당 태그의 콘텐츠에 CSS 코드를 작성한다.
기본 형식
<style>
/* CSS 코드 */
</style>
예시 코드
<head>
<title>내부 스타일 시트</title>
<style>
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>내부 스타일 시트</h1>
</body>"style 태그"를 사용하는 위치는 정해진 기준은 없지만, 일반적으로 "head 태그"에 작성한다.
웹 브라우저는 HTML 문서를 해석할 때 HTML 문서에 작성된 코드를 첫 번째 줄부터 순차적으로 해석하기 때문에
"head 태그"에 CSS코드를 작성하면 "body 태그"에 작성된 내용이 화면에 노출되기 전에 CSS를 불러와
빠르게 디자인을 적용할 수 있는 장점이 존재한다.
다만 웹 브라우저에서 HTML 문서를 해석할 때마다 CSS코드를 매번 다시 읽어야 하기 때문에
성능상으로는 좋지 못하다.
외부 스타일 시트 사용 방법
CSS 코드를 작성하는 별도의 CSS파일을 만들어 HTML 문서와 CSS파일을 연결하는 방법으로
CSS 코드를 작성하는 파일의 확장자는 ".css"이어야 한다.
연결하는 방법으로는 HTML 문서에서 "link 태그"를 통해 연결할 수 있다.
기본 형식
<link rel="stylesheet" href="css 파일 경로">rel 속성은 연결한 CSS파일과의 관계를 정의하는 속성으로 연결한 CSS 파일에 대해 알아보기 편하게 작성한다.
예시 코드
/* style.css 파일 */
h1{
color:red;
}<head>
<title>외부 스타일 시트</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>외부 스타일 시트</h1>
</body>
인라인 스타일 사용 방법
HTML 태그에서 "style 속성"을 통해 원하는 태그에 바로 CSS 코드를 작성하여 적용하는 방법으로
태그에 직접 CSS코드를 작성하는 방법이라서 CSS의 기본 문법 형식에서 선택자는 필요가 없다.
기본 형식
<태그 style="CSS 코드"></태그>
예시 코드
<body>
<h1 style="color:red; font-size:24px">인라인 스타일</h1>
</body>
위 3가지 방법 중에서 정답은 없지만,
실무에서는 대부분 "외부 스타일 시트" 방법을 선호한다.
코드를 유지 보수하기 편하고 성능적으로도 가장 좋기 때문이다.
--
'Language > CSS' 카테고리의 다른 글
| CSS 기본 특징 (0) | 2025.02.28 |
|---|---|
| 다양한 선택자 조합 방법 (0) | 2025.02.27 |
| 가상 요소/클래스 선택자 사용하기 (0) | 2025.02.27 |
| 조합 선택자 지정 방법 종류 (0) | 2025.02.26 |
| 기본 선택자 지정 방법 종류 (0) | 2025.02.25 |
