[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>

도움되는 사이트?


'Web > css' 카테고리의 다른 글

[CSS] Media Query(미디어 쿼리)  (0) 2019.03.21

관련글

댓글 0

티스토리툴바