html/css 블로그 레이아웃 만들기

11697 단어 floatdivdiv

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
  <div class="container">  
    <div class="left-manu">
        <div><img src="lotso.jpeg" class="lotso-p">
          <div class="name">
              <h4 style="margin: 0;">랏소</h4>
              <p style="margin: 0;">1시간전</p>
          </div>  
        </div>
        <div class="contents">
            <h4 style="margin: 0;">내용이다이이다다디</h4>
            <p style="margin: 0;">내용이다이이다다디내용이다이이다다디내용이다이이다다디내용이다이이다다디내용이다이이다다디내용이다이이다다디내용이다이이다다디
            </p>
        </div>
    </div>
    <div class="right-box">
        <img src="lotso.jpeg" style="width: 90%;">
    </div>
  </div>

</body>
</html>```

CSS

<.container{
    width: 800px;         
    display : block;
    margin-left : auto;
    margin-right : auto;
}

.left-manu{               
    width: 80%;
    height: 200px;
    /* background: aqua; */
    float: left;
}
.right-box{
    width: 20%;
    height: 200px;
    /* background: gray; */
    float: left;
}
.lotso-p{
    width: 40px;
    float: left;
}

.name{
    float: left;
}

.contents{
    clear: both;
}

레이아웃을 만들때는 `<div></div>` 박스태그를 사용해준다.
가장큰 박스부터 점점 작은 박스를 사용하여 박스들을 구성해준다.
float를 쓰고 나면 항상 clear 속성이 필요. float속성 사용 후 다음 태그들은 이상한 자리에서 나타난다. 그럴땐 `clear : both` 속성을 사용 해준다.
float은 요소들을 붕 띄우는 속성을 가지니 다음 요소들에게 꼭꼭 clear 을 사용해준다.
Spring 주석 AOP 오류 발생:: 0 can 't find referenced pointcut XXX 의 원인
이전에 자신이 쓴 것을 대신 가져가서 나중에 쓸 수 있도록 - 파일을 업로드하고 다운로드하다

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage