CSS
Cascading Style Sheet
( 선행 조건 : html에 대한 기본적인 지식 )
목적 : 보기 좋은 webpage 형태를 만들자!
( 방식 1 : HTML )
- <font color=’색상’> ~ </font>
<h1><a href="index.html" WEB </a></h1>
<ol>
<li><a href='1.html'><font color='red'>HTML</font></a></li>
<li><a href='2.html'><font color='red'>CSS</font></a></li>
<li><a href='3.html'><font color='red'>JS</font></a></li>
</ol>
- 1억 개의 <li> 태그에 전부 다 font를 붙여야하나…? NO! use CSS!
( 방식 2 : CSS )
<style> ~ </style> 태그
-
웹브라우저로 하여금 “html 문법”이 아닌
“css 문법”으로 해석하라고 알려주는 내용
-
모든 a 태그에 대해서 빨간색으로 변경해줘!
<style>
a {
color:red;
}
</style>
<h1><a href="index.html" WEB </a></h1>
<ol>
<li><a href='1.html'>HTML</a></li>
<li><a href='2.html'>CSS</a></li>
<li><a href='3.html'>JS</a></li>
</ol>
태그 내에서 css 문법을 사용하고 싶을 경우
<li><a href='2.html' style='color:red'>CSS</a></li>
밑줄을 없애고 싶은 경우
<style>
a {
color:red;
text-decoration : none;
}
</style>
용어 정리
<style>
a {
color:red;
}
</style>
- a : selector
- { ~ } : Declaration
- color : property
- red : value
Heading의 글씨크기/가운데 정렬
<style>
h1 {
font-size:45px;
text-align : center;
}
</style>
Class 사용하기
<style>
a {
color:black;
}
.saw{
color:gray;
}
.active {
color:red;
}
</style>
<h1><a href="index.html" WEB </a></h1>
<ol>
<li><a href='1.html' class='saw'>HTML</a></li>
<li><a href='2.html' class='saw active'>CSS</a></li>
<li><a href='3.html'>JS</a></li>
</ol>
Class & ID 사용하기
-
우선 적용 순위 : #id > .class > tag
( + 가장 마지막에 적용된 선택자가 가장 우선순위 높음 )
<style>
a {
color:black;
}
.saw{
color:gray;
}
#active {
color:red;
}
</style>
<h1><a href="index.html" WEB </a></h1>
<ol>
<li><a href='1.html' class='saw'>HTML</a></li>
<li><a href='2.html' class='saw' id='active'>CSS</a></li>
<li><a href='3.html'>JS</a></li>
</ol>
박스 모델
- h1 태그 : 화면 전체를 박스로 사용 ( = Block level element )
- a 태그 : 자기 자신의 컨텐츠의 크기만큼을 사용 ( = Inline element )
<style>
h1 {
border-width:5px;
border-color:red;
border-style:solid;
}
a {
border-width:5px;
border-color:red;
border-style:solid;
}
</style>
h1태그도 자기 자신의 부피만큼만을 사용하고 싶은 경우 ( inline 으로)
a태그도, 전체만큼을 사용하고 싶은 경우 ( block level 으로 )
h1 {
border-width:5px;
border-color:red;
border-style:solid;
display:inline;
}
a {
border-width:5px;
border-color:red;
border-style:solid;
display:block;
}
(h1 & a의) 중복 제거하기!
h1,a {
border-width:5px;
border-color:red;
border-style:solid;
}
h1내에 있는 중복을 더 제거하려면 ( = “border” 중복 제거 )
( + padding / margin 추가하기 )
h1{
border:5px solid red;
padding:20px;
margin:20px;
display:block;
width:100px;
}
아래쪽에만 테두리를 하고 싶을 경우?
h1{
font-size:45px;
text-align:center;
border-bottom:1px solid gray;
margin=0;
padding:20px
}
세로 줄을 그리고 싶으면?
ol {
border-right:1px solid gray;
width:100px;
margin:0;
}
Grid (격자) 사용하기
-
( just for 디자인 ) 아무 의미 없는 태그 : <div>
- 기본적으로 **block level element**( just for 디자인 ) 아무 의미 없는 태그 : <span>
- 기본적으로 inline element
- NAVIGATION은 150px만큼 : 150px
- ARTICLE은 나머지 공간 모두 차지 : 1fr
<style>
#grid{
border:5px solid pink;
display:grid;
grid-template-columns:150px 1fr;
}
div{
border:5px solid gray;
}
</style>
<body>
<div id='grid'>
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>
미디어 쿼리 :
- for 반응형 (Responsive) 디자인
Q. 화면의 크기에 따라, 특정 html 요소가 보이도록/안보이도록 하기
- 화면의 크기가 800px보다 커지면, 해당 효과 동작하기!
<!DOCTYPE html>
<html>
<head>
<meta charst='utf-8'>
<title></title>
<style>
div{
border:10px solid green;
font-size:60px;
}
@media(min-width:800px){
div{
display:none;
}
}
</style>
</head>
<body>
<div>
Responsive
</div>
</body>
</html>