CSS 공부 - 3

• 인라인 vs 블록 레벨

블럭, 인라인

    <style> <!-- 인라인,블렉레벨 사용자 정의-->
        h1,a{
            border: 1px solid red;
            display: inline;
        }
        a{display: block;}
    </style>

블럭,인라인 사용자 정의

• 박스 모델(box model)

<style>
        p{
            border:10px solid red;
            padding:20px;
            margin:40px;
            width:120px;
            height:20px;
        }
    </style>

box model

• box-sizing

box

box-sizing:border-box

<style>
        *{ <!-- 모든 태그들에게 적용-->
            box-sizing: border-box; <!-- 기본 값은 content-box-->
        }
        div{
            margin:10px;
            width: 150px;
            
        }
        #bigsize{
            border:30px solid black;
        }
        #smallsize{
            border:10px solid black;
        }

 

• 마진 겹침

마진 겹침

부모 엘리먼트의 마진 값과 자식 엘리먼트의 마진 값 중에서 더 큰 값의 마진 값을 사용하게 된다.

마진 겹침

위의 margin 50px 아래의 100px 가운데 더 큰 값인 100px을 marginr값으로 같게 된다.

 

• 포지션(position)

<style>
#me{
            /* position: relative; 상대적임 */
            /* position: static; 정적임 */
            /* position: absolute;
            top:100px;
            left:100px
        }
</style>

 

• bottom이 top보다 우선순위가 높다.
• left가 right보다 우선순위가 높다.
• position type이 relative일 때 offset을 사용할 수 있다.
• absolute의 위치는 부모 엘리먼트의 기준으로 위치가 left, top값으로 지정된다.
• absolute는 static이 아닌 부모가 나타날 때까지 무시하고, static이 아닌 부모가 나타나면 해당 위치에 맞는 offset값을 설정함.
• fixed는 특정한 엘리먼트를 화면에 위치를 고정시켜 스크롤로부터 완전히 독립시킬 수 있음.