반응형
🌐 웹 기초
지난 시간에는 HTML의 UI를 담당하는 Button과 Input 태그 등에 학습하였다. 이번 시간부터는 HTML이 아닌 CSS를 배워보도록 하자.
🚂 CSS
이전 시간과 마찬가지로 CSS를 학습하기 전에 앞서, CSS의 정보를 한눈에 볼 수 있도록 정리한 사이트 https://www.w3schools.com/css/default.asp 를 통해 어떻게 사용하는지 확인하고 이를 실습한다.
사용이유
CSS는 엄연히 Cascading Style Sheet로 웹사이트의 표현 방법을 정해주는 스타일 시트 언어이다. 그런데 CSS는 왜 생겨났을까? 바로 HTML 안에 태그(<h1>, <b>, <i> 등)와 비주얼 요소(span 등) 섞여버리기 시작하여, 태그 영역과 비주얼 요소의 영역 구분이 점차 힘들어지고 온갖 레이아웃과 디자인 정보가 HTML안에 욱여넣다 보니 기능과 비주얼의 요소를 구분하기 힘들어져서 만들어졌다.
기본문법(Syntax)
h1이 의미하는 것은 누구에게 적용할 것이냐, 즉 대상을 나타낸다라고 볼 수 있다. color:blue, font-size:12px는 대상에게 어떤 값을 사용할 것이냐를 나타낸다. 적용 대상이 붙어있는 Json이라고 생각하면 조금 편할 것 같다.
적용방법(Selector)
총 5가지의 방법이 존재한다.
- element Selector
특정 태그 (예. <p>)에게 모두 적용시키는 방법이 있다. - id Selector
#으로 매핑한 대상에게 적용시키는 방법이 있다. - class Selector
id와 유사하게 #이 아닌 .을 사용하여 적용시키는 방법이 있다. - *
모든 태그를 통일 시킨다. - grouping Selector
공통된 속성에 태그들을 각자 개별로 사용하는 것이 아닌 하나로 묶어서 처리하여 사용하는 방식이다.
<head>
<meta charset = "UTF-8">
<title>Title of the document</title>
<style>
<!-- element Selector 방법 -->
p {
text-align : center;
color : red;
}
<!-- id Selector 방법 -->
#para1 {
text-align: center;
color: blue;
}
<!-- class Selector 방법 -->
.center {
text-align: right;
color: green;
}
<!-- grouping Selector 방법-->
table, th, td {
border: 1px solid black;
}
</style>
</head>
반응형
'공부 > 인프런 - Rookiss' 카테고리의 다른 글
| Part 6-3-1. 고급 C# 문법 : Async, Await (0) | 2024.08.17 |
|---|---|
| Part 6-2-9. 웹 기초 : CSS #2 (0) | 2024.08.17 |
| Part 6-2-7. 웹 기초 : HTML #5 (0) | 2024.08.12 |
| Part 6-2-6. 웹 기초 : HTML #4 (0) | 2024.08.08 |
| Part 6-2-5. 웹 기초 : HTML #3 (0) | 2024.08.06 |