안녕하세요. Codinglee 입니다.
왕초보도 이해할 수 있는 웹 프로그래밍 시간입니다.
이번 내용은 지난 번 HTML 사용법에 이은 CSS 사용법 입니다.
CSS를 사용해서 꾸미는 방법을 자세하게 파헤쳐 보겠습니다.
이전 시리즈 보기
시리즈 1. 챗지피티 활용 프로그래밍 1 – 계산기 만들기 (준비)
시리즈 2. 챗지피티 활용 프로그래밍 2 – 계산기 만들기
시리즈 3. 챗지피티 활용 프로그래밍 3 – 계산기 만들기
시리즈 4. 챗지피티 활용 프로그래밍 4 – 계산기 만들기(완료)
시리즈 5. 왕초보 웹 프로그래밍 1 – HTML CSS JAVASCRIPT
시리즈 6. 왕초보 웹 프로그래밍 2 – 인터넷, 웹브라우저
시리즈 7. 왕초보 웹 프로그래밍 3 – DNS(Domain Name System)
시리즈 8. 왕초보 웹 프로그래밍 4 – 서버, 클라이언트
시리즈 9. 왕초보 웹 프로그래밍 5 – 개발자 도구 살펴보기
시리즈 10. 왕초보 웹 프로그래밍 6 – HTML 태그
시리즈 11. 왕초보 웹 프로그래밍 7 – HTML 사용법, CSS
오늘의 학습 순서입니다.
[CSS 사용법]
1. CSS 입력 방법 세 가지
- 인라인 스타일
- 내부 스타일
- 외부 스타일
2. 선택자 (Selector)
– 기본 선택자
- 유형(태그) 선택자
- 클래스 선택자
- ID 선택자
- 특성 선택자
그럼 오늘 내용 시작하겠습니다.
[CSS 사용법]
CSS(Cascading Style Sheets)는 HTML 요소의 스타일을 지정하는 언어입니다.
웹페이지의 레이아웃, 색상, 글꼴 등을 설정하는 데 사용됩니다.
오늘은 CSS 입력 방법 세 가지와 CSS 선택자에 대해 알아보겠습니다.
1. CSS 입력 방법 세 가지
CSS를 HTML 문서에 적용하는 방법에는 세 가지가 있습니다.
인라인 스타일, 내부 스타일, 외부 스타일입니다.
각 방법은 목적과 상황에 맞게 사용할 수 있습니다.
1.1 인라인 스타일 (Inline Style)
인라인 스타일은 HTML 태그에 직접 스타일을 적용하는 방식입니다.
즉, style 속성을 사용하여 개별 요소에 스타일을 적용합니다.
특정 요소에만 스타일을 적용할 때 사용되지만, 유지 보수가 어렵습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>인라인 스타일 예시</title>
</head>
<body>
<h1 style="color: blue; font-size: 24px;">이것은 인라인 스타일을 사용한 제목입니다.</h1>
</body>
</html><h1 style="color: blue; font-size: 24px;">이것은 인라인 스타일을 사용한 제목입니다.</h1>위 h1 태그는 우리가 실습해 봤던 제목태그입니다.
이 태그에만 css를 적용할 때 사용할 수 있는 것이 인라인 태그입니다.
적용 결과는 다음과 같습니다.
인라인 스타일 CSS의 장점은 특정 요소에만 빠르게 스타일을 적용할 수 있다는 것입니다.
단점으로는 여러 요소에 적용할 경우 유지 보수가 어렵습니다.
1.2 내부 스타일 (Internal Style)
내부 스타일은 HTML 문서의 <head> 태그 내에 <style> 태그를 사용해 스타일을 정의하는 방식입니다.
동일한 페이지에서 여러 요소에 동일한 스타일을 적용하고 싶을 때 유용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내부 스타일 예시</title>
<style>
h1 {
color: red;
font-size: 28px;
}
</style>
</head>
<body>
<h1>이것은 내부 스타일을 사용한 제목입니다.</h1>
</body>
</html>
위 코드에서 빨간색으로 표시된 style 코드가 보이나요?
이렇게 head 태그 안 style 태그를 이용해 CSS를 적용하는 방식입니다.
결과 화면은 아래와 같습니다.
내부 스타일의 방식은 한 문서 내에서 여러 요소에 동일한 스타일을 적용할 수 있다는 장점이 있지만, 스타일이 HTML 문서에 포함되어 있으므로, 다른 문서에서 재사용하기 어렵다는 단점이 있습니다.
1.3 외부 스타일 (External Style)
외부 스타일은 별도의 CSS 파일에 스타일을 정의하고, HTML 문서에서 <link> 태그를 사용해 CSS파일을 참조하는 방식입니다.
대규모 웹사이트나 여러 페이지에 동일한 스타일을 적용할 때 가장 많이 사용됩니다.
<!-- HTML 파일 (index.html) -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>외부 스타일 예시</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>이것은 외부 스타일을 사용한 제목입니다.</h1>
</body>
</html>/* 외부 CSS 파일 (styles.css) */
h1 {
color: green;
font-size: 30px;
}외부스타일은 파일이 두 개 존재합니다.
index.html, style.css 파일입니다.
Visusal Studio Code의 모습과 결과 화면입니다.
외부스타일의 장점은 여러 HTML 파일에서 동일한 스타일을 관리할 수 있어 유지 보수에 용이합니다.
단점으로는 CSS 파일을 별도로 관리해야 한다는 점입니다.
지금까지 기본 CSS 사용 방법 세 가지에 대해 알아보았습니다.
이 방법 이외에 실제 개발을 하실 때에는 Bootstrap이나 Tailwind와 같은 라이브러리를 많이 사용하십니다.
다음에 이 부분에 대해서는 더 자세히 다뤄보겠습니다.
궁금하신 분들은 검색 또는 ChatGPT를 사용해 미리 알아보셔도 좋습니다.
2. CSS 선택자 (Selector)
CSS 선택자 는 HTML 요소를 선택하고 스타일을 적용하는 데 사용됩니다.
CSS 선택자에는 다양한 유형이 있지만, 오늘은 기본 선택자에 대해 알아보겠습니다.
2.1 유형(태그) 선택자
유형 선택자는 HTML 요소의 태그 이름을 기반으로 스타일을 적용하는 방법입니다.
예를 들어, 모든 <h1>태그에 동일한 스타일을 적용하려면 h1 선택자를 다음과 같이 사용합니다.
h1 {
color: orange;
font-size: 24px;
}위 코드에서 빨간색으로 표시된 부분이 선택자입니다.
이렇게 태그 이름인 h1을 선택하게 되면 해당 문서에 있는 모든 h1 태그의 텍스트가 오렌지색으로 변하고, 글자크기가 24px 이 적용됩니다.
2.2 클래스(class) 선택자
클래스 선택자는 .(온점) 기호를 사용하여 특정 클래스에 스타일을 지정합니다.
HTML 태그를 만들 때 class 속성을 부여해 주고 선택자로 사용합니다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>클래스 선택자 예시</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="highlight">클래스 선택자가 적용된 제목입니다.</h1>
</body>
</html>
/* styles.css */
.highlight {
color: purple;
background-color: yellow;
padding: 10px;
}위 코드의 빨간색 부분이 태그에 클래스를 지정하고
클래스 선택자를 사용해 스타일을 적용한 부분입니다.
위 예시에서는 highlight 클래스를 가진 모든 요소에 보라색 글씨와 노란색 배경이 적용됩니다.
결과 화면은 아래와 같습니다.
2.3 아이디(ID) 선택자
아이디 선택자는 # 기호를 사용하여 특정 ID를 가진 요소에 스타일을 적용합니다.
클래스와 마찬가지로 태그에 id 속성을 부여해야 사용할 수 있습니다.
아이디는 클래스와는 다르게 문서 내에서 고유해야 합니다.
같은 아이디를 가진 태그가 둘 이상 존재해서는 안됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID 선택자 예시</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="main-title">ID 선택자가 적용된 제목입니다.</h1>
</body>
</html>/* styles.css */
#main-title {
color: blue;
border: 2px solid black;
padding: 5px;
}아이디 선택자는 주로 특정한 하나의 요소에만 스타일을 적용할 때 사용합니다.
코드 실행 결과는 다음과 같습니다.
2.4 특성(속성) 선택자
특성 선택자는 HTML 요소의 속성을 기반으로 스타일을 적용합니다.
주로 input 태그나 링크 등에 특정 속성을 가진 요소를 스타일링할 때 사용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>특성 선택자 예시</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" placeholder="여기에 입력하세요">
<input type="email" placeholder="이메일을 입력하세요">
</body>
</html>/* styles.css */
input[type="text"] {
border: 2px solid blue;
background-color: lightyellow;
}
input[type="email"] {
border: 2px solid green;
background-color: lightgreen;
}위 input태그에 각각 특성 선택자를 사용하여 style 적용한 예시입니다.
결과 화면은 아래와 같습니다.
이번 포스팅에서는 CSS를 적용하는 세 가지 방법과 기본 선택자에 대해 알아보았습니다.
웹페이지의 스타일을 적용하는 데 있어 인라인, 내부, 외부 스타일의 차이와 유형, 클래스, 아이디, 특성 선택자를 활용하는 방법을 알게 되었으니 필요에 따라 적절히 사용하여 예쁘고 멋진 웹페이지 제작에 성공하시길 바라겠습니다.
오늘은 여기까지입니다.
감사합니다. Codinglee였습니다.
2024. 10. 22.(화) 판교 직장에서 씀.
