오늘 배운 내용
- CSS
학습한 내용
CSS란
CSS(Cascading Style Sheets)는 웹페이지를 꾸미려고 작성하는 코드이다.
HTML에서 웹디자인을 위한 코드를 작성하게 되면 HTML의 본 기능인 뼈대를 이루는 코드들이 복잡해지고, 중복이 발생할 수 있다. 이러한 이유에서 CSS가 등장하게 되었고, CSS는 <head> 태그의 자식태그로 <style>을 만들어서 작성한다.
CSS의 기본구조
css의 기본구조는 다음과 같다.
- CSS의 문법은 선택자(Selector)와 선언부(Declaration)으로 구성된다.
- 선택자는 CSS를 적용하고자 하는 HTML의 요소(element)이다.
- 선언부는 하나 이상의 선언들을 세미콜론으로 구분하여 포함할 수 있으며 중괄호를 사용하여 전체를 둘러싼다.
- 각 선언은 속성(Property)와 속성값(Value)를 가지며 콜론으로 구분한다.
Selector(선택자)
CSS 선택자는 스타일을 적용할 HTML의 요소를 말한다.
선택자에는 id, class, group 선택자가 있다.
id 선택자
id 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택한다.
호출은 '#아이디명'으로 한다.
<style>
#btn {
color : red;
{
</style>
...
<p id="btn"> 글씨 빨간색으로 </p>
class 선택자
class 선택자는 특정 집단의 여러 오소를 한번에 선택할 때 사용한다.
호출은 '.클래스명'으로 한다.
<style>
.btn {
color : red;
{
</style>
...
<h1 class="btn"> 글씨 빨간색으로 </h1>
...
<p class="btn"> 글씨 빨간색으로 </p>
group 선택자
group 선택자는 여러 선택자를 같이 사용하고자 할 때 사용한다
호출은 '태그명'으로 하고, 여러개를 호출하는 경우는 ,로 구분한다.
<style>
h1 {property: value;}
a,p {property: value;}
h1,h2 {property: value;}
</style>
참고
'TIL&WIL' 카테고리의 다른 글
| 2023-05-11 TIL (Java : Scanner 클래스, 예외 복습) (0) | 2023.05.11 |
|---|---|
| 2023-05-10 TIL (Java : 상속) (0) | 2023.05.10 |
| 2023-05-08 TIL (HTML) (0) | 2023.05.08 |
| 2023-05-04 TIL (Java : 클래스와 인스턴스) (0) | 2023.05.04 |
| 2023-05-03 TIL (Java : Static, FileWriter, FileReader 클래스) (0) | 2023.05.03 |