HTML 5 + CSS + 자바스크립트 Day03

주세환·2023년 3월 24일
CSSHTML 5JavaScript
0

HTML 5

목록 보기
3/12

CSS 3

가시 속성

display 속성

<head>
    <meta charset='utf-8'>
    <title>CSS 가시속성</title>
    <style>
        #box {
            display : none; 
        }
    </style>
</head>
<body>
    <span>더미</span>
    <div id="box">대상</div>
    <span>더미</span>
</body>

fe25_css.html

div는 none으로 했으니 div인 대상은 보이지 않는다.

배경 속성

배경 속성

배경 이미지 삽입과 크기 지정

    <style>
        body{
            background-image: url('./image/sunset.png');
            background-size: 100% 350px;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>

size는 크기
repeat는 반복
attachment는 고정이다.

반복과 부착 형태, 위치

    <style>
        body{
            background-image: url('./image/sunset.png');
            background-size: 100% 350px;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: bottom;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, assumenda architecto harum quasi maiores aspernatur in totam reprehenderit ea, excepturi, magnam maxime quas. Reprehenderit quaerat eligendi labore eos modi! Suscipit.</p>
</body>

fe26_background.html
이렇게 작성하면

배경이 아래로 이동한다.

배경 속성 정리

글자 속성

글자 크기와 글꼴

font-size : 글자 크기
font-family : 글꼴

글자 스타일과 두께

<head>
    <meta charset='utf-8'>
    <title>폰트 예제</title>
    <style>
        h1{
            font-size: 40px;
            font-family: 'NanumGothic';
        }

        p{
            font-size: 15px;
            font-family: 'NanumGothic';
        }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet 로렘 입숨</h1>
    <p>로렘 입숨 : Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, unde! Repellendus nobis, voluptatem in assumenda quaerat, hic adipisci est omnis quos similique maiores fuga officiis. Id quo vero tempore unde.</p>
</body>

fe27_fonts.html

나눔 고딕체로 바뀐 모습

글자 정렬

<p style="text-align: center; font-size: 30px;">2023.03.23. 목요일</p>

를 추가하면

가운데로 정렬된 30폰트의 글자가 나온다.
text-align : 정렬

예제(버튼 만들기, 밑줄 제거)

<head>
    <meta charset='utf-8'>
    <title>버튼만들기</title>
    <style>
        .font_big{ font-size: 25px; }
        .font_bold{ font-weight: bold; }
        .font_center{ text-align: center; }

        .button {
            width: 200px;
            height: 60px;
            background-color: skyblue;
            border-width: 10px;
            border-style: solid;
            border-color: aliceblue;
            border-radius: 40px;
            box-shadow: 5px 5px 5px #a9a9a9;
        }

        .button > a {
            display: block;
            line-height: 60px;  /* 높이 */
            text-decoration-line: none; /* 밑줄 */
            }
    </style>
</head>
<body>
    <div class="button">
        <a href="https://www.google.com" target="_blank" class="font_big font_bold font_center">구글</a>
    </div>
</body>

fe28_buttondesign.html

폰트 크기, 위치, 박스 크기, 라운드 색상 등등 코딩한 대로 생성된 모습

위치 속성

요소의 고정 위치와 상대 위치 지정

absolute

<head>
    <meta charset='utf-8'>
    <title>위치 속성</title>
    <style>
        .box {
            width: 100px; height: 100px;
            position: absolute;
        }
        .box:nth-child(1) { 
            background-color: red; 
            left: 10px; top: 10px;
        }
        .box:nth-child(2) { 
            background-color: green;
            left: 50px; top: 50px;
        }
        .box:nth-child(3) { 
            background-color: blue; 
            left: 90px; top: 90px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>

fe29_position.html이다

위 사진처럼 겹쳐서 나온다.

z-index

<head>
    <meta charset='utf-8'>
    <title>위치 속성</title>
    <style>
        .box {
            width: 100px; height: 100px;
            position: absolute;
        }
        .box:nth-child(1) { 
            background-color: red; 
            left: 10px; top: 10px;
            z-index: 900;
        }
        .box:nth-child(2) { 
            background-color: rgba(0, 128, 0, 0.7);
            left: 50px; top: 50px;
            z-index: 0;
        }
        .box:nth-child(3) { 
            background-color: blue; 
            left: 90px; top: 90px;
            z-index: 90;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>

z-index를 추가했다 (z축)

큰 숫자를 입력한 순서대로 위로 올라온다.

<head>
    <meta charset='utf-8'>
    <title>위치 속성</title>
    <style>
        .box {
            width: 100px; height: 100px;
            position: absolute;
        }
        .box:nth-child(1) { 
            background-color: red; 
            left: 10px; top: 10px;
            z-index: 100;
        }
        .box:nth-child(2) { 
            background-color: rgba(0, 128, 0, 1);
            left: 50px; top: 50px;
            z-index: 10;
        }
        .box:nth-child(3) { 
            background-color: blue; 
            left: 90px; top: 90px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea ab at hic culpa dolorem, nemo repudiandae illum, corrupti fugiat magni et rem quis. Eius ut soluta quidem corporis, culpa consequuntur!</h1>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>

이렇게 수정하니

빨간색이 사라졌다.

<head>
    <meta charset='utf-8'>
    <title>위치 속성</title>
    <style>
    	 /* #out { */
        body > div { 
            width: 200px;
            height: 200px;
           /* border: 2px solid black;*/ /*어느 영역인지 확인하는 용도*/ 
            position: relative;
        }
        .box {
            width: 100px; height: 100px;
            position: absolute;
        }
        .box:nth-child(1) { 
            background-color: red; 
            left: 10px; top: 10px;
            z-index: 100;
        }
        .box:nth-child(2) { 
            background-color: rgba(0, 128, 0, 1);
            left: 50px; top: 50px;
            z-index: 10;
        }
        .box:nth-child(3) { 
            background-color: blue; 
            left: 90px; top: 90px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit</h1>
    <div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>  
    <h1>Lorem ipsum dolor sit</h1>
</body>

위처럼 수정하니

원하는 대로 수정되었다.

내용이 요소 크기를 벗어날 때

overflow

 <style>
        /* #out { */
        body > div { 
            width: 420px;
            height: 150px;
            border: 2px solid black;
            position: relative;
            overflow: hidden; /* 넘치는 부분 숨기기 */
            /* overflow: scroll;  넘치는 부분 스크롤 */
        }

overflow: hidden;을 추가하면

겹치는 부분을 숨긴다.

유동속성

float 속성

<head>
    <meta charset='utf-8'>
    <title>CSS float속성</title>
    <style>
        img{
            float: left;
        }
    </style>
</head>
<body>
    <img src="./image/naver.gif" width="400">
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis repellat non voluptatem facere dolores neque velit. Sapiente, ipsa cupiditate numquam sit iste, beatae est non earum facilis autem saepe. Consectetur!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis repellat non voluptatem facere dolores neque velit. Sapiente, ipsa cupiditate numquam sit iste, beatae est non earum facilis autem saepe. Consectetur!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis repellat non voluptatem facere dolores neque velit. Sapiente, ipsa cupiditate numquam sit iste, beatae est non earum facilis autem saepe. Consectetur!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis repellat non voluptatem facere dolores neque velit. Sapiente, ipsa cupiditate numquam sit iste, beatae est non earum facilis autem saepe. Consectetur!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis repellat non voluptatem facere dolores neque velit. Sapiente, ipsa cupiditate numquam sit iste, beatae est non earum facilis autem saepe. Consectetur!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis repellat non voluptatem facere dolores neque velit. Sapiente, ipsa cupiditate numquam sit iste, beatae est non earum facilis autem saepe. Consectetur!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis repellat non voluptatem facere dolores neque velit. Sapiente, ipsa cupiditate numquam sit iste, beatae est non earum facilis autem saepe. Consectetur!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis repellat non voluptatem facere dolores neque velit. Sapiente, ipsa cupiditate numquam sit iste, beatae est non earum facilis autem saepe. Consectetur!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis repellat non voluptatem facere dolores neque velit. Sapiente, ipsa cupiditate numquam sit iste, beatae est non earum facilis autem saepe. Consectetur!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis repellat non voluptatem facere dolores neque velit. Sapiente, ipsa cupiditate numquam sit iste, beatae est non earum facilis autem saepe. Consectetur!</p>
</body>

fe30_float.html 로렘이 너무 길지만

이렇게 사진은 왼쪽으로 하고 나머지는 반대편에 채우게 된다.

수평 정렬

<head>
    <meta charset='utf-8'>
    <title>수평정렬</title>
    <style>
        .box {
            width: 100px; height: 100px;
            float: left; /* 없으면 아래로 흐름 */
        }
        .box:nth-child(1) {
            background-color: red;
        }
        .box:nth-child(2) {
            background-color: green
            ;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
</body>

fe31_float_box.html

float:left; 때문에 왼쪽으로 간다.

그림자와 그레이디언트 속성

그림자 속성

버튼 만들 때 적용해보았음.

그레이디언트 속성

http://www.colorzilla.com/gradient-editor/

레이아웃 구성과 기능

수평, 중앙, One True 정렬 레이아웃

수평 정렬 레이아웃

    <style>
        .container {
            overflow: hidden;
        }

        .item {
            float: left;
            margin: 0 5px;
            padding: 5px 10px;
            background-color: bisque;
        }
    </style>
<body>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus autem beatae, quia dolore porro consectetur nisi nemo voluptate iure nesciunt voluptatem corrupti nihil. Sit atque vero, ullam unde doloribus ad.</p>
    <div class="container">
        <div class="item">메뉴1</div>
        <div class="item">메뉴2</div>
        <div class="item">메뉴3</div>
        <div class="item">메뉴4</div>
    </div>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus autem beatae, quia dolore porro consectetur nisi nemo voluptate iure nesciunt voluptatem corrupti nihil. Sit atque vero, ullam unde doloribus ad.</p>
</body>

fe32_hralign_layout.html 이다.

가로로 정렬이 된다.

중앙 정렬 레이아웃

    <style>
        * {
            margin:0; padding:0;
        }
        body{
            width:600px;
            margin: 0 auto;
        }
        .container {
            overflow: hidden;
        }

        .item {
            float: left;
            margin: 0 5px;
            padding: 5px 10px;
            background-color: bisque;
        }
    </style>

fe33_central_layout.html이다. fe32에서 style을 이렇게 바꿔준다.

이렇게 중앙으로 정렬이 된다.

One True 레이아웃

<head>
    <meta charset='utf-8'>
    <title>일반적인 레이아웃</title>
    <style>
        body { width: 600px; margin: 10px auto; }
        #header {
            background-color: aquamarine;
        }

        #wrap {
            overflow: hidden;
        }

        #aside {
            float: left;
            width: 200px;
            background-color: burlywood;
        }

        #contents {
            float: right;
            width: 400px;
            background-color: bisque;
        }

        #footer {
            background-color: violet;
        }
    </style>
</head>
<body>
    <div id="header">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus odio quisquam impedit, eius consequuntur sint, tenetur sequi incidunt ut dolore ipsam nulla explicabo aliquam. Minima quaerat a deserunt unde natus.</div>
    <div id="wrap">
        <div id="aside">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor sapiente ducimus, reiciendis similique nulla velit praesentium laudantium fugit libero nesciunt et cupiditate quo esse temporibus! Laborum, earum esse! Sapiente, eius!</div>
        <div id="contents">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda magni voluptatibus necessitatibus pariatur numquam saepe ipsam adipisci, deleniti ab voluptatum optio quae voluptate vel? Veritatis quibusdam quaerat possimus iure illo!</div>
    </div>
    <div id="footer">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti tempora ratione fuga animi eveniet pariatur accusamus magnam praesentium mollitia ullam eaque alias accusantium unde reprehenderit, commodi tempore soluta quisquam laudantium.</div>
</body>

fe34_normal_layout.html이다.

이렇게 칸이 분리가 된다.

flex box 레이아웃

    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        * { margin: 0; padding: 0; }

        .box {
            background-color: darkgray;
            margin: 5px; padding: 5px;
            width: 100px;
            color: white;
            text-align: center;
        }

        .container {
            width: 600px;
            background-color: aliceblue;
            border: 2px solid #303030;
            margin-bottom: 5px;
            display: flex; /* 플렉스 박스 레이아웃 */
        }

        #option1 {
            flex-direction: row;
        }

        #option2 {
            flex-direction: row-reverse;
        }

        #option3 {
            flex-direction: column;
        }

        #option4 {
            flex-direction: column-reverse;
        }
    </style>
</head>
<body>
    <div id="option1" class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <div id="option2" class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <div id="option3" class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <div id="option4" class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>

    </div>
</body>

fe38_flexible_layout.html

    <style>
        * { margin: 0; padding: 0; }

        .box {
            background-color: darkgray;
            margin: 5px; padding: 5px;
            width: 100px;
            color: white;
            text-align: center;
        }

        .container {
            width: 600px;
            background-color: aliceblue;
            border: 2px solid #303030;
            margin-bottom: 5px;
            display: flex; /* 플렉스 박스 레이아웃 */
        }

        #option1 {
            flex-direction: row; /* 좌, 우 시작하는 위치 */
            flex-wrap: wrap; /* 박스 크기 */
        }

        #option2 {
            flex-direction: row-reverse;
            flex-wrap: wrap-reverse;
        }

        #option3 {
            flex-direction: column;
        }

        #option4 {
            flex-direction: column-reverse;
        }
    </style>
</head>
<body>
    <div id="option1" class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
    </div>
    <div id="option2" class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
    </div>
    <div id="option3" class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
    </div>
    <div id="option4" class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
    </div>
</body>

fe39_flexible_layout.html

    <style>
        * { margin: 0; padding: 0; }

        .box {
            background-color: darkgray;
            margin: 5px; padding: 5px;
            width: 100px;
            color: white;
            text-align: center;
        }

        .container {
            width: 600px;
            background-color: aliceblue;
            border: 2px solid #303030;
            margin-bottom: 5px;
            display: flex; /* 플렉스 박스 레이아웃 */
        }

        #option1 {
            height: 150px;
            flex-direction: row;
            justify-content: space-between; /* 양쪽으로 늘려서 맞춤 */
            align-items: stretch;
        }

        #option2 {
            flex-direction: row-reverse;
        }

        #option3 {
            flex-direction: column;
        }

        #option4 {
            flex-direction: column-reverse;
        }
    </style>
</head>
<body>
    <div id="option1" class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <div id="option2" class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <div id="option3" class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <div id="option4" class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
</body>

fe40_flexible_layout.html

그리드 레이아웃

    <style>
        #wrap {
            display: grid;
            grid-template-columns: repeat(3,1fr); /* 가로 길이 비율 */
            grid-template-rows: 1fr 2fr; /* 세로 길이 비율 */
            row-gap: 10px;  /* 세로 틈 비율 */
            column-gap: 20px; /* 가로 틈 비율 */
            /*  grid-template-rows: 100px 100px; */
        }
        .item {
            padding: 10px;
            background-color: #eeeeee;
        }
        .item:nth-child(2n+1) {
            background-color: #bbbbbb;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et id distinctio quisquam pariatur eius voluptatem doloribus molestias, officiis neque voluptatum exercitationem harum nihil natus. Quis id repellat ullam sed rem.</div>
        <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et id distinctio quisquam pariatur eius voluptatem doloribus molestias, officiis neque voluptatum exercitationem harum nihil natus. Quis id repellat ullam sed rem.</div>
        <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et id distinctio quisquam pariatur eius voluptatem doloribus molestias, officiis neque voluptatum exercitationem harum nihil natus. Quis id repellat ullam sed rem.</div>
        <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et id distinctio quisquam pariatur eius voluptatem doloribus molestias, officiis neque voluptatum exercitationem harum nihil natus. Quis id repellat ullam sed rem.</div>
        <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et id distinctio quisquam pariatur eius voluptatem doloribus molestias, officiis neque voluptatum exercitationem harum nihil natus. Quis id repellat ullam sed rem.</div>
        <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et id distinctio quisquam pariatur eius voluptatem doloribus molestias, officiis neque voluptatum exercitationem harum nihil natus. Quis id repellat ullam sed rem.</div>
    </div>
</body>

fe41_grid_layout.html

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>그리드 레이아웃2</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        #wrap {
            width: 800px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(4, 100px);
        }

        .box {
            padding: 35px;
            color: white;
            font-weight: bold;
            text-align: center;
            
        }
        .box1 {
            background-color: #3689ff;
            grid-column: 1/4;
        }
        .box2 {
            background-color: #00cf12;
            grid-row: 2/4;
        }
        .box3 {
            background-color: #ff9019;
            grid-column: 2/4;
            grid-row: 2/4;
        }
        .box4 {
            background-color: #ffd000;
            grid-column: 4/5;
            grid-column: 1/4;
        }
    </style>
</head>

fe42_grid_layout.html

요소 배치

절대 위치를 사용한 요소 배치

<head>
    <meta charset='utf-8'>
    <title>절대위치 레이아웃</title>
    <style>
        #container {
            width: 500px; height: 200px;
            border: 2px solid black;
            overflow: hidden;
            position: relative;
        }
        .circle {
            width: 50px; height: 50px;
            border-radius: 50%;
            background-color: lightgray;
            position: absolute;
        }
        #red {
            background-color: red;
            left: 20px; top: 20px;
        }
        #green {
            background-color: green;
            right: 20px; top: 20px;
        }
        #blue {
            background-color: blue;
            right: 20px; bottom: 20px;
        }
        #yellow {
            background-color: yellow;
            left: 20px; bottom: 20px;
        }
    </style>
</head>
<body>
    <h2>Lorem ipsum dolor sit amet.</h2>
    <div id="container">
        <div id="red" class="circle"></div>
        <div id="green" class="circle"></div>
        <div id="blue" class="circle"></div>
        <div id="yellow" class="circle"></div>
    </div>
    <h2>Lorem ipsum dolor sit amet.</h2>
</body>

자손인 .circle에 absolute, 부모인 container에 relative를 적용하니

이렇게 원하는 위치에 배치가 된다.

요소를 중앙에 배치

<head>
    <meta charset='utf-8'>
    <title>중앙배치</title>
    <style>
        * { margin: 0; padding: 0; }
        body { background-color: wheat; }

        #container {
            width: 500px; height: 250px;
            background-color: orangered;

            position: absolute;
            left: 50%; top: 50%;
            margin-left: -250px;
            margin-top: -125px;
        }
    </style>
</head>
<body>
    <div id="container">
        <h1>Lorem ipsum dolor sit amet</h1>
    </div>
</body>

fe36_central_position.html

항상 중간에 배치된다.

요소를 고정 위치에 배치

이렇게 스크롤을 내려도 항상 고정되어 있는 요소.

<head>
    <meta charset='utf-8'>
    <title>고정바 영역</title>
    <style>
        .container {
            margin-top: 50px; margin-left: 50px;
        }
        .top_bar {
            background-color: aqua;
            position: fixed;
            left: 0; top: 0; right: 0;
            height: 50px;
        }
        .left_bar {
            background-color: cadetblue;
            position: fixed;
            left: 0; top: 0; bottom: 0;
            width: 50px;
        }        
    </style>
</head>
<body>
    <div class="top_bar"></div>
    <div class="left_bar"></div>
    <div class="container">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
        ...
        </p>
    </div>
</body>

fe37_fixbar.html 스크롤을 해야해서 내용을 매우 길게 적었다.

스크롤을 내려도 상단바와 좌측바는 항상 고정이다.

글자 생략

        .container  > h1 {
            width: 500px;
        }
        .ell { /* 기준 넓이를 넘어가면 생략기호 */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="top_bar"></div>
    <div class="left_bar"></div>
    <div class="container">
        <h1 class="ell">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, quibusdam itaque cum non, delectus totam eius nulla quos nisi molestiae nesciunt. Eligendi nostrum excepturi sapiente nihil nulla, rem laboriosam. Placeat!</h1>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi aliquid maiores quae itaque? Saepe aspernatur dolorem ea? Modi veniam at eum quia inventore nihil praesentium libero error ratione animi. Vel.</p>

fe37_fixbar.html에 추가만 하겠다

위 사진처럼 h1의 항목은 글자가 ...으로 생략된다.

profile
주세환
이전 포스트

HTML 5 + CSS + 자바스크립트 Day02

다음 포스트

HTML 5 + CSS + 자바스크립트 Day04

0개의 댓글