반응형
<최종 화면>
float를 이용하여 이미지를 배치해보자. 우선 링크 요소에 이미지도 넣자.
처음 쓴 한줄을 복붙해서 여려개 넣자. (임의 이미지 사용)
div는 한줄을 차지하기(블럭요소) 때문에 한줄 한줄 나온다.
float 속성을 이용하면 옆으로 배치 가능하다.
div는 자동으로 margin,padding이 있으므로 (sunshine 등 글자에 공간이 많다.), 보통 0px로 쓰고 시작한다.
이미지들에 배경을 넣어보자. 그러나 생각했던 것처럼 적용이 안된다...
overflow 속성을 이용하면 float를 해도 같이 배경색을 줄 수 있다.
<복붙용 코드>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gallery</title>
<style>
text-align: center;}
</style>
</head>
<body>
<div style="background-color: burlywood; overflow: auto;">
<h3>이미지 갤러리</h3>
<div class="aa"><a href=""><img src="./sunshine.jpg" width="100%" height="90px"><p>sunshine</p></a></div>
<div class="aa"><a href=""><img src="./sunshine.jpg" width="100%" height="90px"><p>sunshine</p></a></div>
<div class="aa"><a href=""><img src="./sunshine.jpg" width="100%" height="90px"><p>sunshine</p></a></div>
</div>
</body>
</html>
|
반응형
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+ CSS' 카테고리의 다른 글
| HTML+CSS (기초) min, max 속성 사이즈 조절 (0) | 2019.12.09 |
|---|---|
| HTML+CSS (기초) index 속성 이용하기. (0) | 2019.12.09 |
| HTML+CSS (기초) float 속성 사용하기. (1) | 2019.12.09 |
| HTML+CSS (기초) display, position 속성 스타일 적용하기 (0) | 2019.12.06 |
| HTML+CSS (기초) table 스타일 적용하기 (2) | 2019.12.06 |
댓글