글 목록 예제 레이아웃
<body>
<div class="container">
<div class="blog-content">
<img class="user-img" src="lion.png" width="50px">
<div class="user-name">
<h4 style="margin: 8px;">name</h4>
<p style="margin: 8px;">timeframe</p>
</div>
<div class="user-content">
<h4 style="margin: 8px;">여기는 제목이에요</h4>
<p style="margin: 8px;">여기는 내용이에요</p>
</div>
</div>
<div class="blog-img">
<img src="food.jpg" width="100%">
</div>
</div>
</body>.container {
width: 800px;
font-family: sans-serif;
margin-left: auto;
margin-right: auto;
}
.blog-img {
width: 20%;
height: 200px;
float: left;
}
.blog-content {
width: 80%;
height: 200px;
float: left;
}
.user-img {
float: left;
}
.user-name {
float: left;
}
.user-content {
clear: both;
}- h4, p 태그는 자동으로 위, 아래 16px margin이 적용되어 있어 필요에 따라 변경해주어야 한다
- user-content 만들 때 바로 위 user-img, user-name class가 floating 상태이므로, user-content clear: both 속성을 적용해주어야 한다
- (참고) user-content 내의 h4 margin-top 을 적용 시 바로 위 div들이 floating 상태라 floating div 기준으로 margin이 적용되지 않는다 > 더 위 쪽 떠 있지 않은 div 기준으로 margin-top 값을 늘리거나, clear 속성 적용한 dummy div를 하나 더 추가해 해결할 수 있다
, - 태그 사용
<body>
<nav>
<ul class="navbar">
<li>영화</li>
<li>맛집</li>
<li>IT</li>
<li>컴퓨터</li>
</ul>
</nav>
</body>.navbar li {
display: inline-block;
}
.navbar>li {
display: inline-block;
}- : 순서가 없는 HTML 리스트를 정의할 때 사용하며, ul 요소에 속하는 하부 아이템은
- 요소를 사용해 나타낼 수 있다
- : 순서가 있는 HTML 리스트를 정의할 때 사용하며, 마찬가지로 하부 아이템은
- 요소를 사용한다
- :
- 요소는 하부 아이템을 정의해주며, 부모가
- 일 경우 bullet 모양,
- (참고) 특정 class 내의 동일한 태그들에 속성을 한꺼번에 지정하는 경우 셀렉터 문법을 사용하여 css 작성할 수 있다
- .class tag {} > class 내의 모든 tag 에 같은 속성 적용
- .class>tag {} > class 내의 직계 자식 tag에만 같은 속성 적용
- 일 경우 숫자나 알파벳으로 리스트를 표현해준다
- (참고) 특정 class 내의 동일한 태그들에 속성을 한꺼번에 지정하는 경우 셀렉터 문법을 사용하여 css 작성할 수 있다
eunji yang