속성에 따른 배치

yuzu sim

Jan 15, 2024

CSS(Cascading Style Sheets)

: 폭포수 스타일 시트

배치, 색상 등 디자인해서 문서를 만드는 것

html : 문서를 구조화 하는 것

필요한 내용을 나열하면 디자인 없는 구조가 나옴

스타일은 head라는 태그 안에 작성

key와 value는 : 으로 구분

마무리는 ;

픽셀(px) : 웹 디자인 및 웹 개발에서 길이를 나타내는 단위

디지털 이미지 및 화면에서 가장 작은 단위로 사용

웹 페이지의 너비, 높이, 여백 등을 정의할 때 주로 이용

해상도에 따라서 픽셀의 크기는 동적인 것

1. Block : 가로 배치

2. Inline : 세로 배치

Inline의 속성 : 내용물의 크기만큼 고정 → 변경할 수 없음

💡

브라우저 입장) 모니터 화면의 크기도 확인하고 내부 크기에 대한 연산이 필요해서 block보다 inline이 더 어려움

3. inline-block

: Inline 처럼 나란히 표시 & Block 처럼 내부의 너비, 높이, 여백을 설정

무조건 사이즈를 지정해서 디자인하고 싶을 때 사용

디자인할 때 유의 사항

고유의 값을 가지고 있는지 확인해야 함

고유 값을 전부다 무효화 시키고 디자인 해야 함

모든 태그의 속성을 무효화 시킴

크기를 지정하고 싶을 때는 모두 inline-block

크기를 지정하고 싶은데 끝까지 차지하고 싶을 때 Block

💡

CSS가 어려운 이유

모니터 크기마다 수치가 달라져서 디자인이 깨질 수 있음

예시) Body에 뭘 넣느냐에 따라 크기가 변동 ⇒ 동적

내가 설정한 높이와 달라질 수 있음


<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        div {
            height: 50px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
</body>

</html>

예시) marg은 외부의 크기

magin: 0 auto → 세로는 0, 가로는 자동으로 배치


<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        div {
            height: 50px;
            background-color: red;
						margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
</body>

</html>

margin 값 부여 전

margin 값 부여 후 → magin : 외부에서 공간을 차지하는 것

예시) border는 테두리

padding은 내부의 크기


<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-bottom: 10px;
            display: block;
            border: 10px solid black;
            padding: 10px
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>

</html>

border: 크기 dotted : 점선

border: 크기 solid: 실선

padding 적용 전

padding 적용 후 → 숫자의 위치가 padding의 크기 만큼 이동함

<!DOCTYPE html> <html lang="en"> <head> <style> div { height: 50px; background-color: red; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <style> div { height: 50px; background-color: red; margin-bottom: 10px; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <style> div { width: 200px; height: 200px; background-color: red; margin-bottom: 10px; display: block; border: 10px solid black; padding: 10px } </style> </head> <body> <div>1</div> <div>2</div> <div>3</div> </body> </html>