2023.03.29 CSS의 배경, 박스모델, 박스사이징, 디스플레이,폼

728x90

1. CSS의 배경

background-color
background-image
background-repeat
background-position
background-attachment
background-size
background

2. CSS의 박스모델(Box Model)

내용(content)
패딩(padding)
테두리(border)
마진(margin)

3. CSS의 박스사이징(Box-sizing)

4. CSS의 디스플레이

5. CSS의 폼

1. CSS의 배경

1-1.background-color

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>css 배경 1</title>
    <style>
        body { background-color: deepskyblue;}
        div { background-color: #fff; width: 60%; padding: 20px; border: 3px solid red;}
    </style>
</head>
<body>
    <h2>css 배경1</h2>
    <div>
        <h2>배경 적용하기</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae impedit provident illo mollitia repellendus fuga porro exercitationem magni! Totam consequuntur laborum natus quidem eligendi iure. Illum reprehenderit assumenda nesciunt sunt!</p>
    </div>
</body>

1-2.background-image

HTML 요소의 배경으로 나타날 배경 이미지를 설정
배경 이미지는 기본 설정으로 반복되어 나타난다.

- 사용법

background-image url('이미지파일 위치')

1-3.background-repeat

배경 이미지를 수평이나 수직 방향으로 반복하도록 설정하는것(repeat-x, repeat-y, no-repeat)

<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>css배경2</title>
    <style>
        body {
            background-image: url(./bus.png);
            /*repeat*//*계속 반복*/
            /*background-repeat: repeat-x;*//*X축만 반복*/
            /*background-repeat: repeat-y;*//*Y축만 반복*/
            background-repeat: no-repeat;/*반복 안함*/
            
        }
    </style>
</head>
<body>
    <h2>css 배경 2</h2>

</body>

1-4.background-position

반복되지 않는 배경 이미지의 상대 위치를 설정하는것
%나 px을 사용해서 상대위치를 직접 설정할 수 있다.
상대 위치를 결정하는 기준은 왼쪽 상단(left top)

        left top            center top         right top
        left center         center             right center
        left bottom         center bottom      right bottom

- 사용법

background-position: center bottom
background-position: 가로위치값 세로위치값;
예) background-position: 10% 100px

1-5.background-attachment

위치가 설정된 배경 이미지를 원하는 위치에 고정 할 수 있다.
고정된 배경 이미지는 스크롤과 무관하게 화면의 위치에서 이동되지 않음
속성: fixed, scroll

<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>css 배경 3</title>
    <style>
        body {
            background-image: url(bus.png);
            background-repeat: no-repeat;
            background-position: right bottom;
            background-attachment: fixed;
        }
        div {
            width: 60%;
            height: 300px;
            border: 3px dotted deeppink;
            padding: 10px;
            margin-bottom: 20px;
            background-image: url(bus.png);
            background-repeat: no-repeat;
        }

        .bg1 { background-position: center bottom;}
        .bg2 { background-position: right bottom;}
        .bg3 { background-position: 20% 100px;}
    </style>
</head>
<body>
    <h2>css 배경 3</h2>
    <div class="bg1">
        <h2>background-position 1</h2>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta esse sapiente debitis dolorem deleniti? Aperiam quaerat dolore odio enim nam odit dolorem esse atque, natus ea reprehenderit eos ipsa iusto.</p>
    </div>
    <div class="bg2">
        <h2>background-position 2</h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut at repellendus, fuga optio necessitatibus ea aspernatur sapiente ut doloribus, voluptatum voluptatem inventore nobis commodi et unde recusandae provident consequuntur similique!</p>
    </div>
    <div class="bg3">
        <h2>background-position 3</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa tempora suscipit minima similique eius odit totam quae molestiae? Delectus doloremque repellat cum nulla, recusandae sit deleniti veritatis ipsam possimus fugit.</p>
    </div>
</body>

1-6.background-size

배경 이미지 크기를 설정
px, %, contain, cover
- contain
  - 배경 이미지의 가로, 세로 모두 요소보다 작다는 조건하에 가능한 설정
  - 가로, 세로 비율은 유지
  - 배경 이미지의 크기는 요소의 크기보다 항상 작거나 같음
- cover ✔자주 쓰임
  - 배경 이미지의 가로, 세로 길이 모두 요소보다 크다는 조건하에 가능한설정
  - 가로, 세로 비율은 유지
  - 배경 이미지의 크기는 요소의 크기보다 항상 크거나 같음

<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>css 배경 4</title>
    <style>
        div {
            background-image: url(bus.png);
            background-repeat: no-repeat;
            width: 150px;
            height: 150px;
            border: 2px solid red;
            margin-bottom: 20px;
        }
        .background1 { background-size: 50px 100px;}
        .background2 { background-size: 500px 500px; background-position: center;}
        .background3 { background-size: contain;}
        .background4 { 
            width: 100px;
            height: 70px;
            background-size: cover;
            background-position: bottom center;
        }
    </style>
</head>
<body>
    <h2>css 배경 4</h2>
    <div class="background1"></div>
    <div class="background2"></div>
    <div class="background3"></div>
    <div class="background4"></div>
</body>

1-7.background

배경 속성을 한꺼번에 적용 가능해진다.

-사용법

background 파일위치 반복여부 위치 사이즈 .....

<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>css 배경 5</title>
    <style>
        html {
            background: url(./apple.jpg) no-repeat center fixed ;
            background-size: cover;
        }
    </style>
</head>
<body>
    <h2>css 배경 5</h2>
</body>

2. CSS의 박스모델(Box Model)

모든 HTML 요소는 박스 모양으로 구성 되어 있다.
박스 모델은 HTML 요소를 내용, 패딩, 테두리, 마진으로 구분함

2-1.내용(content)

- 텍스트나 이미지가 들어있는 박스의 실질적인 내용부분

2-2.패딩(padding)

내용과 테두리 사이의 간격
padding-top, padding-right, padding-bottom, padding-left
padding: 위, 오른쪽, 아래, 왼쪽순으로 설정 해야 합니다.

- 사용법

CSS

    div#padding { padding: 20px 50px 30px 10px;}
        /*위 20px, 오른쪽 50px, 아래 30px, 왼쪽 10px*/
    div#padding { padding: 20px 50px 30px ;}
        /*위 20px, 오른쪽  왼쪽 50px, 아래 30px*/
    div#padding { padding: 20px 50px ;}
        /*위 아래 20px , 오른쪽  왼쪽 50px*/
    div#padding { padding: 20px ;}
        /*위, 오른쪽, 아래, 왼쪽, 20px*/

    HTML

<div id="padding"> 안녕하세요. </div>

<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>패딩</title>
    <style>
        div {
            width: 200px;
            height: auto;
            background-color: deepskyblue;
            margin: 20px;
            color: #fff;
        }

        #padding1 {padding: 10px 30px 20px 40px;}
        /*위10, 오른쪽30, 아래20, 왼쪽40*/
        #padding2 {padding: 20px 30px 40px ;}
        /*위20, 오른쪽 왼쪽30, 아래40*/
        #padding3 {padding: 30px 50px ;}
        /*위 아래 30, 오른쪽 왼쪽 50*/
        
    </style>
</head>
<body>
    <h2>패딩</h2>
    <div id="padding1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis nisi, quasi minus voluptates laboriosam corrupti deleniti consequuntur placeat enim mollitia sunt saepe provident maxime molestiae alias maiores cumque doloremque consectetur?</div>
    <div id="padding2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam omnis ipsum, fugit quibusdam eum accusamus dignissimos, facilis, quisquam eius commodi ab magni! Fuga explicabo quisquam sequi aliquam, accusantium expedita molestias?</div>
    <div id="padding3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto magni id sed temporibus fugit animi autem at distinctio vitae nobis quaerat dolore atque nesciunt nisi voluptatibus, sint eaque veniam tempore.</div>
</body>

2-3.테두리(border)

내용(content)과 패딩(padding) 주변을 감싸는 테두리
border-style(테두리모양), border-color(테두리 색상), border-width(테두리 두께), border(한꺼번에 설정)

<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>테두리</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            margin: 15px;
            border-width: 5px;
            border-color: black;
        }
        #border1 {border-style: solid;}
        #border2 {border-style: dotted;}
        #border3 {border-style: dashed;}
        #border4 {border-style: double;}
        #border5 {
            border-color: gold;
            border-top-style: solid;
            border-right-style: dotted;
            border-bottom-style: dashed;
            border-left-style: double;
        }
        #border6 {border: 3px dotted rebeccapurple;}
    </style>
</head>
<body>
    <h2>테두리</h2>
    <div id="border1"></div>
    <div id="border2"></div>
    <div id="border3"></div>
    <div id="border4"></div>
    <div id="border5"></div>
    <div id="border6"></div>
</body>

2-.4마진(margin)

테두리(border)와 이웃하는 요소들 사이의 간격
마진은 눈에 보이지 않음
세로 겹침 현상이 나타남

✔ 세로 겹침 현상
-세로로 나열된 두 박스의 간격은 두 마진의 합이 아니라 둘 중 큰 값을 선택하는 현상

<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>마진</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: deepskyblue;
        }
        #margin1 { margin: 30px 50px 30px 50px ;}
        #margin2 { margin: 30px 50px ;}
        #margin3 { margin: 50px ;}
        #margin4 { margin: 30px 5px 10px ;}
        #margin5 { margin: 30px ;}
    </style>
</head>
<body>
    <h2>마진</h2>

    <div id="margin1"></div>
    <div id="margin2"></div>
    <div id="margin3"></div>
    <div id="margin4"></div>
    <div id="margin5"></div>
</body>

3. CSS의 박스사이징(Box-sizing)

width, height 값에 padding, border영역은 포함되지 않음
만약 width가 100%로 설정되는 경우 padding이나 border속성을 추가하면 안됨
box-sizing 속성값을 border-box로 설정하면 width와 height값에 padding과 border를 포함

<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>박스사이징</title>
    <style>
        div {

            width: 300px;
            height: 150px;
            margin: 10px;
            padding: 30px;
            border: 3px solid red;
        }
        #boxsizing1 {box-sizing: content-box;}
        #boxsizing2 {box-sizing: border-box;}
    </style>
</head>
<body>
    <h2>박스사이징</h2>
    <div id="boxsizing1">박스사이징 = content box</div>
    <div id="boxsizing2">박스사이징 = border box</div>
</body>

4. css 디스플레이

웹 페이지의 레이아웃을 결정하는 속성
block, inline, inline-block, none

✔ visibility: hidden; -> visibility: visible;

<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>디스플레이</title>
    <style>
        div{
            background-color: deepskyblue;
            border: 3px solid red;
            margin-bottom: 30px;
        }
        p#none {display: none;}
        p#hidden { visibility: hidden;}
    </style>
</head>
<body>
    <h2>디스플레이</h2>
    <div>
        <p>display 속성값을 none으로 설정</p>
        <p id="none">display 속성값을 none으로 설정 </p>
    </div>
    <div>
        <p>visibility 속성값을 hidden으로 설정</p>
        <p id="hidden">visibility 속성값을 hidden으로 설정 </p>
    </div>
</body>

5. CSS의 폼

폼 요소의 스타일 설정

<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>폼</title>
    <style>
        .input {
            box-sizing: border-box;
            width: 100%;
            background-color: gold;
            padding: 10px 20px;
            margin: 5px 0;
        }
        /*마우스 커서를 가져다 놓았을때 변함*/
        input[type="text"]{
            border-radius: 15px;
        }
        input[type="text"]:focus {
            background-color: greenyellow;
            border: 3px dotted black;
        }
        input[type="password"]{
            border: none;
            background-color: white;
            border-bottom: 3px solid black;
        }
        input[type="password"]:focus {
            
            border-bottom: 3px dotted black;
        }
        /***********************************/
        select {
            box-sizing: border-box;
            width: 100%;
            padding: 10px;
            background-color: pink;
            border:2px solid deeppink;
            margin: 5px 0 ;
        }
        textarea#content {
            box-sizing: border-box;
            width: 100%;
            height: 200px;
            resize: none;
            font-size: 20px;

        }
        button.btn {
            width: 150px;
            background-color: seagreen;
            color: aliceblue;
            padding: 12px 25px;
            cursor: pointer;
            border: none;
        }
        p.center {text-align: center;}

    </style>
</head>
<body>
    <h2>폼</h2>
    <form action="#">
        <p>아이디: <input type="text" id="userid" class="input" maxlength="20" placeholder="아이디를 입력하세요."></p>
        <p>비밀번호: <input type="password" id="userpw" class="input" maxlength="20" placeholder="비밀번호를 입력하세요."></p>
        <p>직업: 
            <select>
                <option value="프로그래머">프로그래머</option>
                <option value="디자이너">디자이너</option>
                <option value="학생">학생</option>
                <option value="유튜버">유튜버</option>
                <option value="공무원">공무원</option>
            </select>
        </p>
        <p><textarea id="content"></textarea></p>
        <p class="center"><button class="btn">회원가입</button></p>
    </form>
</body>

728x90

'개발 > HTML,CSS' 카테고리의 다른 글

2023.03.30 CSS의 레이아웃, 플렉스 (0)	2023.03.30
2023.03.29 CSS의 포지션, Z-index, float, clear (3)	2023.03.29
2023.03.28 CSS의 컬러, 텍스트 (1)	2023.03.28
2023.03.28 CSS의 적용방법, 선택자 (0)	2023.03.28
2023.03.27 HTML 디스플레이 (0)	2023.03.27

SangDal

2023.03.29 CSS의 배경, 박스모델, 박스사이징, 디스플레이,폼

목차

1. CSS의 배경

2. CSS의 박스모델(Box Model)

3. CSS의 박스사이징(Box-sizing)

4. CSS의 디스플레이

5. CSS의 폼

1. CSS의 배경

1-1.background-color

1-2.background-image

- 사용법

1-3.background-repeat

1-4.background-position

- 사용법

1-5.background-attachment

1-6.background-size

1-7.background

-사용법

2. CSS의 박스모델(Box Model)

2-1.내용(content)

2-2.패딩(padding)

- 사용법

2-3.테두리(border)

2-.4마진(margin)

3. CSS의 박스사이징(Box-sizing)

4. css 디스플레이

5. CSS의 폼

'개발 > HTML,CSS' 카테고리의 다른 글

댓글

티스토리툴바

2023.03.29 CSS의 배경, 박스모델, 박스사이징, 디스플레이,폼

목차

1. CSS의 배경

2. CSS의 박스모델(Box Model)

3. CSS의 박스사이징(Box-sizing)

4. CSS의 디스플레이

5. CSS의 폼

1. CSS의 배경

1-1.background-color

1-2.background-image

- 사용법

1-3.background-repeat

1-4.background-position

- 사용법

1-5.background-attachment

1-6.background-size

1-7.background

-사용법

2. CSS의 박스모델(Box Model)

2-1.내용(content)

2-2.패딩(padding)

- 사용법

2-3.테두리(border)

2-.4마진(margin)

3. CSS의 박스사이징(Box-sizing)

4. css 디스플레이

5. CSS의 폼

'개발 > HTML,CSS' 카테고리의 다른 글

관련글

댓글

티스토리툴바