[CSS] 기본 레이아웃 구성 & 벤더 프리픽스 & 도움되는 사이트
2019. 3. 20. 23:20ㆍWeb/css
float 속성을 사용한 레이아웃 구성
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Property Basic</title>
<style>
</style>
</head>
<body>
<div id="header"><h1>Header</h1></div>
<div id="navigation"><h1>Navigation</h1></div>
<div id="wrap">
<div id="aside">
<h1>Aside</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo animi perspiciatis voluptas porro! Temporibus repudiandae autem quas eaque earum perspiciatis perferendis ipsum, sed maiores, numquam aliquam doloribus placeat voluptas commodi?</p>
</div>
<div id="section">
<h1>Section</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi nemo eaque exercitationem praesentium dolor quidem cum aperiam itaque expedita, dolorum qui, nisi, et quae? Assumenda enim totam fugiat voluptatibus esse.</p>
</div>
</div>
<div id="footer"><h1>Footer</h1></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Property Basic</title>
<style>
/* body 태그 중앙 정렬 */
body {
width: 960px;
margin: 0 auto;
}
#aside {
width: 200px;
float: left;
}
#section {
width: 760px;
float: left;
}
#wrap { overflow: hidden; }
</style>
</head>
<body>
<div id="header"><h1>Header</h1></div>
<div id="navigation"><h1>Navigation</h1></div>
<div id="wrap">
<div id="aside">
<h1>Aside</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo animi perspiciatis voluptas porro! Temporibus repudiandae autem quas eaque earum perspiciatis perferendis ipsum, sed maiores, numquam aliquam doloribus placeat voluptas commodi?</p>
</div>
<div id="section">
<h1>Section</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi nemo eaque exercitationem praesentium dolor quidem cum aperiam itaque expedita, dolorum qui, nisi, et quae? Assumenda enim totam fugiat voluptatibus esse.</p>
</div>
</div>
<div id="footer"><h1>Footer</h1></div>
</body>
</html>
벤더 프리픽스
웹 브라우저 공급 업체(마이크로소프트, 모질라, 구글, 애플, 오페라)에서 제공하며, 실험적인 기능이 필요할 때 사용한다. 예를 들어 변환 속성은 CSS3 표준에 있지만 아직 완벽하게 제정된 상태가 아니다. 따라서 웹 브라우저 업체가 무턱대로 속성을 추가할 수 없다.
하지만 다른 웹 브라우저를 이기려면 새로운 기능을 모두 제공해야 하므로 벤더 프리픽스를 사용해 지원한다.
ex)
<style>
input[type=checkbox]:checked + div {
height: 0px;
}
div {
overflow: hidden;
width: 650px; height: 300px;
/* 변환 효과를 적용합니다. */
-ms-transition-duration: 1s; //익스플로러
-webkit-transition-duration: 1s; //크롬, 사파리
-moz-transition-duration: 1s; //파이어폭스
-o-transition-duration: 1s; //오페라
transition-duration: 1s;
}
</style>
도움되는 사이트?
- CSS3 Generator(http://css3generator.com/) : 박스나 텍스트 그림자 쉽게 생성해주는 사이트
- Ultimate CSS Gradient Generator(http://www.colorzilla.com/gradient-editor/) : 그레디언트 쉽게 생성해주는 사이트
- Eric Meyer's Reset CSS(http://meyerweb.com/eric/tools/css/reset/)
HTML5 Doctor Reset stylesheet(http://html5doctor.com/html-5-reset-stylesheet)
YUI 3 CSS Reset(http://developer.yahoo.com/yui/3/cssreset)
스타일시트 코드 초기화해주는 코드 제공하는 사이트들(전 세계적으로 많이 사용하는 코드라고 함)
'Web > css' 카테고리의 다른 글
[CSS] Media Query(미디어 쿼리) (0) | 2019.03.21 |
---|