코딩 공부/HTML + CSS

[HTML+CSS] 14_Display 속성

chocbi 2020. 5. 9. 18:29

Display 속성

#01. display 속성의 기본 이해

1) Block-Level 과 Inline-Level의 차이

요소 값 설명
Block-Level display: block block레벨요소의기본값.이 속성이적용되면해당 요소는width와height를적용할수 있다. 이 요소는하나의문단으로처리되기때문에,태그 다음에나타나는요소는자동으로줄 바꿈된다.
Inline-Level display:inline; inline레벨 요소의 기본값. 이 속성이 적용되면 해당 요소는 width와 height를 부여하더라도 적용되지 않는다. 이 요소는 하나으 ㅣ단어나 강조 구문처럼 인식되기 때문에, 태그 다음의 요소는 줄 바꿈 되지 않는다.
공통 display:none; 이 속성이 적용된 요소는 화면상에 표시되지 않는다.

01-display속성.html

<!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->

<head>
    <!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
    <meta charset="utf-8" />
    <!--IE의 호환성 보기 모드 금지-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 스마트 장치에서의 해상도 균일화 처리-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--브라우저에 표시될 문서 제목-->
    <title>My Web Page</title>
    <style type="text/css">
    div,
    span {
        width: 100px;
        height: 50px;
    }

    div {
        background-color: #ff6600;
        display: inline;
    }

    span {
        background-color: #ff00ff;
        display: block;
    }
    </style>
</head>
<!-- 브라우저에 보여질 부분 -->

<body>
    <div>DIV태그(1)</div>
    <div>DIV태그(2)</div>
    <span>SPAN태그(1)</span>
    <span>SPAN태그(2)</span>
</body>

</html>

출력결과

#02. inline-block

1) display 속성에 대한 inline-block 값

  • Block-Level 요소의 특성과 Inline-Level 요소의 특성을 혼합한 형태
    • Block-Level의 특성 -> 크기 지정 가능함
    • Inline-Level의 특성 -> 문장으로 형성됨
  • 크기를 지정 할 수 이쓴 Inline-Level 요소로 처리된다.

02-display_inline_block.html

<!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->

<head>
    <!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
    <meta charset="utf-8" />
    <!--IE의 호환성 보기 모드 금지-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 스마트 장치에서의 해상도 균일화 처리-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--브라우저에 표시될 문서 제목-->
    <title>My Web Page</title>
    <style type="text/css">
    div {
        width: 200px;
        height: 200px;
        display: inline-block;
    }

    #box1 {
        background: #ff6600;
    }

    #box2 {
        background: #ff00ff;
    }
    </style>
</head>
<!-- 브라우저에 보여질 부분 -->

<body>
    <div id="box1">박스1</div>
    <!--
    -->
    <div id="box2">박스2</div>
</body>

</html>
  • 두 요소간의 공백 제거팁
    • 두 요소가 문장으로 인식되어 enter키 때문에 공백이 생기게 된다. 이를 제거 하려면
      • 첫 번째 방법: 모든 HTML 태그를 한 줄로 작성한다. (현식적으로 불가능)
      • 두 번째 방법: HTML 코드 상의 줄 바꿈을 주석으로 처리하여 웹 브라우저가 인식하지 못하도록 작성한다.

출력결과

#03. 링크의 영역 확장

1)<a>태그의 기본 특성

  • <a>태그에 포함된 텍스트나 이미지만 클릭할 수 있다.

2) <a>태그의 클릭 영역 확장

  • <a>태그에게 크기 관련 속성을 부여하면, 지정된 영역을 모두 클릭할 수 있다.
  • <a>태그는 inline-level이므로, 크기 관련 속성을 지정할 수 없다.
  • 해결책 -> <a>태그에 사이즈를 지정할 수 있도록, display 속성을 block이나 inline-block으로 지정한다.

03-link_display.html

<!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->

<head>
    <!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
    <meta charset="utf-8" />
    <!--IE의 호환성 보기 모드 금지-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 스마트 장치에서의 해상도 균일화 처리-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--브라우저에 표시될 문서 제목-->
    <title>My Web Page</title>
    <style type="text/css">
    .link {
        /** 글자 크기 14px, 굴림 */
        font: 14px/40px "굴림";
        /** 상하 여백 0, 좌우 여백 15px */
        padding: 0 15px;
        /** 글자 색상 */
        color: #222;
        /** 링크의 밑줄 제거 */
        text-decoration: none;
        /** div처럼 동작해라~ */
        display: block;
        /** 크기 지정 */
        width: auto;
        height: 40px;
        /** 아래 테두리 설정 */
        border-bottom: 1px dotted #CCCCCC;
    }

    /** :fisrt-child --> 여러개의 요소 중에서 첫 번째 요소*/
    /** :last-child --> 여러개의 요소 중에서 마지막 요소*/
    .link:first-child {
        border-top: 1px dotted #CCCCCC;
    }

    .link:hover {
        background-color: #FFFF00;
    }
    </style>
</head>
<!-- 브라우저에 보여질 부분 -->

<body>
    <a href="#" class="link">메뉴항목1</a>
    <a href="#" class="link">메뉴항목2</a>
    <a href="#" class="link">메뉴항목3</a>
    <a href="#" class="link">메뉴항목4</a>
</body>

</html>

출력결과

#04. Tow-Line List 예제

1) 링크 내에 여러 개 항목 포함시키기

  • <a>태그는 Inline-Level 요소이므로, Block-Level요소를 포함할 수 없다.
    • <a>태그안에 <p>태그나 <div>태그 등을 포함시키는 것은 웹 표준에 맞지 않다.
  • <a>태그 내에서 다양한 형태를 구성하기 위해서는 <span>태그를 포함시킨후, display속성을 block으로 설정하여 다양한 UI를 표현해야 한다.

2) <a>태그에 포함시킬 수 있는 HTML 태그 요소의 종류

<span> <br /> <strong> <b>
<i> <u> <img>

04-link_display(2).html

<!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->

<head>
    <!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
    <meta charset="utf-8" />
    <!--IE의 호환성 보기 모드 금지-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 스마트 장치에서의 해상도 균일화 처리-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--브라우저에 표시될 문서 제목-->
    <title>My Web Page</title>
    <style type="text/css">
    .link {
        /** 글자 크기 14px, 굴림 */
        /** font: 14px/40px "굴림"; */
        font: 16px "굴림";
        /** 상하 여백 7, 좌우 여백 15px */
        /*padding: 0 15px;*/
        padding: 10px 15px;
        /** 글자 색상 */
        color: #222;
        /** 링크의 밑줄 제거 */
        text-decoration: none;
        /** div처럼 동작해라 */
        display: block;
        /** 크기 지정 */
        width: auto;
        /* height: 40px; */
        height: auto;
        /** 아래 테두리 설정 */
        border-bottom: 1px dotted #CCCCCC;
    }

    /** :first-child --> 여러개의 요소 중에서 첫 번째 요소; */
    /** :last-child --> 여러개의 요소 중에서 마지막 요소 */
    .link:first-child {
        border-top: 1px dotted #CCCCCC;
    }

    /** 마우스 오버시 배경색상 변경 */
    .link:hover {
        background-color: #FFFF00;
    }

    /** 링크 안의 <span>태그를 block-level요소로 변경하고 말줄임 처리 추가 */
    .link span {
        display: block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    /* 제목부분 강조하기 */
    .link .subject {
        font-weight: bold;
        font-size: 16px;
        padding-bottom: 5px;
    }

    /* 내용부분 글자 크기 */
    .link .desc {
        font-size: 12px
    }
    </style>
</head>
<!-- 브라우저에 보여질 부분 -->

<body>
    <!-- 링크는 HTML 분류상 inline-level 요소이기 때문에, block-level을 포함할 수 없다. 즉, 링크 안에서 여러개의 문단을 구성하기 위해서는 <span>만 사용할 수 있다. <span>을 문단처럼 적용하기 위하여, display 속성을 block으로 부여한다. -->
    <a href="#" class="link">
        <span class="subject">HTML</span>
        <span class="desc">웹 페이지를 제작하기 위한 뼈대를 구성하는 언어</span>
    </a>
    <a href="#" class="link">
        <span class="subject">CSS</span>
        <span class="desc">HTML로 구성된 뼈대에 옷을 입히는 언어</span>
    </a>
    <a href="#" class="link">
        <span class="subject">JavaScript</span>
        <span class="desc">동적인 기능을 추가하는 언어</span>
    </a>
</body>

</html>

출력결과

#05. 목록정의 요소 사용하기

1) 목록 정의 요소의 활용을 위한 준비

- 기본 목록 정의를 표현하고, 목록의 영역을 위한 `<ul>`태그와 `<li>`태그에 영역을 확인하기 위한 배경색 및 테두리를 지정하였다.

2) 목록 정의 요소의 활용을 위한 준비

  • 목록 정의에 표시되는 기호를 제거하기 위한 스타일 속성을 추가한다.

3) 목록 정의 요소의 활용을 위한 준비

  • <ul>태그의 왼쪽에 보이는 여백을 제거하기 위하여 padding을 0으로 지정한다.

4) 목록 정의 요소의 활용을 위한 준비

  • <ul>태그의 외부 요소들과의 거리를 제거하기 위하여 margin을 0으로 지정한다.

05-목록정의요소.html

<!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->

<head>
    <!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
    <meta charset="utf-8" />
    <!--IE의 호환성 보기 모드 금지-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 스마트 장치에서의 해상도 균일화 처리-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--브라우저에 표시될 문서 제목-->
    <title>My Web Page</title>
    <style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }

    a {
        text-decoration: none;
        color: #222;
        font: 14px "굴림";
    }

    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    li {
        border-bottom: 1px solid #cccccc;
    }

    li:first-child {
        border-top: 1px solid #cccccc;
    }

    li>a {
        /** 링크의 박스화 --> 하나의 목록 안을 전체 클릭 가능하게 한다. */
        display: block;
        padding: 10px 15px;
        width: auto
    }

    li>a:hover {
        background-color: #00FF00;
    }
    </style>
</head>
<!-- 브라우저에 보여질 부분 -->

<body>
    <h1>서비스 목록</h1>
    <p>
        사용하실 서비스를 선택하세요.
    </p>
    <ul>
        <li><a href="#">메일</a></li>
        <li><a href="#">블로그</a></li>
        <li><a href="#">카페</a></li>
        <li><a href="#">쇼핑</a></li>
        <li><a href="#">지식인</a></li>
    </ul>
    <div>
        copyright 2014. itpaper.co.kr.
    </div>
</body>

</html>

출력결과

06-목록정의요소(2).html

<!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->

<head>
    <!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
    <meta charset="utf-8" />
    <!--IE의 호환성 보기 모드 금지-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 스마트 장치에서의 해상도 균일화 처리-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--브라우저에 표시될 문서 제목-->
    <title>My Web Page</title>
    <style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }

    a {
        text-decoration: none;
        color: #222;
        font: 14px "굴림";
    }

    /** 목록 정의 초기화 */
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    li {
        width: 20%;
        display: inline-block;
        text-align: center;
    }

    li a {
        /** 링크의 박스화 --> 하나의 목록 안을 전체 클릭 가능하게 한다. */
        display: block;
        padding: 10px 15px;
        width: auto;
        /** li에게 border를 지정할 경우 li의 총 넓이 합이 100%를 초과하므로, 레이아웃이 깨지게 된다.
        링크는 width가 auto이므로, border를 주어도 전체 크기에 영향이 없다. */
        border-left: 1px dotted #cccccc;
    }

    li:first-child a {
        border-left: 0;
    }

    li a:hover {
        background-color: #00FF00;
    }
    </style>
</head>
<!-- 브라우저에 보여질 부분 -->

<body>
    <h1>서비스 목록</h1>
    <p>
        사용하실 서비스를 선택하세요.
    </p>
    <ul>
        <li><a href="#">메일</a></li>
        <!--
     -->
        <li><a href="#">블로그</a></li>
        <!--
     -->
        <li><a href="#">카페</a></li>
        <!--
    -->
        <li><a href="#">쇼핑</a></li>
        <!--
    -->
        <li><a href="#">지식인</a></li>
    </ul>
    <div>
        copyright 2014. itpaper.co.kr.
    </div>
</body>

</html>

출력결과