221004 HTML & CSS #4

김혜진·2022년 10월 4일

CSS frontend html

HTML & CSS

목록 보기

4/5

CSS

박스 모델

블록 레벨 요소와 인라인 요소

블록 레벨 요소 : 화면 전체를 사용하는 태그
인라인 요소 : 자신의 컨텐츠만큼의 크기를 갖는 태그

<html>
    <head>
        <title>타이틀</title>
        <style>
            h1 {
                border-width: 5px;
                border-color: red;
                border-style: solid;
                display: inline;
             }
             a {
                border-width: 5px;
                border-color: red;
                border-style: solid;
                display: block;
             }
        </style>
    </head>
    <body>
        <h1>서시</h1>
        <a href="https://namu.wiki/w/%EC%9C%A4%EB%8F%99%EC%A3%BC">윤동주</a>
        <p></p>
        죽는 날까지 하늘을 우러러
        한 점 부끄럼 없기를,
        잎새에 이는 바람에도
        나는 괴로워했다.
    </body>
</html>

display 속성을 바꿔주면 반대의 속성을 가지게 할 수 있다.

padding

컨텐츠와 박스 사이의 간격

h1, a {
	border: 5px red solid;
	padding: 5px;
	}

margin

박스와 박스 사이의 간격, 박스와 테두리의 간격

h1, a {
	border: 5px red solid;
	padding: 5px;
	margin: 20px;
	}

예제

koogle.html

<!DOCTYPE html>
<html lang="ko">
<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>koogle</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>
        <span>K</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>
    </h1>
    <form method="get" action="https://www.google.com/search">
        <input type="text" name="q"/> 
        <button>Google 검색</button>
        <button>I'm Feeling lucky</button>
    </form>
</body>
</html>

style.css

h1 {
    text-align: center;
    margin: 230px 0 0 0;
    font-size: 90px;
}

h1 span:nth-child(1) {
    color: #4285f4;
}
h1 span:nth-child(2) {
    color: #ea4335;
}
h1 span:nth-child(3) {
    color: #fcc629;
}
h1 span:nth-child(4) {
    color: #4285f4;
}
h1 span:nth-child(5) {
    color: #34a853;
}
h1 span:nth-child(6) {
    color: #ea4335;
}

form {
    text-align: center;
}

input {
    width: 100%;
    max-width: 584px;
    height: 44px;
    border-radius: 24px;
    border: 1px solid #dfe1e5;
    margin: 25px 0;
    padding: 0 15px;
}

input:focus {
    outline: none;
}

button {
    background-color: #f8f9fa;
    min-width: 54px;
    height: 36px;
    border: 1px solid #f8f9fa;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    padding: 0 16px;
}

button:focus {
    outline: 0.5px solid lightskyblue;
}

button:hover {
    border: 0.5px solid #dfe1e5;
}