Document

display:inline-block

/
display: inline-block;
}

</style>

<div class="item inline-block">item</div>
<div class="item inline-block">item</div>
<div class="item inline-block">item</div>

Document

<style>

    .text-center
    {
        text-align: center;
    }

    .italic
    {
        font-style: italic;
    }

   /*  .title-spec
    {
        text-align: center;
    }

    .fixed-align-and-style
    {
        font-style: italic;
        text-align: center;
        font-weight: 300;
        
    }
    .bottom-line
    {
        font-size: 10;
        text-align: center;
    } */
</style>

<h1 class="text-center ">Title</h1>
<p class="text-center italic">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, veritatis culpa. Esse, non temporibus ex in rerum asperiores possimus deleniti quisquam ullam pariatur consequuntur rem dolorem. Quae illum quasi vero?
</p>

<p class="text-center ">John doe</p>

<!-- <p class="fixed-align-and-style">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam tempora optio ex nulla porro beatae? Sit, itaque neque, sed magnam ut suscipit consectetur sequi dolor obcaecati excepturi asperiores quisquam sapiente!</p>

<p>
<footer class="bottom-line">John doe</footer>
</p> -->

Document

상속

<style>
    ul
    {
        font-style:italic;
    }
    .a li
    {
        /* 타이포그래픽 속성은 기본적으로 상속됩니다. 
        타이포그래피 속성 : font-style 등 텍스 관련 속성들
        엘리먼트의 font-style의 기본값은 inherit(상속 받기) 입니다.
        */
        font-style:inherit ;/* 없어도 됨, 이런 부분 중요함*/
        
    }
    .b li
    {
        /* font-style을 덮어썼습니다.(상속 거부)  */
        font-style: normal;
    }
</style>

<h3>상속</h3>
<ul class="a">
    <li>foo</li>
    <li>bar</li>
    <li>baz</li>
</ul>


<h3>덮어쓰기</h3>
<ul class="b">
    <li>foo</li>
    <li>bar</li>
    <li>baz</li>
</ul>

자동폰트 조절이 포함되어 있다.

Document

CSS 길이 단위

<style>
    /* 루트 엘리먼트 */
    /* <html lang="en"> */
    /* 루트 엘리먼트의 글자 크기는 브라우저의 설정값에 따라 결정됩니다. */
    html
    {
        /* 글자크기 */
        /* 테스트를 위해서 16px 고정합니다 
        px(pixel) : 절대값
        */
        font-size: 16px;
    }
    ul
    {
        font-size: 16px;
    }
    .px
    {
        font-size: 16px;
    }
    /* 루트 엘리먼트를 기준으로 폰트사이즈가 결정됩니다
     */
    .rem
    {
        /* 1rem = 루트 엘리먼트의 폰트 사이즈 
          1rem = html, 16px
        */
        font-size: 1rem;
    }
    /* 부모 엘리먼트를 기준으로 폰트사이즈가 결정됩니다. 
            */
    .em
    {
        /* 1em = 부모 엘리먼트 (ul)의 폰트 사이즈 */    
        font-size: 1em;
    }
    /* 부모엘리먼트를 기준으로 폰트사이즈가 결정됩니다. */
    .percent
    {
        /* 100% = 부모 엘리먼트의 폰트사이즈 */
        font-size: 100%;
    }
    /* 화면의 넓이(viewpoint width)를 기준으로 폰트사이즈가 결정됨 */
    .vw
    {
        /* 100vw = 화면의 넓이 */
        font-size: 10vw;
    }
    /* 화면의 높이(viewport height)를 기준으로 폰트사이즈가 결정됨 */
    .vh
    {
        /* 100vh 화면의 높이 */
         font-size: 10vh;
    }
</style>

<ul>
    <li class="px">font-size : 16px</li>
    <li class="rem">font-size : 1rem</li>
    <li class="em">font-size : 1em</li>
    <li class="percent">font-size : 100%</li>
    <li class="vw">font-size : 10vw</li>
    <li class="vh">font-size : 10vh</li>
</ul>