<style>
a {
color: red;
text-decoration: underline;
}
</style>
또는 <li><a href="2.html" style="color: red; text-decoration: underline">CSS</a></li> 이렇게 style 속성과 함께 씀
a -> selector
{} -> declaration
color(property)
red(value)
h1 {
font-size: 55px;
text-align: center;
}
-> 폰트 사이즈와 가운데 정렬
우선순위
id 선택자(#) > class 선택자(.) > 태그 선택자
동등한 우선순위일 경우 가장 마지막의 코드가 적용됨
박스 모델
h1{
border: 5px solid red;
padding: 20px;
margin: 20px;
display: block;
width: 100px;
}
grid
<div></div>(무색무취) : 그룹핑해서 grid를 사용하여 레이아웃을 하거나 아이디값 부여할때 주로 사용(줄바꿈)
<span></span> : <div>와 똑같으나 줄바꿈하지 않음
#grid {
display: grid;
grid-template-columns: 150px 1fr;
}
<div id="grid">
<ol>
<li><a href="1.html" >HTML</a></li>
<li><a href="2.html" style="color: red;text-decoration: underline">CSS</a></li>
<li><a href="3.html" >Javascript</a></li>
</ol>
<div id="article">
<h2>CSS</h2>
</div>
</div>
미디어 쿼리(CSS의 if문)
min(~부터), max(~까지)로 범위에 따라 효과지정 가능
@media(max-width:800px)
@media(min-width:800px)
css 코드 재사용
중복을 제거해서 재사용성을 높이고 네트워크 트래픽(캐싱) 감소
style.css 코드 따로 만들고
<link rel="stylesheet" href="style.css"> html 헤드에 적용
'웹 프로그래밍 > 프론트 엔드' 카테고리의 다른 글
타임리프(스프링 통합과 폼) (0) | 2023.04.13 |
---|---|
Thymeleaf(타임리프) 기본 (0) | 2023.04.11 |
Thymeleaf(타임리프) 기초 (0) | 2023.04.11 |
JavaScript 기초 (0) | 2023.04.02 |
HTML 기초 (0) | 2023.04.01 |