2 글 보임 - 1 에서 2 까지 (총 2 중에서)
-
레이아웃2 숙제하던중에 저는 좀 복잡하게 한번 도전하고 싶어서 하던 예제에서 content부분에서 하고 있었습니다. 하다가 inline-block으로 하다가 가운데 정렬이 생겨서 float를 사용하여 만들었습니다. 그러다가 이제 이미지 섹션만들었으니 이미지 넣어서 가운데 정렬해보자 해서 하는데 잘 안됩니다 ㅠㅠ 처음에는 margin : auto auto auto auto; 이렇게 했는데 잘 안되더군요 ㅠㅠ... 참고 코드 남깁니다 ....
html
```
</pre>
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/index.css" rel="stylesheet">
</head>
<body></pre>
<pre> <div class="container">
<div class="header"></pre>
<pre> </div></pre>
<pre> <div class="left-menu"></div><!-- </pre>
<pre> --><div class="content">
<div class="view">
<div class="profile-section"></div>
<div class="image">
< img src="src/apple.jpg" class="image-card">
</div>
</div>
</div>
<div class="footer"></pre>
<pre> </div>
</div></pre>
<pre> </body>
</html>
```
css
```
</pre>
<pre>.profile {width: 15vw;
margin-left: auto;
margin-right: auto;
display: block;
margin-top: 2vw;
margin-bottom: -2vw;
}</pre>
<pre>.title {
font-size: 3vw;
font-family: 'gulim';
color:#000000;
letter-spacing: 0.02vw;
text-align: center;
margin-bottom: -1.2vw;
}</pre>
<pre>.subtitle{
text-align: center;
font-size: 1.6vw;
letter-spacing: 0.05vw;
}</pre>
<pre>.box{
width: 30%;
height: auto;
background-color: aqua;
margin-left: auto;
margin-right: auto;
display: block;
padding: 30px 50px;
border-radius: 15px;
font-size: 1vw;
box-shadow: 5px 5px;
}</pre>
<pre>.container{
width: 800px;
}</pre>
<pre>.header{
width: 100%;
height: 50px;
background-color: aquamarine;
}</pre>
<pre>.left-menu{
width: 20%;
height: 400px;
background-color: cornflowerblue;
display: inline-block;
vertical-align: top;
/* float: left; */
}</pre>
<pre>.content{
width: 80%;
height: 400px;
background-color: coral;
display: inline-block;
vertical-align: top;
/* float: right; */
}</pre>
<pre>.footer{
width: 100%;
height: 100px;
background-color: grey;
/* clear: both; */
}</pre>
<pre>.view{
width: 97%;
height: 150px;
background-color: white;
margin: 9.6px auto 5px auto;
display: block;
}</pre>
<pre>.profile-section{
width: 79.5%;
height: 98%;
background-color: whitesmoke;
margin: auto ;
float: left;
}</pre>
<pre>.image{
width: 19.5%;
height: 98%;
background-color: whitesmoke;
margin: auto ;
float: right;
}</pre>
<pre>.image-card{
width: 95%;
height: auto;
margin-top: auto;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
display: block;
}
```
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
- 답변은 로그인 후 가능합니다.