web2-css
혁명적인 변화
<font color="red">~</font>
vs
head안에
<style>
a { //선택자(selector)
color:red; //효과(declaration)
property value
}
</style>
로 인해 중복제거
가독성,유지보수가 더 효과적이다.
html정보에 전념하기 위해 CSS에서 디자인을 뺏음
</--
--> 없는셈치기
<li><a href="2.html" style="color:red">CSS</font><a/></li>
style속성은 css문법에 따라서 해석
color:red ->html의속성
style ->css의효과
1.style태그를 쓴다.
2.style속성을 쓴다.
text-decoration: none;
밑줄을 뺀다.
text-decoration: underline;
밑줄이 생긴다.
css속성을 스스로 알아내기
css textsize property검색!
css textcenter property검색!
h1 {
font-size:40px;
text-align: center;
}
CSS선택자의기본
saw라는 class값을 가지고 있는 모든 태그에 대해서 gray를 주고 싶다.
saw {
} (x)
=> 웹페이지에 있는 saw라는 이름의 태그를 선택하는 선택자
.saw {
} (o)
=>웹페이지에 있는 모든class가 saw라는 이름의 태그를 선택하는 선택자
우선순위:마지막에 있는 것(가장 최근)
<li><a href="1.html" class="saw">HTML<a/></li>
<li><a href="2.html" class="saw active">CSS<a/></li>
=>속성이 여러개,띄어쓰기로 구분
id추가
우선순위 :id>class>태그
<li><a href="2.html" class="saw" id="active">CSS<a/></li>
#active{
color:red;
}
id선택자인 active인 태그가 웹페이지에서 한번 등장하면 active값을 쓰지 않는다.
id값은 한번만 등장
css selector 검색
박스모델
<h1>CSS</h1> 전체를 다써서 줄바꿈
<a href="https://en.wikipedia.org/wiki/CSS">CSS </a> 부분만 써서 줄바꾸지않음
<style>
h1{
border-width:5px;
border-color:red;
border-style:solid;
display:inline; 추가(자신의 크기만큼 변경)
} //block level element 화면전체를 쓰는 태그들
a{
border-width:5px;
border-color:red;
border-style:solid;
display:block; 추가(화면전체만큼 변경)
} //inline element 자신의크기만큼 쓰는 태그들
</style>
display:none; 추가(사라짐)
직접확인했음
중복없애기
<style>
h1{
border-width:5px;
border-color:red;
border-style:solid;
display:inline; 추가(자신의 크기만큼 변경)
} //block level element 화면전체를 쓰는 태그들
a{
border-width:5px;
border-color:red;
border-style:solid;
display:block; 추가(화면전체만큼 변경)
} //inline element 자신의크기만큼 쓰는 태그들
</style>
->
<style>
h1,a{
border-width:5px;
border-color:red;
border-style:solid;
}
</style>
->
<style>
h1,a{
border:5px solid red;
}
</style>
순서상관X
padding,margin
<style>
h1{
border:5px solid red;
}
</style>
<style>
h1{
border:5px solid red;
padding:20px;
}
</style>
<body>
<h1>CSS</h1>
<h1>CSS</h1>
</body>
<style>
h1{
border:5px solid red;
padding:20px;
margin:20px;
}
</style>
<style>
h1{
border:5px solid red;
padding:20px;
margin:0px;
}
</style>
<style>
h1{
border:5px solid red;
padding:20px;
margin:20px;
display:block; //원래 생략
width:100px; //원하는 크기로 변경가능
}
</style>
css box model 검색!
설명이 자세히 나와있음
웹페이지에서
그리드소개
<div>~</div> 아무의미도 없고 디자인용도로 쓴다.
<div>NAVIGATION</div>
<div>ARTICLE</div>
block level
<span>NAVIGATION</span>
<span>ARTICLE</span>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#grid{
border:5px solid pink;
}
div{
border:5px solid gray;
display:grid; //아무런변화X(추가)
grid-template-columns:150px 1fr //부피는 150px 나머지공간에 다씀 1fr(추가)
}
</style>
</head>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>
</html>
추가후
grid-template-columns:1fr 1fr //반반갈라짐
grid-template-columns:2fr 1fr //2:1로 갈라짐
Can I use... Support tables for HTML5, CSS3, etc
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
현재 웹브라우저들이 얼마나 기술들이 채택하고 있는지 통계
반응형디자인:화면의 크기에 따라서 웹페이지 각요소들이 반응
미디어 쿼리 소개
screen width >800px
= @media(min-width:800px)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border:10px solid green;
font-size:60px;
}
@media(max-width:800px){ //800px보다 작아지면 사라진다.
div{
display:none;
}
}
</style>
</head>
<body>
<div>
responsive
</div>
</body>
</html>
CSS코드의 재사용
<head>
<title>WEB - CSS</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
검사-network
2.html
style.css가 있음을 확인
캐쉬
컴퓨터 과학 에서 데이터나 값을 미리 복사해 놓는 임시 장소
웹페이지 안에 CSS를 넣는게 효율적