레이아웃 만들기 2 : inline-block

가로로 정렬할 때 float 대신 inline-block 사용 가능.

display: block (한 행을 전부 차지)
display: inline-block (내 크기만큼 차지)

다만, 태그 사이에 스페이스 공백이 있으면 깨지기 때문에, 공백 제거 필요.
방법1. 주석처리 기호 사용
방법2. 부모의 폰트 사이즈 0으로 만들기

숙제: 블로그 따라 만들기

결과

코드

<div class="left">
        <div class="profile">
            <div>
                <img class="pic" src="profile.png">
            </div>
            <div class="name">
                <div style="padding-top: 2px;">아우리</div>
                <div style="font-weight: 100; padding-bottom: 3px;">1시간 전</div>
            </div>
        </div>
        <div class="writing">
            <div class = "title">
                레이아웃
            </div>
            <div class="text">
                레이아웃 연습 중입니다. 은근 재미 있군요.
            </div>
        </div>
    </div>
    <div class="right">
        <img src="apple.jpg" style="width: 100%; height: 100%; border-radius: 5px; border: 1px solid black">
    </div>

.left{
    /* background-color: red; */
    margin-left: 10%;
    width: 50%;
    height: 300px;
    float: left;
}

.profile{
    /* background-color: green; */
    width: 100%;
    height: 20%;
    border-radius: 10px;
    border: 1px solid black;
}

.pic{
    float: left;
    width: 60px;
    border-radius: 70%;
}

.name{
    float: left;
    padding: 10px;
}

.writing{
    /* background-color: blue; */
    width: 100%;
    height: 80%;
    border-radius: 10px;
    border: 1px solid black;
    margin-top: 5px;
}

.title{
    font-weight: bolder;
    font-size: 20px;
    margin-top: 20px;
    margin: 10px;
}

.text{
    margin: 10px;
}

.right{
    /* background-color: black; */
    width: 30%;
    height: 300px;
    float: left;
    margin-top: 2px;
    margin-left: 7px;
}

네모 박스를 크게 왼쪽과 오른쪽.
왼쪽 박스 안에서도 프로필과 글을 나타내는 박스.
또 프로필 박스 안에서는 이미지, 이름, 시간을 나타내는 박스.
글 박스 안에서는 제목과 내용을 나타내는 박스로 나누어서 코딩하였다.

---

다음강의에서 예시 코드를 통해 더욱 깔끔하게 코딩하는 법을 익히도록.

결과 페이지: https://studylayout.leebin0603.repl.co