CSS란
CSS는 Cascading Style Sheets의 약어로 태그들이 가지고 있는 기본 속성에 속성을 더해 웹페이지를 꾸밀때 쓰이는 코드이다.
html 문서 내에서 <style>을 사용하여 사용할 수도 있으며 <link>를 활용하여 외부의 파일을 불러 올 수 도 있다.
CSS 기본 문법
CSS는 속성명 = "속성 값"으로 이루어지며 특정 클래스만 값을 적용하거나 하나의 클래스를 여러곳에 적용 시켜 줄 수 있다.
CSS 선택자 <ID, CLASS>
div, p, h1 태그에 일괄적으로 css를 적용하여 사용 할 수 있지만 특정 태그만 css를 적용 할 수 있게 해준다.
id 선택자는 파일내에 딱 1개만 사용할 수 있으며 class 선택자는 같은 태그라도 다른 스타일 적용이 가능하다.
또한 id와 class 선택자를 동시에 적용 했을시 id 선택자가 우선적으로 적용된다.
간단한 코드를 보면서 이해해 보자.
소스 코드
- html 문서 내부에 css를 작성할 시 <style> 태그를 사용한다.
- <div style="color: red"> <div style="color: blue"> <div style="color: green">과 같이 동작한다.
- id 선택자는 style 작성시 #을 붙여주며, class 선택자는 .을 붙힌다.
<style>
#main {color: red;}
.sub1 {color: blue;}
.sub2 {color: green;}
.sub3 {color: black;}
</style>
<body>
<div id="main"> 안녕하세요 </div>
<div class="sub1"> 안녕하세요1 </div>
<div class="sub2"> 안녕하세요2 </div>
<div id="main" class="sub3"> 안녕하세요3 </div>
</body>
결과
CSS 결합자 <자손, 자식, 인접 형제, 일반 형제 결합자>
결합자는 자손 결합자, 자식 결합자, 인접 형제 결합자, 일반 형제 결합자가 있다.
간단한 코드를 통해 종류별 동작 방식을 알아보자.
소스 코드
- 자손 결합자
- 부모 태그 안에 있는 자식 태그들에게 스타일을 적용하고 싶을때 사용
- main class 안에 있는 p 태그 들의 폰트색이 빨간색으로 바뀜
<!-- CSS -->
<style>
#main p {
color : red;
font-size: 16px;
}
</style>
<!-- html -->
<body>
<div id="main">
<div class="test">
<p>첫번째 텍스트</p>
<span>두번째 텍스트</span>
</div>
<div class="test1">
<p>세번째 텍스트</p>
<span>네번째 텍스트</span>
</div>
</div>
</body>
결과
소스 코드
- 자식 결합자. 기호 -> >
- test 클래스의 자식 태그인 p 태그만 글씨 색이 변경됨
- 바로 직계 자식만 적용되므로 #main > p { } 는 적용 되지 않음 (main > test > p 순이기 때문)
<!-- CSS -->
<style>
.test > p {
color : red;
font-size: 16px;
}
</style>
<!-- html -->
<body>
<div id="main">
<div class="test">
<p>첫번째 텍스트</p>
<span>두번째 텍스트</span>
</div>
<div class="test1">
<p>세번째 텍스트</p>
<span>네번째 텍스트</span>
</div>
</div>
</body>
결과
소스 코드
- 일반 형제 결합자. 기호 -> ~
- 바로 다음 클래스에 css가 적용
- span 태그 바로 아래 있는 p 태그의 글씨색이 변함
<!-- CSS -->
<style>
span ~ p {
color : red;
font-size: 16px;
}
</style>
<!-- html -->
<body>
<div id="main">
<div class="test">
<p>첫번째 텍스트</p>
<span>두번째 텍스트</span>
<p>일반 형제 결합자</p>
<p>일반 형제 결합자</p>
</div>
</div>
</body>
결과
소스 코드
- 인접 형제 결합자. 기호 -> +
- span 태그 바로 밑에 있는 p 태그에만 css가 적용되고 다음 p 태그에는 css가 적용되지 않음
<!-- CSS -->
<style>
/* 인접 형제 결합자 */
span + p {
color : red;
font-size: 16px;
}
</style>
<!-- html -->
<body>
<div id="main">
<div class="test">
<p>첫번째 텍스트</p>
<span>두번째 텍스트</span>
<p>인접 형제 결합자</p>
<p>인접 형제 결합자</p>
</div>
</div>
</body>
결과
728x90
'CSS' 카테고리의 다른 글
| [CSS] POSITION 속성 이해하기 (0) | 2023.03.03 |
|---|---|
| [CSS] DISPLAY 를 활용한 테이블 만들기 (0) | 2023.03.02 |