Closed
Description
증상
- css가 이상하게 적용됩니다.
원래대로라면 https://templated.co/visualize 사이트에 맨윗부분 하얀색 제외한 모습처럼 나와야하는데
http://lks7777777.dothome.co.kr 이렇게 나옵니다
-
javascript로 3개의 div에 균등하게 배분하고 싶은데 초보라 그런지 조건문 저게 맞는지 혹은 적절한지 모르겠습니다.
-
javascript .setAttribute 속성을 제가 맞게 쓰고 있는건지 궁금합니다.
기존 사이트와 차이점은 json파일을 비동기 통신하여 section부분의 이미지들을 로드하려고 기존 javascript와 jquery 파일을 삭제하고 javascript 파일을 다시 만들었습니다.
코드
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Visualize by TEMPLATED</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/reset.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i" rel="stylesheet">
<link rel="stylesheet" href="fontello/css/fontello.css">
<link rel="stylesheet" href="assets/css/main.css" />
<script src="assets/js/main.js"></script>
</head>
<body>
<div id="wrapper">
<header id="header">
<span class="avatar"><img src="images/avatar.jpg" alt="" /></span>
<h1>This is <strong>Visualize</strong>, a responsive site template designed by <a href="http://templated.co">TEMPLATED</a><br />
and released for free under the Creative Commons License.</h1>
<ul class="icons">
<li><a href="#" class="icon-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon-500px"><span class="label">500px</span></a></li>
<li><a href="#" class="icon-mail"><span class="label">Email</span></a></li>
</ul>
</header>
<footer id="footer">
<p>© Untitled. All rights reserved. Design: <a href="http://templated.co">TEMPLATED</a>. Demo Images: <a href="http://unsplash.com">Unsplash</a>.</p>
</footer>
</div>
</body>
</html>CSS
#wrapper{
max-width: 68rem;
margin: 5rem auto;
}
#wrapper>*{
}
#wrapper>*>*{
}
body{
background-image: url(../../images/bg.jpg);
background-size: cover;
font-family:
"Source Sans Pro", sans-serif;
}
#header{
text-align: center;
padding-top: 2rem;
padding-bottom: 2rem;
}
#header .avatar{
border-radius: 100%;
display: inline-block;
padding: 0.5rem;
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255,255,255,0.25);
margin-bottom: 1.5rem;
}
#header .avatar img{
border-radius:100%;
display:block;
}
#header h1{
font-size:1.5rem;
font-weight: 200;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 1.5rem;
line-height: 2.3rem;
}
#header h1 strong{
color:white;
font-weight: 200;
}
#header h1 a{
color:rgba(255, 255, 255, 0.5);
text-decoration: none;
border-bottom: 1px dotted;
}
#header ul.icons li{
border-radius: 100%;
border: 1px solid rgba(255,255,255,0.25);
background-color: rgba(255,255,255,0.05);
width: 2.5rem;
height: 2.5rem;
display: inline-flex;
justify-content: center;
align-items: center;
margin-right: 1rem;
}
#header ul.icons li:hover{
border: 1px solid rgba(255,255,255,0.25);
background-color: rgba(255,255,255,0.2);
}
#header ul.icons li a{
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
#header ul.icons li .label{
display: none;
}
#main .thumbnails{
display: flex;
}
#main .thumbnails .div{
flex-grow: 1;
margin-right: 0.3rem;
margin-left: 0.3rem;
}
#main .thumbnails .a{
display: inline-block;
margin: 0.6rem;
}
#main .thumbnails .img{
display: block;
width: 100%;
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem;
}
#main .thumbnails .h3{
border-left: 1px solid rgba(255, 255, 255, 0.3);
border-right: 1px solid rgba(255, 255, 255, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
border-bottom-left-radius: 0.3rem;
border-bottom-right-radius: 0.3rem;
padding:0.5rem;
text-align: center;
background-color: rgba(255, 255, 255, 0.1);
color: white;
font-size: 0.8rem;
font-weight: 200;
}
#footer{
text-align: center;
color:rgba(255, 255, 255, 0.5);
font-weight:200;
margin-bottom: 3rem;
font-size: 1rem;
}
#footer a{
color:rgba(255, 255, 255, 0.5);
text-decoration: none;
border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
}
#footer:before{
content:'';
display: block;
margin: 2.5rem auto;
width:10rem;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
@media(max-width:480px){
#main .thumbnails{
display: block;
}
}JAVASCRIPT
var req = new XMLHttpRequest();
req.open("POST", "assets/js/image_list.json");
req.onreadystatechange = function(){
if(this.readyState == 4){
var data = JSON.parse(this.response);
var div1 =document.createElement("div");
div1.setAttribute("class", "div");
var div2 =document.createElement("div");
div2.setAttribute("class", "div");
var div3 =document.createElement("div");
div3.setAttribute("class", "div");
for( var i = 0 ; i < data.length; i++){
var a = document.createElement("a");
a.setAttribute("class","a");
a.href = data[i];
var img = document.createElement("img");
img.setAttribute("class","img");
img.src = data[i];
var h3 = document.createElement("h3")
h3.setAttribute("class", "h3")
var text = document.createTextNode("Lorem ipsum dolor sit amet")
h3.appendChild(text)
a.appendChild(img);
a.appendChild(h3);
if(i%3===1){
div1.appendChild(a);
}
else if(i%3===2){
div2.appendChild(a);
}
else{
div3.appendChild(a);
}
}
var thumbnails = document.createElement("section");
thumbnails.setAttribute("class","thumbnails");
thumbnails.appendChild(div1);
thumbnails.appendChild(div2);
thumbnails.appendChild(div3);
var main = document.createElement("section");
main.setAttribute("id","main");
main.appendChild(thumbnails);
document.body.appendChild(main);
}
}
req.send();JSON
[
"images/thumbs/01.jpg",
"images/thumbs/02.jpg",
"images/thumbs/03.jpg",
"images/thumbs/04.jpg",
"images/thumbs/05.jpg",
"images/thumbs/06.jpg",
"images/thumbs/07.jpg"
]실행환경
윈도우 크롬