4. CSS 레이아웃

HUN.LEE·2023년 1월 28일
CSShtml
1

처음부터 따라해보는 HTML/CSS 실습

목록 보기
4/4
post-thumbnail

1. 일단 div 태그로 공간을 나누기

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="1. 일단 div 태그로 공간을 나누기.css">

</head>
<body>
    <!-- 
        일단 div 태그로 나누자. 
        1. 유지보수가 편해집니다.
        2. 협업이 쉬워집니다.
        > div. class id
        > 명사 + 명사
        > 예시1) headerSearch
        > 예시2) header-search
        > (누가봐도 알아볼 수 있도록)직관적인 클래스 이름 짓기를 연습하자.
        > 사용자 입장에서 경계가 생길 때마다.
        >

        블록 주석 설정/해제: Shift+Alt+A
        
        
    -->

</body>
</html>

2. 부모태그의 css는 자식도 영향을 받습니다 - inherit

html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="2. 부모태그의 css는 자식도 영향을 받습니다 - inherit.css">
<body>
    <!--
   'css style'이 상속이 되지 않은 태그도 있다.
    <div style="color:red"> 
    <div style="border: 1px solid black">
    <div style="font-size: 12px; font-weight: bold;"> 
    -->
    <div style="font-size: 12px; font-weight: bold;">
        <p style="border: 1px solid black">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum beatae voluptatum quod doloribus voluptates sed modi, iure at odit est id provident aperiam laudantium quaerat delectus aliquam adipisci ducimus vitae!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum beatae voluptatum quod doloribus voluptates sed modi, iure at odit est id provident aperiam laudantium quaerat delectus aliquam adipisci ducimus vitae!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum beatae voluptatum quod doloribus voluptates sed modi, iure at odit est id provident aperiam laudantium quaerat delectus aliquam adipisci ducimus vitae!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum beatae voluptatum quod doloribus voluptates sed modi, iure at odit est id provident aperiam laudantium quaerat delectus aliquam adipisci ducimus vitae!</p>
        <button style="font-size: 12px; font-weight: bold;">버튼</button>
        <!-- button태그는 부모태그(div)로 부터 'css style'를 상속받지는 않는다.-->
        <button>버튼</button>
    </div>
    <div class="container">
        <div class="parent">
            <div class="child">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere atque laudantium quod iusto, inventore hic dolorum, voluptate, laboriosam modi magnam sequi tenetur aliquid placeat animi exercitationem dolor eligendi reiciendis accusamus!</p>
            </div>
        </div>
    </div>
</body>
</head>
</html>

css

.parent{
    width: 200px;
    height: 200px;
    border: 1px solid red;
}
.child{
    width: 100px;
    height: 100px;
    background-color: blue;
}
/* 자식 스타일은 퍼센트로 표한하는 경우가 다분하다. */
/* 크기에 주는 대표적인 단위: px, em, rem */

3. px과 em 그리고 rem

html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="3. px과 em 그리고 rem.css">
</head>
<body>
    <!-- px, em, rem -->
    <div class="container" style="font-size: 8px;">
        <!-- 
            일반적오르
            16px = 1em = 1rem 
        -->
        <p class="px">PX</p>
        <p class="ex">EM</p>
        <!--
            부모태그에게 font-size 속성이 있으면,
            그 속성을 1em으로 계산합니다.
        -->
        <p class="rem">REM</p>
        <!--
            html font-size 1rem
        -->
    </div>
</body>
</html>

css

.px{
    font-size: 16px;
}
.em{
    font-size: 2em;
}
.rem{
    font-size: 1rem;
}

4. 레이아웃 만들기 - display_inline

html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="4. 레이아웃 만들기 - display_inline.css">
</head>
<body>
    <div class="container">
        <div class="top">
            <p>reer</p>
        </div>
        <div class="left">
            <p>reer</p>
        </div>
        <div class="right">
        </div>        <div class="bottom">
            <p>reer</p>
        </div>
    </div>
</body>
</html>

css

.container{
    width: 400px;
    height: 600px;
    border: 1px solid black;
    font-size: 0px;
    color: white;
    font-weight: bold;
}
p {
    margin: 0px;
}
.top{
    background-color: red;
    width: 400px;
    height: 200px;
    font-size: 16px;
}
.left{
    background-color: blue;
    width: 200px;
    height: 200px;
    display: inline-block;
    font-size: 16px;
    vertical-align: top;
    <!--수직정렬-->
}
.right{
    background-color: green;
    width: 200px;
    height: 200px;
    display: inline-block;
    font-size: 16px;
}
.bottom{
    clear: both;
    background-color: purple ;
    width: 400px;
    height: 200px;
    font-size: 16px;
}

5. 레이아웃 만들기 - float

html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="5. 레이아웃 만들기 - float.css">
</head>
<body>
    <!--
        float: none 
    -->
    <div class="container">
        <div class="top">
        </div>
        <div class="left">
        </div>
        <div class="right">  
        </div>
        <div class="bottom">
        </div>
    </div>
</body>
</html>

css

.container{
    width: 400px;
    height: 600px;
    border: 1px solid black;
    font-size: 0px;
    color: white;
    font-weight: bold;
}
p {
    margin: 0px;
}
.top{
    background-color: red;
    width: 400px;
    height: 200px;
}
.left{
    background-color: blue;
    width: 100px;
    height: 200px;
    float: left;
    /*or "float: right;"*/
} 
.right{
    background-color: green;
    width: 100px;
    height: 200px;
    float: left;
    /*or "float: right;"*/
}
.bottom{
    clear: both;
    background-color: purple ;
    width: 400px;
    height: 200px;
}

6. 레이아웃 만들기 - flex

html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="6. 레이아웃 만들기 - flex.css">
</head>
<body>
    <!--
        float: none 
    -->
    <!--
    <div class="container">
        <div class="top">
        </div>
        <div class="flexBox">
            <div class="left">
            </div>
            <div class="right">        
            </div>
        </div>
        <div class="bottom">
        </div>
    </div>
    -->
    <div class="flexBox"> 
        <!--
        <span>판</span>
        <span>다</span>
        <span>코</span>
        <span>딩</span> 
        -->
        <!--
        css용어: align-content vs align-items 차이
        https://velog.io/@adguy/align-content-vs-align-items   
        -->
        <div style="width: 100px; height: 100px; background-color: red; border: 1px solid black"></div>
        <div style="width: 100px; height: 100px; background-color: red; border: 1px solid black"></div>
        <div style="width: 100px; height: 100px; background-color: red; border: 1px solid black"></div>
        <div style="width: 100px; height: 100px; background-color: red; border: 1px solid black"></div>
    </div>
</body>
</html>

css

.container{
    width: 400px;
    height: 600px;
    border: 1px solid black;
    font-size: 0px;
    color: white;
    font-weight: bold;
}
p {
    margin: 0px;
}
.top{
    background-color: red;
    width: 400px;
    height: 200px;
}
.left{
    background-color: blue;
    width: 200px;
    height: 200px;
} 
.right{
    background-color: green;
    width: 100px;
    height: 200px;
}
.bottom{
    clear: both;
    background-color: purple ;
    width: 400px;
    height: 200px;
}
.flexBox{
    display: flex;
    width: 300px;
    height: 300px;
    border: 1px solid black;
}

7. 레이아웃 만들기 - grid

html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="7. 레이아웃 만들기 - grid.css">
</head>
<body>
    <!--
        float: none 
    -->
    <div class="container">
        <div class="top">
        </div>
        <div class="left">
        </div>
        <div class="right">        
        </div>
        <div class="bottom">
        </div>
    </div>
</body>
</html>

css

.container{
    width: 400px;
    height: 600px;
    border: 1px solid black;
    color: white;
    font-weight: bold;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
    "top top right"
    "left left right"
    "bottom bottom right";
    grid-gap: 10px;
}
p {
    margin: 0px;
}
.top{
    background-color: red;
    grid-area: top;
}
.left{
    background-color: blue;
    grid-area: left;
} 
.right{
    background-color: green;
    grid-area: right;
}
.bottom{
    clear: both;
    background-color: purple ;
    grid-area: bottom;
}
/* 
grid를 사용할 때는 auto 또는 아예 사용하지 않는다.
width: auto;
height: auto; 
*/
/* 
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
    "top top"
    "left right"
    "bottom bottom";
.top{
    background-color: red;
    width: 400px;
    height: 200px;
    grid-area: top;
}
.left{
    background-color: blue;
    width: 200px;
    height: 200px;
    grid-area: left;
} 
.right{
    background-color: green;
    width: 200px;
    height: 200px;
    grid-area: right;
}
.bottom{
    clear: both;
    background-color: purple ;
    width: 400px;
    height: 200px;
    grid-area: bottom;
}
*/

8. 폰트를 꾸며주는 CSS 속성들

html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="./8. 폰트를 꾸며주는 CSS 속성들.css">
</head>
<body>
    <!-- 
        font
        font-style
        font-weight
        font-variant
        font-size
        font-height
        font-family
     -->
     <div class="container">
        <p class="font">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia ut nisi ipsa saepe porro. Doloribus cum, numquam dolorum laborum aliquam minus possimus, pariatur incidunt soluta, error enim beatae quod minima?
        </p>
     </div>
</body>
</html>

css

/* 폰트불러오기 */
/* free font download: https://www.dafont.com/ */
@font-face {
    font-family: Cannia;
    src: url(./font/cannia/Cannia.otf);
}
.font{
    /* 
    "font: ;" 라고 입력하면 font관련 속성을 알 수 있다.
    https://developer.mozilla.org/ko/docs/Web/CSS/font
    */
    font-style: italic;
    font-weight: bolder;
    font-size: 1em;
    line-height: 1.2em; /* 줄간격 */
    font-family: Cannia;
    /* font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif */
    /* font-family: 입력할 경우 글꼴 템플릿 목록이 표시된다. 선택한 목록 템플릿에서 맨 앞에 있는 것부터 적용된다. 
    사용자 pc에 해당 글꼴이 없는 경우 그 다음 글꼴이 적용이 된다. 
    */
}

./font/cannia/Cannia.otf
(폰트 파일) Cannia.otf


9. 공간을 부여하는 CSS 속성들

html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="./9. 공간을 부여하는 CSS 속성들.css">
</head>
<body>
    <!-- 
        margin, padding 
    -->
     <div class="container">
        <p>판다코딩</p>
     </div>
</body>
</html>

css

.container{
    width: 200px;
    height: 100px;
    border: 1px solid red;
}
p{
    width: 100px;
    margin: 10px 15px 10px 5px;/* 
    상기와 같이 표현할 경우 시계방향으로 적용된다.
    아래와 같이 표기하거나 상기와 같이 한 번에 표현할 수 있다. 
    */
    /* 
    margin-top: 20px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px; 
    */
    padding: 10px;
    border: 1px solid blue;
    display: inline-block;
}

10. margin이란 친구는 겹치기도 합니다

html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="10. margin이란 친구는 겹치기도 합니다.css">
</head>
<body>
    <!-- 
        "margin 겹침" = "margin collapsing"
        상기 원인은 알 수 없으나 발생한다.
    -->
     <div class="container">
         <!-- 
        <h1>안녕하세요,</h1>
        <h1>판다코딩입니다.</h1>
        -->
        <!-- 
            <div class="child">
            판다코딩
            </div> 
        -->
        <p class="panda">판다</p>
        <span>123</span>
        /* 시각적인 효과로 margin 겹침 현상을 해소 할 수 있다. */
        <p class="coding">코딩</p>
     </div>
</body>
</html>

css

/* 
h1{
    margin-top: 7rem;
    margin-bottom: 5rem;
} 
*/
/* 수치가 다르다면 큰 값으로 겹침 */
/* 
.container{
    margin-top: 7rem;
    /* border: 1px solid black; 
} 
.child{
    margin-top: 5rem;
    background-color: cornflowerblue;
} 
*/
/* margind 겹침 현상이 발생할 경우 (rem 등) 클래스에 수치가 다르다면 큰 값으로 적용된다.*/
p{
    font-size: 3rem;
    font-weight: bold;
}
.panda{
    margin-bottom: 10rem;
}
.conding{
    margin-top: 1rem;
}



참조

profile
HUN.LEE
[Psalm 25:3] Blockchain Developer
이전 포스트

3. HTML 기본 태그

0개의 댓글