728x90
★CSS 서식 적용
- 원하는 태그(들)를 찾아서 태그에 맞는 속성 값을 넣어 적용
- CSS 문법
선택자 {속성 : 값; }
선택자 {속성명 : 값; 속성명 : 값; 속성명 : 값; }
선택자 {
속성명 : 값;
속성명 : 값;
속성명 : 값;
}- 1. 선택자 : 문서내에서 원하는 태그를 검색
- 2. 속성 : 서식의 종류
- 3. 값 : 속성의 값
★ CSS 선택자, CSS Selector
- HTML 문서내에서 서식을 적용하려는 대상 태그를 검색하는 도구
- 1. 전체 선택자 (*)
- 모든 태그를 선택한다.
- 모든 태그에 동일한 서식을 적용할 때 사용
- 사용 ex)
<style>
* { color : green;}
</style>
- 2. 태그 선택자
- 태그명을 가지고 원하는 태그를 선택한다.
- 검색된 모든 태그를 일괄 적용 > 생산성!!
- 사용 쉬움
- 단점 > 같은 태그를 일괄 적용
- 사용 ex)
<style>
h2 {color : green;}
p { color : gray;}
li { color : yellow;}
</style>
- 3. ID 선택자
- 태그에 명시된 id 속성을 사용해서 태그를 선택
- 태그명#ID, #ID
- 원하는 태그를 직접 선택할 수 있다.
- 일괄 적용이 안된다. > id는 유일하기 때문에
- 사용 ex)
<style>
h2#title { color : orange;}
</style>
<h2 id="title">수업 내용</h2>
- 4. Class 선택자
- 태그에 명시된 Class 속성을 검색해서 태그를 선택
- 태그명.Class, .Class
- 일괄 적용이 된다. > class 그룹을 묶기 위한 식별자라서
- 사용 ex)
<style>
h2#title { color : orange;}
li.item{color:greenyellow;}
</style>
<h2 id="title">수업 내용</h2>
<ol>
<li class="item">문단 태그</li>
<li class="item">목록 태그</li>
<li class="item">테이블 태그</li>
<li class="item">이미지 태그</li>
<li class="item">링크 태그</li>
</ol>
- 5. 그룹 선택자
- 2개 이상의 선택자를 한번에 적용하는 방법
- 선택자, 선택자, 선택자 { 구현부; }
- 사용 ex)
<style>
h1, h2 {color : orange;}
p, h2#title, li.item { text-decoration: underline;}
</style>
- 6. 자식 선택자(Child Selector)
- 선택자 > 선택자 {}
- 부모를 조건으로 자식 선택
- 구체적
- 정밀도 높음 + 범위 좁음
- 사용 ex)
<style>
/* 부모를 조건으로 자식을 선택*/
ol > li { color:orange;}
ul > li { color: blue;}
</style>
/* 이런 표현도 가능함 */
ol > li > span {color : red;}
HTML > body > ol > li > span {color : red;}
- 7. 자손 선택자(Descendant Selector)
- 선택자 선택자 {}
- 조상을 조건으로 자식 선택
- 정밀도 낮음 + 범위 넓음
- 사용 ex)
ol span {color : red;}
- 8. 인접 형제 선택자(Adjacent Sibling Selector)
- 선택자 + 선택자
- 정밀도 높음 + 범위 좁음
- 자식 선택자 느낌
- 사용 ex)
<style>
p + span {color : red;}
div + span { color : red;}
</style>
- 9. 형제 선택자(Sibling Selector)
- 선택자 ~ 선택자
- 정밀도 낮음 + 범위 높음
- 자손 선택자 느낌
- 사용 ex)
<style>
div ~ span { color : red;}
</style>
- 10. 의사 클래스(Pseudo Class)
- 실제 태그에 class 속성에 명시되어 있지 않은데..
- 선택자에서 진짜 존재하는 클래스처럼 사용하는 클래스
- <a> 태그만 지원 > 모든 태그 확장 + 종류 증가
- 사용 ex)
- a:link { color : red; } : 브라우저가 한번도 방문하지 않은 상태
- a:visited { color : green; } : 브라우저가 방문했던 상태
- a:active { color : blueviole;} : 활성화 상태
- a:hover { color : orange; } : 마우스 커서가 올라가있는 상태
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 브라우저가 한번도 방문하지 않은 상태 */
a:link { color : red; }
/* 브라우저가 방문했던 상태 */
a:visited { color : green; }
/* 활성화 상태 */
a:active { color : blueviole;}
/* 마우스 커서가 올라가 있는 상태 */
a:hover { color : orange; }
</style>
</head>
<body>
<h1> 링크 </h1>
<a href="https://naver.com">네이버로 이동합니다.</a>
<br>
<a href="https://amazon.com">아마존으로 이동합니다.</a>
</body>
</html>**********보편적인 사용**********
a {
color : black;
text-decoration: none;
}
a:hover {
color : red;
}
■ HTML 소스
- 기본 HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>수업 일지</h1>
<p>오늘은 HTML 수업을 합니다.</p>
<p>HTML 수업이 끝나면 CSS 수업으로 넘어갑니다.</p>
<h2>수업 내용</h2>
<ol>
<li>문단 태그</li>
<li>목록 태그</li>
<li>테이블 태그</li>
<li>이미지 태그</li>
<li>링크 태그</li>
</ol>
<h2>복습할 내용</h2>
<ul>
<li>테이블 셀 병합하기</li>
<li>이미지 사이즈 변경하기</li>
<li>내부 링크 생성하기</li>
</ul>
</body>
</html>- 기본 HTML 코드2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>커리큘럼</h1>
<ol>
<li >Java <span>Programing</span></li>
<li>Oracle Database</li>
<li>JDBC <span>Programing</span></li>
<li>Client <span>Programing(<b>HTML</b>)</span></li>
<li>Client <span>Programing(<b>CSS</b>)</span></li>
</ol>
<h2>주의사항</h2>
<ul>
<li>구글 드라이브에 <span>백업본</span>을 다운로드 받으세요.</li>
<li>과제는 <span>금요일</span>까지 제출하세요.</li>
<li>VS Code 설치 바랍니다.</li>
</ul>
</body>
</html>- 기본 HTML 코드 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>p태그</p>
<p>p태그</p>
<p>p태그</p>
<span>span 태그</span>
<div>div 태그</div>
<p>p태그</p>
<span>span 태그</span>
<p>p태그</p>
<div>div 태그</div>
<div>div 태그</div>
<span>span 태그</span>
</body>
</html>
728x90
'웹페이지' 카테고리의 다른 글
| CSS STEP 4 - Emmet (0) | 2023.04.13 |
|---|---|
| CSS STEP 3 - 충돌 (0) | 2023.04.13 |
| CSS STEP 1 - CSS 기초 (0) | 2023.04.12 |
| HTML STEP 13 - HTML5 (0) | 2023.04.12 |
| HTML STEP 12 - Table 예제 (2) | 2023.04.12 |
728x90
★CSS 서식 적용
- 원하는 태그(들)를 찾아서 태그에 맞는 속성 값을 넣어 적용
- CSS 문법
선택자 {속성 : 값; }
선택자 {속성명 : 값; 속성명 : 값; 속성명 : 값; }
선택자 {
속성명 : 값;
속성명 : 값;
속성명 : 값;
}- 1. 선택자 : 문서내에서 원하는 태그를 검색
- 2. 속성 : 서식의 종류
- 3. 값 : 속성의 값
★ CSS 선택자, CSS Selector
- HTML 문서내에서 서식을 적용하려는 대상 태그를 검색하는 도구
- 1. 전체 선택자 (*)
- 모든 태그를 선택한다.
- 모든 태그에 동일한 서식을 적용할 때 사용
- 사용 ex)
<style>
* { color : green;}
</style>- 2. 태그 선택자
- 태그명을 가지고 원하는 태그를 선택한다.
- 검색된 모든 태그를 일괄 적용 > 생산성!!
- 사용 쉬움
- 단점 > 같은 태그를 일괄 적용
- 사용 ex)
<style>
h2 {color : green;}
p { color : gray;}
li { color : yellow;}
</style>- 3. ID 선택자
- 태그에 명시된 id 속성을 사용해서 태그를 선택
- 태그명#ID, #ID
- 원하는 태그를 직접 선택할 수 있다.
- 일괄 적용이 안된다. > id는 유일하기 때문에
- 사용 ex)
<style>
h2#title { color : orange;}
</style>
<h2 id="title">수업 내용</h2>- 4. Class 선택자
- 태그에 명시된 Class 속성을 검색해서 태그를 선택
- 태그명.Class, .Class
- 일괄 적용이 된다. > class 그룹을 묶기 위한 식별자라서
- 사용 ex)
<style>
h2#title { color : orange;}
li.item{color:greenyellow;}
</style>
<h2 id="title">수업 내용</h2>
<ol>
<li class="item">문단 태그</li>
<li class="item">목록 태그</li>
<li class="item">테이블 태그</li>
<li class="item">이미지 태그</li>
<li class="item">링크 태그</li>
</ol>- 5. 그룹 선택자
- 2개 이상의 선택자를 한번에 적용하는 방법
- 선택자, 선택자, 선택자 { 구현부; }
- 사용 ex)
<style>
h1, h2 {color : orange;}
p, h2#title, li.item { text-decoration: underline;}
</style>- 6. 자식 선택자(Child Selector)
- 선택자 > 선택자 {}
- 부모를 조건으로 자식 선택
- 구체적
- 정밀도 높음 + 범위 좁음
- 사용 ex)
<style>
/* 부모를 조건으로 자식을 선택*/
ol > li { color:orange;}
ul > li { color: blue;}
</style>
/* 이런 표현도 가능함 */
ol > li > span {color : red;}
HTML > body > ol > li > span {color : red;}- 7. 자손 선택자(Descendant Selector)
- 선택자 선택자 {}
- 조상을 조건으로 자식 선택
- 정밀도 낮음 + 범위 넓음
- 사용 ex)
ol span {color : red;}- 8. 인접 형제 선택자(Adjacent Sibling Selector)
- 선택자 + 선택자
- 정밀도 높음 + 범위 좁음
- 자식 선택자 느낌
- 사용 ex)
<style>
p + span {color : red;}
div + span { color : red;}
</style>
- 9. 형제 선택자(Sibling Selector)
- 선택자 ~ 선택자
- 정밀도 낮음 + 범위 높음
- 자손 선택자 느낌
- 사용 ex)
<style>
div ~ span { color : red;}
</style>- 10. 의사 클래스(Pseudo Class)
- 실제 태그에 class 속성에 명시되어 있지 않은데..
- 선택자에서 진짜 존재하는 클래스처럼 사용하는 클래스
- <a> 태그만 지원 > 모든 태그 확장 + 종류 증가
- 사용 ex)
- a:link { color : red; } : 브라우저가 한번도 방문하지 않은 상태
- a:visited { color : green; } : 브라우저가 방문했던 상태
- a:active { color : blueviole;} : 활성화 상태
- a:hover { color : orange; } : 마우스 커서가 올라가있는 상태
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 브라우저가 한번도 방문하지 않은 상태 */
a:link { color : red; }
/* 브라우저가 방문했던 상태 */
a:visited { color : green; }
/* 활성화 상태 */
a:active { color : blueviole;}
/* 마우스 커서가 올라가 있는 상태 */
a:hover { color : orange; }
</style>
</head>
<body>
<h1> 링크 </h1>
<a href="https://naver.com">네이버로 이동합니다.</a>
<br>
<a href="https://amazon.com">아마존으로 이동합니다.</a>
</body>
</html>**********보편적인 사용**********
a {
color : black;
text-decoration: none;
}
a:hover {
color : red;
}
■ HTML 소스
- 기본 HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>수업 일지</h1>
<p>오늘은 HTML 수업을 합니다.</p>
<p>HTML 수업이 끝나면 CSS 수업으로 넘어갑니다.</p>
<h2>수업 내용</h2>
<ol>
<li>문단 태그</li>
<li>목록 태그</li>
<li>테이블 태그</li>
<li>이미지 태그</li>
<li>링크 태그</li>
</ol>
<h2>복습할 내용</h2>
<ul>
<li>테이블 셀 병합하기</li>
<li>이미지 사이즈 변경하기</li>
<li>내부 링크 생성하기</li>
</ul>
</body>
</html>- 기본 HTML 코드2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>커리큘럼</h1>
<ol>
<li >Java <span>Programing</span></li>
<li>Oracle Database</li>
<li>JDBC <span>Programing</span></li>
<li>Client <span>Programing(<b>HTML</b>)</span></li>
<li>Client <span>Programing(<b>CSS</b>)</span></li>
</ol>
<h2>주의사항</h2>
<ul>
<li>구글 드라이브에 <span>백업본</span>을 다운로드 받으세요.</li>
<li>과제는 <span>금요일</span>까지 제출하세요.</li>
<li>VS Code 설치 바랍니다.</li>
</ul>
</body>
</html>- 기본 HTML 코드 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>p태그</p>
<p>p태그</p>
<p>p태그</p>
<span>span 태그</span>
<div>div 태그</div>
<p>p태그</p>
<span>span 태그</span>
<p>p태그</p>
<div>div 태그</div>
<div>div 태그</div>
<span>span 태그</span>
</body>
</html>
728x90
'웹페이지' 카테고리의 다른 글
| CSS STEP 4 - Emmet (0) | 2023.04.13 |
|---|---|
| CSS STEP 3 - 충돌 (0) | 2023.04.13 |
| CSS STEP 1 - CSS 기초 (0) | 2023.04.12 |
| HTML STEP 13 - HTML5 (0) | 2023.04.12 |
| HTML STEP 12 - Table 예제 (2) | 2023.04.12 |
