공간분할태그, display

○공간분할태그

경계를 분할하거나 영역을 나눌 때 사용하는 태그
div요소 : 큰 영역분할
p요소 : 문단분할
span요소 : 세부적인 스타일

○display

요소가 화면에 보이는 방식 지정
block : block형식으로 지정, 웹 페이지의 가로공간을 모두 차지하는 속성
ex) div, p, h1, ul, ol, table...
inline : inline형식으로 지정, 컨텐츠(내용)이 끝나는 지점까지 너비를 가지는 속성
너비와 높이를 지정할 수 없음
ex) span, a, strong, textarea
none : 해당 HTML요소를 보이지 않게 지정

<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>
        /* display : 화면에 보여지는 방식 지정 */
        /* block : 웹 페이지의 가로공간을 모두 차지  (h, div, p, table...*/
        /* inline : content가 차지하는 만큼만 차지(a, span,) */
         /* inline은 높이 너비 지정 불가 */
         /* none : 화면에 보이지 않게 지정 */
         /* inline-block : inline의 기본속성+ 높이와 너비 지정 가능*/
        div{
            background-color: darkred;
            width: 200px;
            height: 200px;
        }
        p{
            background-color: aqua;
            display: inline;
        }
        span{
            background-color: chartreuse;
            /* 높이 너비 지정 불가 */
            /* block로 속성바꾸면 가능 */
            width: 200px;
            height: 200px;
        }
        a{
            background-color: deeppink;
            /* 높이 너비 지정 불가 */
            /* block로 속성바꾸면 가능 */
            /* none으로 속성바꾸면 안보임 */
            display: none;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div>div</div>
    <p>p</p>
    <span>span</span>
    <a href="">aaaaaaaaaaaaaaaaaaaa</a>
</body>

○실습

<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>
        /* 2. css 적용하기 */
        /* 2-1. 마우스를 올리기 전에는 sup태그가 안보이게 */
        sup{
            display: none;
        }
        /* 2-2. 마우스를 올리면(hover) sup태그가 보이게(inline) */
        /* a태그와 sup태그는 근접후행형제 */
        /* a태그에 마우스를올리면 근접후행하는 sup태그의 css 변경   */
        a:hover+sup{
            display:inline;
        }
    </style>
</head>
<body>
    <!-- 1. html 뼈대부터 만들기 -->
    <a href="www.naver.com">네이버</a>
    <sup>www.naver.com</sup>
    <br>
    <a href="www.daum.net">다음</a>
    <sup>www.daum.net</sup>
</body>
python 3 기본 문자열 절편
데이터 의 대량 추가, 대량 수정

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage