display 역시 style이기 때문에 head태그 안에 있는 style태그 안에서 사용한다.
이미지를 꽉 채우고 조금의 빈자리를 남겨볼거다.
style안에 쓸 태그
#block img{
display:block;
margin:30px;
}
display를 block(=꽉 채우다)로 설정하고
margin(=빈자리주기)를 30px로 잡아보았다.
펭귄사진이 margin준 대로 떨어진채로 나오는 것을 볼 수 있다.
이 펭귄사진들을 세로 혹은 가로로 나열할 수 있다.
먼저 위를 만들어준 태그들을 본다면
< div id="block" >
< img src="penguin.jpg" >
< img src="penguin.jpg" >
< div >태그는 영역을 나누는 태그
block은 가로로 나열하는 태그
< div id = "inline" >
< img src = "penguin.jpg" >
< img src = "penguin.jpg" >
inline 은 줄바꿈 없이 가로로 나열하는 태그
이미지가 이런식으로 생기게 된다.
이번에는 펭귄들을 동그라미 안에 넣어볼거다.
.round{
border:2px dotted black;
border-radius: 50%;
}
동그라미를 만들거니까 .round로 잡고
css의 border는 선모양, 색상, 두께 등을 지정해주는 태그이다.
dotted가 선 스타일중 하나이다.
border-radius는 선을 둥글게 만들어주는 속성이다.
margin도 주어서 깔끔하게 만들었다.
