-
· block level element, inline element
/*
block level element (화면 전체 사용)
*/
h1{
border-width: 5px;
border-color: red;
border-style: solid;
display: inline; (글씨 크기만큼 사용하고 싶은 경우)
}
/*
inline level element (글씨 크기만큼 사용)
*/
a{
border-width: 5px;
border-color: red;
border-style: solid;
display: block; (화면 전체를 사용하고 싶은 경우)
}· display: none; (화면에서 안보이게 하고싶은 경우)
· 중복 줄이기
: 콤마로 동시에 지정 가능, border로 속성 한꺼번에 지정 가능
h1,a{
border-width: 5px;
border-color: red;
border-style: solid;
display: inline;
}h1,a{
border: 5px solid red;
}· padding: 20px; (content와 테두리 사이의 간격)
· margin: 20; (테두리와 테두리 사이의 간격)
· 화면 전체를 쓰는 block element의 특징 변경
display:block;
width:100px;· border-bottom: 1px solid gray; (아래쪽 테두리)
· grid
<style>
#grid{
border: 5px solid pink;
display:grid;
grid-template-columns:150px 1fr;(NAVIGATION 글씨는 150px 유지, 나머지 부분 ARTICLE)
}
div{
border:5px solid gray;
}
</style><body>
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
최신 css 기능을 사용해도 되는지 확인 할 때 유용한 사이트
· 미디어쿼리
- screen width>800px
@media(min-width:800px){
div{
display:none;
}
}- screen width<800px
@media(min-width:800px)
· <style> 태그 중복 제거
<style></style> 안의 css 코드만을 복사해서 .css 파일로 따로 생성
원래 <style>태그를 써야하는 곳(<head></head>사이)에
<link rel="stylesheet" href="style.css">
-> style.css 파일을 캐싱할 수 있게 됨으로써
훨씬 더 빠르게 웹페이지를 보여줄 수 있고 네트워크 트래픽을 줄여 사용료를 적게 낼 수 있음