미새문지

Front End. Day07 CSS(4) 본문

웹 프론트엔드

Front End. Day07 CSS(4)

문미새 2022. 5. 2. 14:15
728x90

주에 두번이라 7일차인데 벌써 4주차네요 시간도 너무 빨리 가는거 같아 마음만 급해집니다.

 

 

박스사이징(box-sizing)

 

박스사이징은 박스의 크기를 어떤 기준으로 계산할지 정하는 속성으로 높이(height)와 길이(width)를 부여합니다.

이 높이와 길이에는 패딩(padding)이나 보더(border)영역은 포함하지 않습니다.

 

 

< 박스사이징 종류 >

box-sizing:content-box

 - 기존의 계산법이며, width와 height를 포함하지 않는 박스사이징입니다.

box-sizing:border-box:

 - width와 height에 padding, border를 포함하는 박스사이징입니다.

 

만약 길이(width)가 100%로 설정된 경우, padding이나 border속성을 추가할 수 없기 때문에 여기에 padding을 주려면 border-box를 사용해 포함한 길이가 100%가 되도록 해야 합니다.

 

 

박스사이징 예시)

<html lang="en">
<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;
            border: 10px solid red;
            margin: 10px;
            padding: 30px;
        }
        .bs1{box-sizing: content-box;}
        .bs2{box-sizing: border-box; width: 380px;}
    </style>
</head>
<body>
    <h2>박스사이징</h2>
    <div class="bs1"></div>
    <div class="bs2"></div>
</body>
</html>

길이 300픽셀, 높이 150픽셀 테두리 10픽셀에 빨간색 마진 10픽셀 패딩 30픽셀을 주어 설정했습니다

여기에 1번 박스는 길이와 높이를 포함하지않는 content-box로 설정하였고

2번 박스는 border-box로 설정하여 길이, 높이에 패딩, 테두리를 포함하였습니다.

 

 

결과)

 

 

둥근 테두리

 

보통 테두리하면 위의 결과처럼 사각형 박스로 작성하는데 css의 태그로 모서리가 둥근 테두리가 가능합니다.

기본 태그는 border-radius로 사용하고 각 테두리를 주는 방법이 다릅니다.

 

전부 따로 줄 때

- x축 border-radius : top-left-x top-right-x bottom-right-x bottom-left-x

                              (상단좌     상단우        하단우            하단좌)

- y축 border-radius : top-left-y top-right-y bottom-right-y bottom-left-y

                              (상단좌     상단우        하단우            하단좌)

 

대각선 위치의 값이 같을 때

- x축 border-radius : top-left-x top-right-x

                            (상단좌      상단우)

- y축 border-radius : top-left-y top-right-y

                            (상단좌      상단우)

 

전부 같을 때

- border-radius : xy(x축y축 동일)

 

 

둥근 테두리 예시)

<html lang="en">
<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: 200px; margin: 20px;}

        .radius1{border: 3px solid red; border-radius: 100px 100px 50px 50px / 30px 30px 100px 100px;}
        .radius2{border: 3px solid blue; border-radius: 100px / 50px;}
        .radius3{border: 3px solid green; border-radius: 100px 20px/ 50px 100px;}
        .radius4{border: 3px solid hotpink; border-radius: 50%;}
    </style>
</head>
<body>
    <h2>둥근 테두리</h2>
    <div class="radius1"></div>
    <div class="radius2"></div>
    <div class="radius3"></div>
    <div class="radius4"></div>
</body>
</html>

테두리를 주는 방법을 달리하여 테두리 변화를 각각 다르게 주었습니다.

1번은 전부 따로주는 방법/ 2, 3번은 대각선 위치값이 같은 방법/ 4번은 전부 같을 때입니다.

 

 

결과)

3번같이 테두리를 특이하게 변형하여 작성하면 개성있게 꾸밀 수 있을 것 같습니다.

 

 

테이블 테두리

 

테이블 셀들 간의 공백을 어떻게 처리할지 결정하는 속성이며,

separate(기본, 셀들을 분리), collapse(셀들 사이를 합쳐서 공백을 없앰) 속성을 사용합니다.

 

 

테이블 테두리 예시)

<html lang="en">
<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>
        table{border: 3px solid red; width: 600px; border-collapse: collapse;}
        th, td{border: 3px solid red; height: 40px;}
    </style>
</head>
<body>
    <h2>테이블 테두리</h2>
    <table>
        <caption>브라우저의 종류</caption>
        <tr>
            <th>개발사</th>
            <th>브라우저 이름</th>
        </tr>
        <tr>
            <td>구글</td>
            <td>크롬</td>
        </tr>
        <tr>
            <td>마이크로소프트</td>
            <td>엣지</td>
        </tr>
        <tr>
            <td>애플</td>
            <td>사파리</td>
        </tr>
        <tr>
            <td>삼성</td>
            <td>삼성브라우저</td>
        </tr>
    </table>
</body>
</html>

스타일로 테이블 속성을 추가하고 테이블 색상을 빨간색으로 적용했습니다.

 

 

결과)

 

 

디스플레이★

 

웹페이지의 레이아웃을 결정하는 중요한 속성 중 하나입니다.

 

 

< 디스플레이 속성 >


block : 새로운 라인에서 시작하고, 해당 라인의 모든 너비를 차지하며, 높이값만큼 한줄을 가득 채우는 속성을 가지고             있습니다.

 - ex) div, header, p, table, h1~h6...

 

inline : 새로운 라인에서 시작되지 않고, 앞의 요소에 이어서 배치합니다.

          width, height 값이 적용되지 않고, 안의 컨텐츠 내용만큼 영역을 차지합니다.

 - ex) a, span, img...

주의사항 : display inline일 경우에 대표적으로 span이나 margin, padding, top-bottom이 적용이 안되는 경우가 있습니다.

 

inline-block : block과 inline속성을 모두 적용합니다.

none : 웹 페이지에서 해당 요소가 나타나지 않고 레이아웃에서 사라집니다.(hidden)

 

 

디스플레이 예시)

<html lang="en">
<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{margin: 20px; border: 1px solid deeppink; border-radius: 20px; padding: 10px;}
        img{border: 1px solid deepskyblue;}
        #block img{display: block;}
        .ib{border: 3px solid blue; width: 100px; height: 100px; margin: 10px;}
        span.ib{display: block;}
        div.ib{display: inline-block;}
    </style>
</head>
<body>
    <h2>디스플레이</h2>
    <div id="inline">
        <img src="./sea1.png" alt="바다"/>
        <img src="./sea2.png" alt="바다"/>
        <img src="./sea3.png" alt="바다"/>
    </div>
    <div id="block">
        <img src="./sea1.png" alt="바다"/>
        <img src="./sea2.png" alt="바다"/>
        <img src="./sea3.png" alt="바다"/>
    </div>
    <hr> <!--직선의 줄을 그어준다--> 
    <span class="ib"></span>
    <span class="ib"></span>
    <span class="ib"></span>
    <hr>
    <div class="ib"></div>
    <div class="ib"></div>
    <div class="ib"></div>
</body>
</html>

사진 3개를 가져와 각 구역 안에 넣고 속성들을 다르게 적용해 분류하였습니다. 테두리 색상은 분홍색으로 설정

그리고 사진과 같이 구별하게 빈 상자도 분류하여 파란색으로 설정하였습니다.

 

 

결과)

 

 

폼

 

회원가입창 같은 폼 요소의 스타일을 설정하는 속성입니다.

 

 

< 폼 입력부분 >

focus : 커서가 깜박이는 동안 포커싱되있을 때의 요소이며 커서에 위치해 선택된 동안의 스타일을 지정합니다.

cursor : 마우스를 올렸을 때 커서 모양을 설정합니다. 

textarea : 여러 줄의 긴 문장을 입력할 수 있는 양식입니다.

 

 

폼 예시)

<html lang="en">
<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%; padding: 10px 20px; background-color: ivory; margin: 5px 0;}
        input[type=text]{border-radius: 15px; color: deeppink;}
        input[type=text]:focus{background-color: lavenderblush; outline: none;}
        input[type=password]{border: none; border-bottom: 3px solid hotpink;}
        input[type=password]:focus{border-bottom: 3px dashed red; outline: none;}
        
        select{width: 100%; box-sizing: border-box; padding: 10px; margin: 5px 0; border: 2px solid yellowgreen; font-weight: bold;}
        textarea{box-sizing: border-box;width: 100%; height: 200px; font-size: 16px; resize: none;}
        input[type=button], input[type=reset], input[type=submit]{
            width: 160px;
            background-color: powderblue;
            color: #fff;
            cursor: pointer;}
    </style>
</head>
<body>
    <form action="">
        <p>아이디: <input type="text" placeholder="아이디를 입력하세요" required/></p>
        <p>비밀번호: <input type="password" placeholder="비밀번호를 입력하세요" required/></p>
        <p>
            직업
            <select>
                <option>교사</option>
                <option>강사</option>
                <option>의사</option>
                <option>판사</option>
                <option>학생</option>
                <option>주부</option>
                <option>사무직</option>
                <option>기타</option>
            </select>
        </p>
        <p>자기소개
            <textarea></textarea>
        </p>
        <p><input type="submit" value="회원가입"/><input type="reset" value="다시작성"/><input type="button" value="돌아가기"/></p>
    </form>
</body>
</html>

회원가입할 때의 폼 양식입니다. 아이디 창에 둥근테두리를 사용해 모서리를 둥글게 바꿨고,

비밀번호 창에는 분홍색 밑줄을 만들어 창을 클릭하면 빨간 점선으로 바뀌게 했습니다.

직업 창에는 평소엔 녹색 테두리였다가 선택을 완료하면 검은색으로 바뀝니다.

 

 

결과)

 

7일차 css는 여기까지입니다.

하나씩 적용하면 따라가며 공부할 수 있는데 폼 태그 같이 전체적인 속성을 한번에 적용하는 방식은 많이 헷갈려서 원하는대로 적용하기가 너무 어려웠습니다. 회원가입창 하나 만드는게 이렇게 어려운지 직접 만들어봐야 깨닫네요

8일차도 css공부를 계속 이어갈 것 같습니다.

728x90
저작자표시 비영리 변경금지

'웹 프론트엔드' 카테고리의 다른 글

프론트엔드 홈페이지 만들기 첫 연습  (1) 2022.06.12
Front End. Day08 CSS(5)  (1) 2022.05.03
Front End. Day06 CSS(3)  (1) 2022.04.26
Front End. Day05 CSS(2)  (1) 2022.04.25
Front End. Day04 CSS  (1) 2022.04.19
'웹 프론트엔드' Related Articles more