티스토리 뷰
CSS단위
- px
- rem
- em
- %
px
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>inline block</title>
- <link rel="stylesheet" href="./cssReset.css">
- <style>
- div{width:1px;height:1px;background:red}
- </style>
- </head>
- <body>
- <div></div>
- </body>
- </html>
rem html태그에 명시된 크기의 배수를 기준
html태그에 font-size:10px지정
1rem = 10*1
2rem = 10*2
3rem = 10*3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>inline block</title>
<link rel="stylesheet" href="reset.css">
<style>
html{font-size:10px}
.one{font-size:1rem}
.two{font-size:2rem}
.three{font-size:3rem}
</style>
</head>
<body>
<p class="one">1rem</p>
<p class="two">2rem</p>
<p class="three">3rem</p>
</body>
</html>
em 부모태그에 적용된 값을 기준
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>inline block</title>
<link rel="stylesheet" href="reset.css">
<style>
html{font-size:10px}
.two{font-size:2em}
.three{font-size:3rem}
</style>
</head>
<body>
<div class="three">
<p class="two">2em</p>
</div>
</body>
</html>
rem단위는 html태그에 적용된 값을 기준
em단위는 부모 태그에 적용된 값을 기준
html 10px
.three 10*3 =30px
.two 30*2 =60px
% 부모태그의 길이를 기준으로 산정하여 크기를 가짐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>percent</title>
<link rel="stylesheet" href="reset.css">
<style>
.parent{width:500px;height:100px;background:blue}
.child{width:200%;height:20px;background:pink}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
메뉴만들기
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>float</title>
- <style>
- ul{width:650px;height:30px;background:green;list-style:none;padding-top:15px}
- ul li{float:left;margin-right:10px;font-family:dotum}
- ul li a{font-size:12px;color:yellow;font-weight:bold;text-decoration:none}
- .white a{color:#fff} //color:#ffffff
- </style>
- </head>
- <body>
- <ul>
- <li><a href="#">메일</a></li>
- <li><a href="#">카페</a></li>
- <li><a href="#">블로그</a></li>
- <li><a href="#">지식iN</a></li>
- <li><a href="#">쇼핑</a></li>
- <li class="white" ><a href="#">사전</a></li>
- <li class="white" ><a href="#">뉴스</a></li>
- <li class="white" ><a href="#">증권</a></li>
- <li class="white" ><a href="#">부동산</a></li>
- <li class="white" ><a href="#">지도</a></li>
- <li class="white" ><a href="#">영화</a></li>
- <li class="white" ><a href="#">뮤직</a></li>
- <li class="white" ><a href="#">책</a></li>
- <li class="white" ><a href="#">웹툰</a></li>
- </ul>
- </body>
- </html>
레이아웃 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>pinkcoding Layout</title>
<link rel="stylesheet" href="reset2.css">
<script type="text/javascript">
</script>
<style type="text/css">
#wrap{float:left;width:100%}
.gnb{float:left;width:100%;height:30px;background:#fbfbfb}
.gnb a{float:left;}
.gnb_center{width:135px;margin:5px auto}
.gnb_center ul{float:left;}
.gnb_center ul li{float:left;margin-right:5px;}
#container{width:1000px;margin:0 auto}
#header{float:left;width:1000px;border:1px solid blue}
#header h1{float:left;margin-left:400px;color:#00bf12;font-size:40px}
.menu{float:left;width:1000px;height:40px;background:#43b215}
.left{float:left;width:650px;border:1px solid blue}
.left_content1{float:left;width:650px;height:200px;margin-top:10px;background:#edeef0}
.right{float:left;width:290px;margin:10px 0 0 20px;border:1px solid blue}
.right_content2,.right_content7{float:left;width:290px;height:140px;margin-bottom:10px;background:#f8f8f8; border:1px dotted red;_border-radius:700px}
</style>
</style>
</head>
<body>
<div id="wrap">
<div class="gnb">
<div class="gnb_center">
<ul>
<li>house</li>
<li>search</li>
<li>me</li>
</ul>
</div><!-- gnb_center -->
</div>
<div id="container">
<div id="header">
<h1>Hello World</h1>
</div>
<div class="menu">
</div>
<div class="left">
<div class="left_content1">
</div>
<div class="left_content1">
</div>
<div class="left_content1">
</div>
<div class="left_content1">
</div>
<div class="left_content1">
</div>
</div>
<div class="right">
<div class="right_content2">
</div>
<div class="right_content2">
</div>
<div class="right_content2">
</div>
<div class="right_content2">
</div>
<div class="right_content2">
</div>
<div class="right_content2">
</div>
<div class="right_content7">
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</body>
</html>
복습!
미디어쿼리 사용방법
1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>media query</title>
<link rel="stylesheet" href="./cssReset.css">
<style>
li{float:left;margin-left:10px} //가로
@media screen and (min-width:0px) and (max-width:500px){
li{clear:both;margin-left:0;text-align:center;} //세로
}
</style>
</head>
<body>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Angular</li>
<li>React</li>
<li>nodeJs</li>
<li>MySQL</li>
<li>PHP</li>
<li>Deep Learning</li>
</ul>
</body>
</html>
2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>media query</title>
<link rel="stylesheet" href="reset.css">
<style>
@media screen and (min-width:0px) and (max-width:500px){
p{color:skyblue}
}
@media screen and (min-width:501px){
p{color:hotpink}
}
</style>
</head>
<body>
<p>query</p>
</body>
</html>
미디어 쿼리 익스터널 :CSS파일을 불러와 적용하는 방식
- <link rel="stylesheet" media="(min-width:0px) and (max-width:500px)" href="파일경로" />
- <link rel="stylesheet" media="(min-width:501px)" href="파일경로" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>media query</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" media="(min-width:0px) and (max-width:500px)" href="to500.css" />
<link rel="stylesheet" media="(min-width:501px)" href="from501.css" />
<style>
p{font-size:20px}
</style>
</head>
<body>
<p>media query</p>
</body>
</html>
뷰포트 설정:모바일 기기의 실제 해상도 적용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>view port</title>
<link rel="stylesheet" href="reset.css">
</head>
<body>
<h1>viewport</h1>
</body>
</html>
initial-scale = 1 //원본의 크기
initial-scale = 2 //2배 커진 텍스트 2:1 관계
빈응형 웹 구현하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{padding:0;margin:0}
header{width:100%}
header h1{text-align:center}
section{width:100%}
section img{width:80%;margin:30px auto;display:block}
section p{text-align:center;}
footer{clear:both;width:100%;margin-top:20px;padding:10px 0;border-top:1px solid #000000;text-align:center}
/* mobile */
@media screen and (min-width:0px) and (max-width:1000px){
header button{position:absolute;left:1rem;background:url('3line.png') no-repeat;width:2.5rem;height:2.5rem;border: none;transform: scale(0.5);}
section nav{display:none}
footer{position:absolute;bottom:0}
}
/* pc */
@media screen and (min-width:1001px){
header button{display:none}
section nav{width:100%}
section nav ul{list-style:none;width:100%;margin:0 auto}
section nav ul li{clear:both;text-align:center;margin-top:20px}
section nav ul li:last-of-type{margin-right:0}
section nav ul li a{text-decoration:none;color:#000000}
}
</style>
<title>반응형웹</title>
</head>
<body>
<header>
<button></button>
<h1>반응형웹</h1>
</header>
<section>
<img src="maltese.jpg" alt="disney" />
<p>web programming</p>
<nav>
<ul>
<li><a href="/class/web/HTML/">HTML</a></li>
<li><a href="/class/web/CSS/">CSS</a></li>
<li><a href="/class/web/jQuery/">jQuery</a></li>
<li><a href="/class/web/MySQL/">MySQL</a></li>
<li><a href="/class/web/PHP/">PHP</a></li>
</ul>
</nav>
</section>
<footer>
<p>반응형웹</p>
</footer>
</body>
</html>
'독학 > css' 카테고리의 다른 글
| 독학 - CSS3 (0) | 2022.09.03 |
|---|---|
| CSS독학3(배경) (0) | 2022.08.19 |
| CSS독학2(텍스트) (0) | 2022.08.18 |
| CSS독학1(CSS 선택자) (0) | 2022.08.18 |