step10. - 01~04. display
<style>
#one{
/* 문서 객체는 만들어 졌지만 공간을 차지하지 않고
보이지 않게 하기 */
display: none;
}
</style>
</head>
<body>
<h1>display 속성 테스트</h1>
<button id="showBtn">눌러보셈</button>
<p id="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus cupiditate ea earum sequi aspernatur reprehenderit at quia, consequuntur consequatur iste quos necessitatibus eveniet ipsam, vero, eaque iusto maiores, ipsum explicabo.</p>
<br>
<img src="images/kim1.png" />
<script>
document.querySelector("#showBtn")
.addEventListener("click", function(){
document.querySelector("#one")
.style.display="block";
});
</script>
</body>
- display 설정을 none으로 하면 loading 했을 때 일단 보이지 않는다. (특정한 상황에서 보이게끔 하려는 목적)
- display 설정을 block으로 바꾸면 다시 보이게 된다. (경우에 따라 block이 아니라 inline을 쓴다.)
<style>
.wrapper{
border: 1px solid red;
}
span{
border: 1px solid green;
}
#one{
display: none;
}
</style>
</head>
<body>
<h1>인라인 요소의 display 조작</h1>
<button id="showBtn">눌러보셈</button>
<div class="wrapper">
<span>하나</span><span id="one">두울</span><span>세엣</span>
</div>
<script>
document.querySelector("#showBtn")
.addEventListener("click", function(){
document.querySelector("#one")
.style.display="inline";
});
</script>
</body>
- javascript를 통해 display를 inline, block으로 조작할 수 있다.
<style>
/*
[ inline 요소 ]
- width 와 height 를 지정할수 없다.
- left & right margin, padding 을 가질수 있다.
- top & bottom margin, padding 을 가질수 없다.
- 왼쪽과 오른쪽에 다른 요소가 올수 있다.
*/
#one{
border: 1px solid red;
display: inline;
}
/*
[ inline-block 요소 ]
- width, height, margin, padding 모두 가능
- 왼쪽과 오른쪽에 다른 요소가 올수 있다.
*/
#two{
border: 1px solid blue;
display: inline-block;
}
</style>
</head>
<body>
<h1>inline vs inline-block</h1>
<div id="one">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</div>
<div id="two">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</div>
</body>
- inline과 block의 display는 요소를 참고하면 이해가 쉬울 것 같다.
- inline-block 은 inline과 block의 특징을 둘 다 가지고 있다.
<style>
span{
border: 1px solid red;
width: 100px;
height: 100px;
}
img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h1>img 요소는 inline 요소 이지만 inline-block 요소 처럼 동작한다.</h1>
<img src="images/1.jpg"/>
<img src="images/2.jpg"/>
<span>span 요소</span>
<span>span 요소</span>
</body>
- <img> 요소는 inline 요소이지만 inline-block 요소처럼 동작한다. inline-block 처럼 동작한다는 것은 어떤 의미일까? <span> 요소와 같은 line 요소는 좌우로 나열되면서 요소 사이에 공백이 없고, width나 height의 크기 조절이 불가능하다. 그저 content만큼의 공간만을 차지할 뿐이다. <div>와 같은 block 요소는 위아래로 나열되면서 요소 사이에 공백이 없고, width나 height의 크기 조절이 가능하다.
inline-block 요소는 좌우로 나열되고 크기 조절이 가능하다. inline-block 요소 사이에 공백이 생긴다는 글도 몇 개 발견했지만 , 사실 이 공백은 엔터로 줄 나눔을 했기 때문에 생기는 것이지 옆으로 <img> 요소를 이어붙인다면 공백이 생기지 않는다. 예시의 <span>도 엔터로 줄 나눔을 하면 사이에 공백이 생기더라. 이어붙이면 공백이 사라진다.
step10. example
<body>
<h1>display 속성 활용</h1>
<button id="hideBtn">숨기기</button>
<button id="showBtn">보이기</button>
<button id="toggleBtn">토글</button>
<br/>
<img src="images/kim1.png" id="one"/>
<script>
document.querySelector("#hideBtn")
.addEventListener("click", function(){
document.querySelector("#one")
.style.display="none";
});
document.querySelector("#showBtn")
.addEventListener("click", function(){
document.querySelector("#one")
.style.display="inline";
});
//보였다 숨겼다를 반복(토글) 시키기
document.querySelector("#toggleBtn")
.addEventListener("click", function(){
//현재 display 의 value 값을 읽어온다.
let current=document.querySelector("#one").style.display;
if(current=="none"){
//보이게 한다.
document.querySelector("#one").style.display="inline";
}else{// "" or "inline"
//안보이게 한다.
document.querySelector("#one").style.display="none";
}
});
</script>
</body>
step10. quiz
<style>
#two, #three{
display: none;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<li><a href="#three">three</a></li>
</ul>
<p class="nav-content" id="one">one Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quis commodi dicta suscipit, deleniti, voluptas adipisci aliquam, aspernatur laboriosam a quam ut excepturi accusamus cupiditate dolor nihil ducimus reiciendis qui!</p>
<p class="nav-content" id="two">two Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quis commodi dicta suscipit, deleniti, voluptas adipisci aliquam, aspernatur laboriosam a quam ut excepturi accusamus cupiditate dolor nihil ducimus reiciendis qui!</p>
<p class="nav-content" id="three">three Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quis commodi dicta suscipit, deleniti, voluptas adipisci aliquam, aspernatur laboriosam a quam ut excepturi accusamus cupiditate dolor nihil ducimus reiciendis qui!</p>
<script>
//모든 a 요소의 참조값을 배열에 담아오기
let links=document.querySelectorAll(".nav a");
//반복문 돌면서 이벤트 리스너 등록하기
for(let i=0; i<links.length; i++){
links[i].addEventListener("click", function(){
//일단 모두다 숨기기
let navContents=document.querySelectorAll(".nav-content");
navContents.forEach(function(item){
item.style.display="none";
});
//이벤트가 일어난 a 요소의 href 속성 value 값 읽어오기
let sel=this.getAttribute("href");
console.log("sel:"+sel);
//읽어온 문자열을 선택자로 활용해서 보이게 하기
document.querySelector(sel).style.display="block";
});
}
</script>
</body>
- querySelector("xxx") 함수 안의 문자열에 들어가는 방식은 css selector(선택자) 가 들어가는 방식과도 유사하다.
댓글