1 .CSS란?
더보기
CSS(Cascading Style Sheets)
-CSS는 웹 페이지의 스타일을 정의하는 언어입니다.
-CSS3는 2005년 정의되었으면, 참고로 CSS2 sns 1998년,CSS1은 1996년에 제정되었습니다.
CSS의 역활
HTML로 구조화된 콘텐츠를 예쁘게 브라우저 상에 렌더링 처리합니다.
-HTML 은 구조와 의미(Semantic Web)를 담당.
-CSS는 이를 통해 화면에 보이는 부분의 스타일을 정의합니다.
JavaScript는 사용자 인터페이스 등을 조정합니다.
핵심 개념
웹 페이지는 HTML, CSS, JavaScript로 표현됩니다.
HTML ; 구조
CSS: 스타일
JavaScript: 동적 기능
2. Selector(선택자)
더보기
CSS Selector란?
-HTML 문서의 특정 부분에 대해 렌더링 방법을 정의하기 위해서는 특정 부분을 선택할 수 있어야 합니다.
-CSS Selector는 이런 특정 부분을 선택하기 위한 문법입니다.
| 실습 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 선택자 연습하기</title>
<!-- 내부 스타일 시트 -->
<style>
/* 선택자 -> 태그 선택자 */
p {
color: yellow;
}
/* 선택자 -> 아이디 선택자 : id가 temp-01 요소에 스타일을 적용(# 아이디를 의미한다) */
#temp-01 {
color: blue;
font-size: 20px;
font-weight: bold;
}
/* 선택자 -> 클래스 선택자: class="temp-02"인 요소들을 선택한다 */
.temp-02 {
color: gold;
font-size: 22px;
font-weight: 800;
}
</style>
</head>
<body>
<h2>CSS 선택자란</h2>
<p id="temp">여기는 첫번째 p태그야</p>
<p id="temp-01">여기는 두번째 p태그야</p>
<p class="temp-02">여기는 세번째 p태그야</p>
<p class="temp-02">여기는 네번째 p태그야</p>
</body>
</html>|도전 과제
더보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="description" content="Tenco Online 학습 리소스 페이지로, HTML과 CSS를 학습하세요.">
<meta name="keywords" content="HTML, CSS, Learning">
<meta name="author" content="Tenco">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tenco 학습 리소스</title>
</head>
<body>
<!-- 제목 -->
<h1>Tenco 학습 리소스</h1>
<p>HTML과 CSS를 배우기 위한 추천 리소스를 확인하세요!</p>
<!-- 리소스 목록 -->
<h2>추천 자료</h2>
<div>
<p id="highlight">이 자료는 초보자에게 특히 추천됩니다!</p>
<ul>
<li class="resource">HTML 기초 튜토리얼</li>
<li class="resource">CSS 선택자 가이드</li>
<li>웹 디자인 입문</li>
</ul>
</div>
<!-- 링크 -->
<p>더 많은 자료를 보려면 아래 링크를 클릭하세요:</p>
<a href="https://www.w3schools.com/" target="_blank">학습 사이트 방문</a>
<!-- 내부 스타일 시트 -->
<style>
/* h1 태그: 페이지 제목 스타일링 */
h1 {
color: navy;
font-size: 32px;
text-align: center;
}
/* h2 태그: 섹션 제목 스타일링 */
h2 {
color: #333;
font-size: 24px;
margin-top: 20px;
}
/* p 태그: 기본 문단 스타일 */
p {
color: #444;
font-size: 16px;
line-height: 1.5;
}
/* 아이디 선택자: 강조 문단 스타일링 */
#highlight {
color: red;
font-weight: bold;
font-size: 18px;
}
/* 클래스 선택자: 리소스 목록 항목 스타일링 */
.resource {
color: green;
font-size: 16px;
font-style: italic;
}
/* a 태그: 링크 스타일링 */
a {
color: blue;
text-decoration: underline;
}
</style>
</body>
</html>728x90
'HTML CSS' 카테고리의 다른 글
| (HTML/CSS/JavaScript)CSS 선택자(기본 선택자) - 9 (0) | 2025.05.29 |
|---|---|
| (HTML/CSS/JavaScript)CSS 크기와 단위, 색상 - 8 (0) | 2025.05.28 |
| (HTML/CSS/JavaScript)시멘틱 태그란 - 6 (0) | 2025.05.28 |
| (HTML/CSS/JavaScript) HTML 속성이란? - 4 (0) | 2025.05.28 |
| (HTML/CSS/JavaScript) HTML 기본 템플릿에 이해 - 3 (1) | 2025.05.28 |