본문 바로가기
테크노트/css

CSS 디스플레이 타입 (display types)

by 테크한스 2022. 4. 29.

 

css에서 개념적으로나 사용상으로 중요한 부분 중 하나가 css 디스플레이 타입에 대한 내용입니다.

 

이것을 사용하기전에 해당 개념에 대해서 이해하는 것이 필수적입니다.

 

(1) 요소의 종류

 

 

 

 

* 연습 소스

<!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>
    <style>
        div{
            padding: 10px; 
            margin-bottom: 10px;
            width: 600px;
            border: 3px solid black;
        }

        h1,a,input{
            width: 200px;
            height: 100px;
            background-color:yellowgreen;

        }
    </style>
</head>
<body>

    <div>
        <h2>*block태그(영역설정,한줄엔터)*</h1>
        <h1>제목태그 1</h1>
        <h1>제목태그 2</h1>
    </div>
    <div>
        <h2>*inline태그(영역불가,한줄연결)*</h1>        
        <a href="#">링크태그 1</a>
        <a href="#">링크태그 2</a>
    </div>    
    <div>
        <h2>*inline-block태그(영역설정,한줄연결)*</h1>        
        1<input type="text" name="id1">
        2<input type="text" name="id2">
    </div>

</body>
</html>

 

 

(2) display 속성 사용법

위의 3가지 요소를 가지고 아래와 같이 디스플레이를 선언해서 사용합니다.

 

 

 

* 연습 소스

<!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>
    <style>
        div{
            padding: 10px; 
            margin-bottom: 10px;
            width: 600px;
            border: 3px solid black;
        }

        h1,a,input{
            width: 200px;
            height: 100px;
            background-color:yellowgreen;

        }
/* 각 요소에 디스플레이 속성을 추가 */
        h1{
            display:inline;
        }
        a{
            display:block;
        }
        input{
            display:block;
        }


    </style>
</head>
<body>

    <div>
        <h2>*block태그(영역설정,한줄엔터)->inline태그*</h1>
        <h1>제목태그 1</h1>
        <h1>제목태그 2</h1>
    </div>
    <div>
        <h2>*inline태그(영역불가,한줄연결)->block태그*</h1>        
        <a href="#">링크태그 1</a>
        <a href="#">링크태그 2</a>
    </div>    
    <div>
        <h2>*inline-block태그(영역설정,한줄연결)->block태그*</h1>        
        1<input type="text" name="id1">
        2<input type="text" name="id2">
    </div>
    
</body>
</html>

 

(3) visibility 속성 사용법

 

 

visible을 hidden 속성으로 사용해도 내용은 사라지지만 영역은 남아있습니다.

 

 

 

* 연습 소스

<!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>
    <style>
        div{
            padding: 10px; 
            margin-bottom: 10px;
            width: 600px;
            border: 3px solid black;
            background-color:yellowgreen;            
        }        
        .box1{ visibility: visible;}
        .box2{ visibility: hidden;} 
        .box3{ visibility: visible;}               
    </style>
</head>
<body>
    <div class="box1">박스1</div>    
    <div class="box2">박스2</div>
    <div class="box3">박스3</div>
</body>
</html>

 

(4) none 속성 사용법

 

 

display:none을 사용하면 해당 요소를 모두 지워버리는 것입니다. (해당 영역 모두 날림)

 

* 연습 소스

<!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>
    <style>
        div{
            padding: 10px; 
            margin-bottom: 10px;
            width: 600px;
            border: 3px solid black;
            background-color:yellowgreen;            
        }        
        .box1{ visibility: visible;}
        .box2{ display: none;} 
        .box3{ visibility: visible;}               
    </style>
</head>
<body>
    <div class="box1">박스1</div>    
    <div class="box2">박스2</div>
    <div class="box3">박스3</div>
</body>
</html>

 

(5) display 속성 연습 코드

아래 소스에서 주석을 풀어보면서 화면출력해 보세요

<!DOCTYPE html>
<html lang="kr">
<head>
	<meta charset="UTF-8">
	<title>테스트</title>
	<link rel="stylesheet" href="style.css">
    <style>
/* 1st (block->inline)
        a:active {
            color : #993366;
        }
        ul {
            list-style-type : none;
        }
        li {
            display : inline;
        }
*/
/* 2nd (block->inline)
        a:active {
            color : #993366;
        }
        ul {
            list-style-type : none;
        }
        li {
            display : inline;
        }
        li a {
            background-color : #333;
            color : #fff;
        }
        li a:visited {
            color : #fff;
        }
*/
/* 3rd (block->inline)
        a:active {
            color : #993366;
        }
        ul {
            list-style-type : none;
        }
        li {
            display : inline;
            width : 100px;
        }
        li a {
            background-color : #333;
            color : #fff;
        }
        li a:visited {
            color : #fff;
        }
*/
/* 4th (block->inline)
        a:active {
            color : #993366;
        }
        ul {
            list-style-type : none;
        }
        li {
            display : inline;
            float : left
        }
        li a {
            display : block;
            width : 100px;
            background-color : #333;
            color : #fff;
            text-align : center;
        }
        li a:visited {
            color : #fff;
        }
        li a:hover {
            background-color : #999;
            color : #fff;
            text-decoration : none;
        }
*/
/* 5th (block->inline)
        a:active {
            color : #993366;
        }
        ul {
            list-style-type : none;
        }
        li {
            display : inline;
            float : left
        }
        li a {
            display : block;
            width : 100px;
            height: 30px;
            background-color : #333;
            color : #fff;
            text-align : center;
            line-height: 30px;
        }
        li a:visited {
            color : #fff;
        }
        li a:hover {
            background-color : #999;
            color : #fff;
            text-decoration : none;
        }
*/
/* 6th (block->inline-block)
        a:active {
            color : #993366;
        }
        ul {
            list-style-type : none;
        }
        li {
            display : inline-block;
            width : 100px;
            height : 30px;
        }
        li a {
            display : block;
            background-color : #333;
            color : #fff;
            text-align : center;
            line-height : 30px;
        }
        li a:visited {
            color : #fff;
        }
        li a:hover {
            background-color : #999;
            color : #fff;
            text-decoration : none;
        }
*/
/* 7th (block->inline-block)
        a:active {
            color : #993366;
        }
        ul {
            list-style-type : none;
            font-size : 0;
        }
        li {
            display : inline-block;
            width : 100px;
            height : 30px;
        }
        li a {
            display : block;
            background-color : #333;
            color : #fff;
            font-size : 18px;
            text-align : center;
            line-height : 30px;
        }
        li a:visited {
            color : #fff;
        }
        li a:hover {
            background-color : #999;
            color : #fff;
            text-decoration : none;
        }
*/        
    </style>
</head>
<body>
	<h1>웹 사이트</h1>
	<p>이 웹 사이트는 <b>테스트를 위한 사이트</b>입니다. </p>
	<p><a href="http://naver.com/" target="_blank">Naver</a>에 이동합니다.</p>
	<ul>
		<li><a href="https://www.google.co.kr/">Google</a></li>
		<li><a href="http://www.daum.net/">Daum</a></li>
		<li><a href="http://www.naver.com/">Naver</a></li>
	</ul>
</body>
</html>

 

아래 영상으로도 설명을 들어보세요

 

 

'테크노트 > css' 카테고리의 다른 글

CSS 반응형 웹(Mobile Responsiveness)의 기초  (0) 2022.05.25
CSS 포지션(position)  (0) 2022.05.10
CSS에서 사용하는 크기조정(Pixels, rem, em)  (0) 2022.04.06
초보개발자가 알아야 하는 CSS 기초  (0) 2022.01.07
CSS의 확장, 부트스트랩(bootstrap)  (0) 2021.11.05

관련글

댓글

티스토리툴바