javascript: 1. css가 적용되지 않아요/ 2. javascript 관련 #124

ghost · 2018-01-12T02:19:36Z

증상

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>&copy; 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"
]

실행환경

윈도우 크롬

azaraks · 2018-01-13T09:54:13Z

다른 사람이 만들어 놓은거 쓰실때는 그냥 수정없이 쓰시던가, 하나씩 바꿀때마다 테스트하면서 쓰셔야합니다.
하나 바꾸고 -> 테스트 -> 성공 시 커밋을 반복합니다.
보시면 아랫도리가 돌아가있는데, section이 div안에 들어가야 하는 걸 그냥 붙여서 그렇습니다. 작은 수정사항씩 확인했다면 바로 파악하셨을 겁니다.

ghost · 2018-01-13T12:53:13Z

도움 감사합니다

ghost changed the title ~~css: 적용되지 않아요~~ javascript: css가 적용되지 않아요 Jan 12, 2018

ghost changed the title ~~javascript: css가 적용되지 않아요~~ javascript: 1. css가 적용되지 않아요/ 2. javascript 조건식을 잘모르겠습니다. Jan 12, 2018

ghost changed the title ~~javascript: 1. css가 적용되지 않아요/ 2. javascript 조건식을 잘모르겠습니다.~~ javascript: 1. css가 적용되지 않아요/ 2. javascript 관련 Jan 12, 2018

ghost closed this as completed Jan 13, 2018

happydeveloper added the 백서 label Jan 23, 2018

This issue was closed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

javascript: 1. css가 적용되지 않아요/ 2. javascript 관련 #124

javascript: 1. css가 적용되지 않아요/ 2. javascript 관련 #124

ghost commented Jan 12, 2018 •

edited by ghost

Loading

azaraks commented Jan 13, 2018

ghost commented Jan 13, 2018

javascript: 1. css가 적용되지 않아요/ 2. javascript 관련 #124

javascript: 1. css가 적용되지 않아요/ 2. javascript 관련 #124

Comments

ghost commented Jan 12, 2018 • edited by ghost Loading

증상

코드

실행환경

azaraks commented Jan 13, 2018

ghost commented Jan 13, 2018

ghost commented Jan 12, 2018 •

edited by ghost

Loading