레이아웃이라 하기엔 너무 단순하지만,
이미지를 여러개 두었을 때 생기는 여백에 대해 정리하고자,
아래와 같이 문서를 만들어 보도록 한다.
여기서 핵심 속성은
img{vertical-align: top;}
이미지태그는 이미지 자체가 크기를 가지고 있기 때문에 블록인지 인라인인지 잘 구분하기 어려울 수 있다.
1. 이미지 태그에 있어 기억할 점 : img태그는 inline속성을 갖고 있어 한 줄에 다음 요소가 이어서 오게 된다.
img태그는 아래 그림처럼 바로 다음에 오는 요소가 이미지의 우측 하단부터 오기 시작한다.
<img src="img1/vis01_wood.png" alt="" style="border:1px solid #def;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
즉, 태그 안에 있는 여백들이 공백태그로 작동하여, 브라우저마다 적용되는 기본 글자의 여백 크기가 들어가게 된다.
이러한 이유로, img태그에 여백을 없애기 위한 방법으로 위에 작성한 vertical-align 속성을 사용하기도 한다.
위의 그림에서 img태그에 vertical-align:top이나middle을 적게 되면, 다음 오는 인라인 요소인 글자들의 세로 위치가 변경된다.
2. 이미지 태그를 정리 할 때 기억할 또 다른 내용으로,
코딩을 할 때 이미지 사이사이에 이런 공백이 들어 가게 되는데,
vertical-align:top으로 이러한 공백을 없애고, 바로 다음 이미지가 오도록 해 주게 되어, 결과적으로
이미지 사이의 간격이 없어진다.
※ 아래는 이미지들만 배치해서 모양을 정리하였는데,
아래 코드는 레이아웃이 목적이 아니라, 이미지의 여백에 대하여 알기위함을 알려둔다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding:0;}
body{background:#333;}
#wrap{width:901px; height:auto;}
aside{
width:555px;
float:left;
padding-top:69px;
}
img{border:0; vertical-align: top;}
section{
width:346px;
float:left;
}
#block{width:346px;height:20px;background: #777;}
article{
width:346px;height:324px;
background:url("img1/main_07.jpg");
}
#right_in{
width:346px;
height:324px;
background:url('img/img2/main_07.jpg');
color:#fff;
}
h3{
color:skyblue;
font-style: italic;
font-size:0.9em;
padding:15px;
}
p{
color:#fff;
font-size:0.7em;
line-height: 2.0em;
text-align: justify;
margin:10px 20px;
}
</style>
</head>
<body>
<div id="wrap">
<aside>
<img src="img1/main_01.jpg" alt="">
<img src="img1/main_02.jpg" alt="">
<img src="img1/main_03.jpg" alt="">
</aside>
<section>
<img src="img1/main_04.jpg" alt="">
<div id="block"></div>
<img src="img1/main_05.jpg" alt="">
<img src="img1/main_06.jpg" alt="">
<article>
<h3>귀사의 디자인 전략은?</h3>
<p>
각 브랜드 혹은 기업은 각자 자신의 컨셉과 사업목표를 위하여 여러 종류의 홍보활동을 진행하고 있습니다. 이때의 당면과제는 "자사의 디자인 매뉴얼을 통한 컨셉의 집중"입니다.
</p>
<p>
귀사는 브랜드 및 기업 이미지의 각인을 위한 홍보전력 또는 디자인 매뉴얼을 확립하고 전략적으로 시장에 대처하고 있습니까?
</p>
</article>
<img src="img1/main_08.jpg" alt="08">
</section>
</div>
</body>
</html>'UIUX Web Standard > COA Lab's CSS' 카테고리의 다른 글
| 웹표준 검사 (0) | 2021.02.03 |
|---|---|
| 레이아웃 기초 1 (0) | 2021.02.02 |
| css animation (0) | 2021.02.01 |
| :focus selector - 2 (0) | 2021.02.01 |
| :focus selector - 1 (0) | 2021.02.01 |
