🔵 CSS - float

jea_i·2022년 2월 7일

목록 보기

8/19

<body>
    <h2>부유속성 알아보기</h2>
    <p>
        비행기가 하늘에 뜨거나 배가 물 위에 뜨듯 요소를 띄우는 속성을 부유속성이라 합니다.
        <br>대표부유속성으로 float와 position이 있습니다. 이 둘의 성질은 비슷하면서도 다르기 때문에 목적에 따라 명확하게 사용해야 합니다.
    </p>
    <hr>
    <h3>float: ;</h3>
    <p>
        float는 위에서 아래로 정렬된 블럭요소를 부유시켜 왼쪽, 오른쪽으로 정렬방향를 결정할 수 있습니다.
        <br>float가 적용된 블럭레벨은 경계박스를 해제하게 됩니다.
        <br>즉, margin값에 대하여 auto 값을 사용할 수 없게 됩니다.
    </p>
    <div class="box fr"></div>
    <div class="box fl"></div>
</body>
<style>
/* 형제요소중 하나가 부유속성이 지정되었다면 나머지 요소도 부유속성이 적용되어야 합니다. */
.box{
    width: 200px; height: 200px;
    background-color: #f90;
}
.fl{
    /* user agent : none */
    float: none;
    /* 정렬의 우선이 윗쪽이 아닌 왼쪽을 우선으로 정렬됨 */
    float: left;
    /* 정렬의 우선이 윗쪽이 아닌 오른쪽을 우선으로 정렬됨 */
    float: right;

    float: none;
    margin: 0 auto;
    float: right;
}
.fr{
    float: left;
}
</stlye>

<body>
    <!-- hdr : header의 약자  hdr_wrap : 해더의랩핑-->
    <div class="hdr_wrap">
        <div class="header">
            <div class="logo"><b>LOGO</b>HERE</div>
            <div class="nav">Navigation Bar</div>
        </div>
    </div>
    <div class="main"></div>
</body>

<style>
/* 종속선택자 (div요소중에서 class이름이 header요소를 선택하라는 의미 */
div.hdr_wrap{
    background-color: #f90;
    /* 오작동 방지 */
    padding: 20px 0;
}
div.header{
    /* 백그라운드 배경이 보이기 하기 위한 요소 */
    overflow: hidden;
    margin: 0 auto;
    width: 1080px;
}
div.header>.logo{
    font-family: 'Noto Sans KR', sans-serif;
    /* font-weight: 700; */
    font-size: 16px;
    line-height: 40px;
    color: #000;
    /* 형제 중 누군가 float가 적용되었으면 나머지 형제도 부유속성이 적용되어야 합니다. */
    float: left;
}
div.header>.nav{
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 40px;
    color: #000;
    float: right;
}
div.main{
    height: 480px;
    background-color: #ccc;
}
</style>

jea_i

열정열정열정🔥

이전 포스트

🔵CSS - margin

다음 포스트

🔵 CSS - float

CSS

🔵CSS - margin

🔵 CSS - box sizing

0개의 댓글

관련 채용 정보