12강~
CSS 강의
CSS(cascading style sheets)
웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트
HTML에서 style 지정하는 방법
<인라인 스타일(In-line Style) 속성>
style=" 속성:값; 속성:값;..."
근데 이건 너무 지저분하고 코드의 길이가 매우 높아짐.
이식성도 떨어지고 관리, 수정이 어려움.
CSS??
계단식 폭포와 같이 상위 요소->하위 요소로 차례대로 스타일 적용!
(사이트 전체 스타일->페이지 전체 스타일->요소 스타일) 등 차례대로 적용
<페이지 스타일>
<head>
<title></title>
<style>
</style>
</head>
head영역에서 style을 지정하면 페이지 전체에 적용됨!
<사이트 스타일>
<link rel="stylesheet" href="main.css">
main.css라는 파일에 있는 스타일을 이용할 것이라는 코드.
***사이트,페이지 등의 스타일이 충돌이 일어나면??
가장 마지막에 적용된 스타일을 따라감.(가장 하위 계층)
CSS 선택자(Selectors)
#id
"id를 이용해서 선택적으로 적용함"
<style>
#heading1 {
color: red;
}
</style>
<h1 id="heading1">
Heading 1</h1>
태그명
"특정 태그에 style을 적용함"
<style>
h1 {
color: red;
}
</style>
<h1>Heading</h1>
.클래스명
***가장 많이 쓰임
<style>
.font-red {
color: red;
}
.bolded {
font-weight: bold;
}
</style>
<h1 class="font-red"></h1>
<p class="font-red bolded"></p> -->이처럼 한번에 여러개의 클래스를 적용시킬 수 있음.
태그명.클래스명
<style>
h1.summer-style {
color: blue;
}
p.summer-style {
color:lightskyblue;
}
</style>
<h1 class="summer-style"></h1>
<p class="summer-style"></p>
태그명, 태그명
<style>
h1, p, .font-red {
color: red;
}
</style>
All(*)
<style>
* {
color: green;
}
</style>
///모든 태그에 적용됨.
----------CSS 단위(Units)와 색상(Color)------------
<CSS 단위(Units)의 종류>
절대 길이 단위 : cm, mm, in, px
상대 길이 단위 : %, em, rem
<절대 길이 단위>
- px(pixel) - 화면을 그릴 때
- cm, mm, in - 출력물에서
데스크탑과 모바일은 px을 다루는 방식의 차이가 있다.
<상대 길이 단위>
- % : 상위 요소의 길이에 대한 비율 (스크린의 n% or table의 n% 등)
em : 현재 태그에서 사용되는 폰트 크기(font-size)에 대한 비율 (현재 폰트의 크기가 16px이면 2em은 32px임)
rem : html 태그에서 사용되는 폰트 크기에 대한 비율(root의 em이라는 뜻)
색상(Color)
RGB24 색상 사용.
rgb(rrr,ggg,bbb) 각 항목별 0~255 값
<style>
h1 { color: rgb(0,255,0); }
h2 { color: red; }
h3 { color: #0000ff; } //각 항목별 00~ff 의 16진수로 표현됨.
</style>
'프로그래밍 > Web' 카테고리의 다른 글
| 너무 쉬운 HTML/CSS 입문 #2 (0) | 2022.09.26 |
|---|---|
| 너무 쉬운 HTML/CSS 입문 #1 (0) | 2022.09.25 |