8. Html Css 폼 꾸미기 (패딩, 테두리, 마진, 박스사이징, 디스플레이)

티스토리 뷰

Web

8. Html Css 폼 꾸미기 (패딩, 테두리, 마진, 박스사이징, 디스플레이)

muru_ 2024. 4. 11. 18:14

1. 패딩

- 내용과 테두리 사이의 간격 또는 여백
- padding-top, padding-right, padding-bottom, padding-left
- padding: 위 오른쪽 아래 왼쪽 순으로 설정

( HTML )
    <div id='padding'> 안녕하세요</div>

( CSS )
    div#padding {padding: 20px 50px 30px 10px;}
위    오 아래 왼
    div#padding {padding: 20px 50px 10px;}
위    좌우    아
    div#padding {padding: 20px 50px ;}
위아래 좌우
    div#padding {padding: 20px;}
사방

<html lang="en">
<head>
    <title>패딩</title>
    <style>
        div {
            width: 200px;
            height: auto;
            background-color: darkgreen;
            margin: 20px;
            color: aliceblue;
        }
        #padding1 {padding: 10px 30px 20px 40px;}
        #padding2 {padding: 30px 20px 40px;}
        #padding3 {padding: 10px 40px;}
    </style>
</head>
<body>
    <h2>패딩</h2>
    <div id="padding1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde iusto dolorem placeat error sapiente molestias culpa velit natus amet, officia earum, ipsum inventore voluptas obcaecati eum illo delectus! Odit, quod.</div>
    <div id="padding2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde iusto dolorem placeat error sapiente molestias culpa velit natus amet, officia earum, ipsum inventore voluptas obcaecati eum illo delectus! Odit, quod.</div>
    <div id="padding3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde iusto dolorem placeat error sapiente molestias culpa velit natus amet, officia earum, ipsum inventore voluptas obcaecati eum illo delectus! Odit, quod.</div>

</body>
</html>

2. 테두리

- 내용(content)과 안쪽여백(padding) 주변을 감싸는 프레임
- border-style(테두리 모양), border-color(테두리 색상), border-width(테두리 두께)
- border로 한꺼번에 설정

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

3. 마진

- 테두리(border)와 이웃하는 요소들 사이의 간격
- 마진은 눈에 보이지 않음
새로 겹침 현상 일어남(세로로 나열된 두 밗의 간격은 마진의 합이 아니라 둘 중 큰 값을 선택하는 현상)

<html lang="en">
<head>
    <title>마진</title>
    <style>
        * {padding: 0; margin: 0;}
        div {
            width: 200px;
            height: 100px;
            background-color: deeppink;
        }
        #margin1 {margin: 30px 50px 30px 50px}
        #margin2 {margin: 30px 50px}
        #margin3 {margin: 50px;}
        #margin4 {margin: 30px 5px 10px;}
        #margin5 {margin: 30px auto;}
    </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>
</html>

4. 박스 사이징

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

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

5. 디스플레이

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

- visibility: hidden <-> visible;

<html lang="en">
<head>
    <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">dispaly 속성값을 none으로 설정</p>
    </div>
    <div>
        <p>visibility 속성값을 hidden으로 설정</p>
        <p id="hidden">visibility 속성값을 hidden으로 설정</p>
    </div>
</body>
</html>

6. 폼

- w3schools, mdn 참고

( 연습.css )

body {
    background-image: url(./rock.jpg);
    background-color: lightblue;
    text-align: center;
}

h2 {
    color: rgb(255, 255, 255);
    text-align: center;
    font-weight: bold;
    font-size: 30px;
}

p {
    font-family : Verdana;
    font-size: 20px;
}

div {
    margin: auto;
    color: black;
    width: 90%;
    background-color: rgb(246, 210, 155); width: 300px; padding: 20px; border: 10px double rgb(0, 0, 0);
}

.sunflower-medium {
    font-family: "Sunflower", sans-serif;
    font-weight: 500;
    font-style: normal;
    }

.input {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 20px;
    margin: 5px 0;
}
input[type='text']{
    border-radius: 15px; /* 테두리 둥글게 */
}
input[type='text']:focus {   /* 커서 눌렀을 때 효과 */
    background-color: rgb(236, 249, 163);
    border: 3px dotted black
}
input[type='password'] {
    border: none;
    background-color: wheat;
    border-bottom: 3px solid black;
}
input[type='password']:focus {
    border-bottom: 3px dotted brown;
}

select{
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    margin: 5px;
    background-color: burlywood;
    border: 2px dotted red;
}

#content {
    box-sizing: border-box;
    width: 100%;
    resize: none; /* 못 움직이게 */
    height: 100px;
    font-size: 20px
}

button{
    width: 150px;
    background-color: rgb(193, 160, 15);
    color: white;
    padding: 12px 20px;
    cursor: pointer; /* 손가락 모양으로 바뀜 */
}

p.center {text-align: center}

( Html 외부스타일로 연습.css 링크 걸기 )

<html lang="en">
<head>
    <title>폼</title>
    <link rel="stylesheet" href="./연습.css">
    <link href="https://fonts.googleapis.com/css2?family=Sunflower:wght@300;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <h2>폼</h2>
    <div id="border">
    <form action="#">
        <p class="sunflower-medium">아이디: <input type="text" id="userid" class="input" maxlength="20" placeholder="아이디를 입력하세요"></p>
        <p class="sunflower-medium">비밀번호: <input type="password" id="userpw" class="input" maxlength="20" placeholder="비밀번호를 입력하세요"></p>
        <p class="sunflower-medium">직업:
            <select name="job" id="job">
                <option value="프로그래머">프로그래머</option>
                <option value="의사">의사</option>
                <option value="법조인">법조인</option>
                <option value="학생">학생</option>
                <option value="유튜버">유튜버</option>
            </select>
        </p>
        <p class="sunflower-medium" ><textarea name="content" id="content"></textarea></p>
        <p class="sunflower-medium"><button class="btn">회원가입</button></p>
    </div>
    </form>
</body>
</html>

'Web' 카테고리의 다른 글

10. Html Css 레이아웃 (z-index, float, clear, n단 레이아웃) (1)	2024.04.12
9. Html Css 위치 지정방식 (0)	2024.04.11
7. Html Css 배경 (0)	2024.04.11
6. Html Css 텍스트 (1)	2024.04.11
5. Html Css 선택자 (0)	2024.04.11

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/04 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

글 보관함

무루무루 개발일지

티스토리 뷰