반응형
<참고> 사이트 아래의 링크
CSS Layout - The display Property
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
블록 요소
- 항상 개행을 하며, 그 통으로 한줄
- 종류 : div, h1~h6, p, form, header, footer, section
인라인 요소
- 개행하지 않으며, 통으로 한줄이 아닌 필요한 넓이만큼을 차지함
- 종류 : span, a, img, li
- 인라인 요소를 수평(옆)으로 평행하게 나열할 경우에는 display : inline;을 사용
display의 none
- 자바스크립트에서 주로 삭제와 재생성 대신으로 요소를 숨김과 보여짐 기능을 사용할 때 사용하며, 자바스크립트에서의 default는 display : none;이다.
모든 html 요소는 타입에 맞게 디폴트값을 가지고 있다.
보통 이벤트 클릭으로 문장을 보이고 숨길 경우, 보이고 싶은 내용을 div 안에 넣고(default는 display : none;), 함수를 이용해 display : block으로 만들어주면 됨.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="flower.png" alt="꽃">
<button class="over" id="open" onclick="showDetail()">상세 설명 보기</button>
<div id="desc" class="detail">
<h4>등심붓꽃</h4>
<p>북아메리카 원산으로 ... 번식한다.</p>
<button id="close" onclick="hideDetail()">상세 설명 닫기</button>
</div>
<script>
function showDetail(){
document.querySelector('#desc').style.dispaly = "block";
document.querySelector('#open').style.dispaly = "none";
}
function hideDetail(){
document.querySelector('#desc').style.dispaly = "none";
document.querySelector('#open').style.dispaly = "block";
}
</script>
</body>
</html>반응형
'개발자로 가는 길(국비지원과정) > 3.HTML,CSS,JavaScript, jQuery' 카테고리의 다른 글
| [자바스크립트] 자바스크립트에서 table작성? (0) | 2022.06.01 |
|---|---|
| [자바스크립트] Array 객체의 메서드 (0) | 2022.05.09 |
| [복습 Day19] 자바스크립트 마무리, Spring 시작, IntelliJ설치 (0) | 2022.01.26 |
| [복습 Day18] 자바스크립트 core, dom, 연산자, 함수 호출 방법, innerHTML, setAttribute, getAttribute, JSON (0) | 2022.01.25 |
| [복습 Day17] Javascript 개요, 자바스크립트의 데이터타입, 연산자, 백틱, 익명함수(이벤트와 연결, window.onload), innerHTML, 호이스팅(표현함수), 부트스트랩 사용방법 (0) | 2022.01.24 |