* 박스 형태
모든 html 요소는 박스형태
마우스 우클릭 -> 검사 를 누르면 박스 형태를 보여주는 다이어그램 나옴
* border 간단
border: 5px solid red; - 5px의 빨간 테두리를 입힘
브라우저가 각 요소별로 여백을 설정해둬서 여백 O
* padding & margin
padding - 내용이랑 테두리 사이에 여유를 줌
* padding 설정 방법 (margin도 마찬가지)
- 일반
padding-top: 50px;
padding-right: 65px;
padding-bottom: 20px;
padding-left: 80px;
- 시계방향
padding: 50px 65px 20px 80px;
- 위아래/양 옆 다 똑같
padding: 50px;
- 위아래 50px / 양 옆 25px로 각각 같음
padding: 50px 25px;
박스의 가로와 세로를 정할 수 있음
width & height
* margin 도 padding과 똑같음
가운데 정렬을 할 때
margin-left: auto;
margin-right: auto;
만약, 위아래 margin은 0px에 가운데 정렬을 하고 싶으면,
margin: 0 auto;
요소 - content, padding, border
padding - 내용과 요소 사이의 여유공간
margin - 요소 주위의 여백, 테두리 밖의 공간
* width & height
HTML 요소의 가로&세로 설정 방법 (텍스트 이미지 둘 다 가능)
width: 500px;
height: 500px;
min-width: 500px; - 최소, 창을 늘리고 줄일 때 요소가 창에 조절되어 맞춰서 나오는데 줄이다보면 어느 순간부터 요소가 잘림 -> 그 이유는 최소 500px인데 창이 더 작아져버려서.
max-width: 500px; - 최대, 창을 늘리다보면 어느 순간부터 요소 크기 변화X -> 최대 500px라서 요소보다 창이 더 커지면 더이상 변화X.
min-height: 500px; - 최소 길이 때문에 칸보다 내용이 부족하면 빈공간이 생김, 글을 추가하면 맞춰서 쭉 늘어남 (최소만 정해져있고 최대가 안정해져있어서)
max-height: 500px; - 최대 길이가 정해져있어서 내용이 오버되면 넘침, overflow 로 해결가능!
* overflow
overflow: hidden; - 넘친 내용 숨겨버림, 안보임
overflow- visible; - 넘친 내용 걍 보임, 기본값
overflow- scroll; - 스크롤바가 생겨서 숨겨진 내용 볼 수 있음, 내용 안넘쳐도 스크롤바 O
overflow- auto; - scroll이랑 비슷, but! 내용 적으면 스크롤바 없고 내용 넘치면 스크롤바 생김, 주로 사용
* border
* 테두리 그리는 방법
- 한 줄에 끝내기
border: 테두리두께 선의종류 선색깔;
선의 종류 - solid(기본) dotted(점선) dashed(파선)
ex) border: 2px solid red;
- 명확하게 나누기 ( 잘 안씀 )
border-style: solid;
border-color: red;
border-width: 2px;
- 다채로운 테두리 (테두리 각각 다르게 가능)
border-top: 3px dotted blue;
border-bottom: 2px dashed red;
border-left: 5px solid green:
- 테두리 없애기
어떤 요소들(ex. input 태그)는 기본적으로 테두리가 있음, 이걸 없애려면,
1. border: none;
2. border: 0;
1. 그랜드 부다페스트 호텔
* {
box-sizing: border-box;
}
.container {
width: 500px;
height: 500px;
}
.info {
height: 220px;
border: 3px solid #B72920;
overflow: auto;
padding: 15px;
}
img {
width: 100%;
display: block;
}
h1 {
margin: 0;
margin-bottom: 10px;
}
p {
margin: 0;
}css의 .info 이 부분만 채워주면 된다!
실행결과 https://bakey-api.codeit.kr/web/enrollments/60e42be122ff6d2ddf76e1b1/lessons/572/index.html
Overflow
Grand Budapest Hotel Wes Anderson heads to Europe for the first time with this Indian Paintbrush production starring Saoirse Ronan, Ralph Fiennes, Bill Murray, and Jude Law. Gustav H., the famous concierge at a legendary hotel situated in the Alps during t
bakey-api.codeit.kr
* border-radius
border-radius: 50px; - 모서리 둥글, 클수록 둥글
개별 설정도 가능
border: 1px solid green;
border-top-left-radius: 50px;
border-top-right-radius: 5px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 20px;
* background-color
* 배경색 설정하기
background-color: 색깔;
페이지 배경색은 body 태그에서 background-color 속성을 입혀주면 됨
background-color:
transparent; 는 투명하게 만듬, 기본값
* box-shadow
그림자는
box-shadow: 오른쪽그림자 아래쪽그림자 흐림정도 그림자크기 그림자색깔;
오른쪽그림자 - 클수록 오른쪽으로, -면 왼쪽
아래쪽그림자 - 클수록 아래쪽으로, -면 위쪽
흐림정도 - 클수록 흐려짐
그림자크기 - 클수록 그림자 퍼짐정도 up
bow-shadow: none; - 기본값
*box-sizing
box-sizing 을 쓰면 padding, border 이 가로&세로 길이에 포함되서 나옴!
즉, width & height 가 설정값대로 딱 맞춰짐 (쓰고 시작하는 걸 추천)
width: 300px;
height: 200px;
padding: 35px;
border: 5px solid red;
box-sizing: border-box;
box-sizing: content-box; - 기본값
* 로그인 페이지
↓index.html
<!DOCTYPE html>
<html>
<head>
<title>로그인</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>
<body>
<div class="login-form">
<form>
<input type="text" name="email" class="text-field" placeholder="아이디">
<input type="password" name="password" class="text-field" placeholder="비밀번호">
<input type="submit" value="로그인" class="submit-btn">
</form>
<div class="links">
<a href="#">비밀번호를 잊어버리셨나요?</a>
</div>
</div>
</body>
</html>s
↓styles.css
* {
box-sizing: border-box;
font-family: 'Noto Sans KR', sans-serif;
border-radius: 5px;
}
body {
margin: 0;
background-color: #1BBC9B;
}
.login-form {
width: 300px;
background-color: #EEEFF1;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
padding: 20px;
}
.text-field {
font-size: 14px;
width: 100%;
border: none;
padding: 10px;
margin-bottom: 30px;
}
.submit-btn {
font-size: 14px;
background-color: #1BBC9B;
color: white;
border: none;
width: 100%;
padding: 10px;
}
.links {
margin-top: 30px;
text-align: center;
}
.links a {
font-size: 12px;
color: #9B9B9B;
}
↓결과! ( https://bakey-api.codeit.kr/web/enrollments/60e42be122ff6d2ddf76e1b1/lessons/621/index.html )
로그인
bakey-api.codeit.kr
* background-image
* 배경에 이미지 넣는 법
background-image: url("../images/beach.jpg");
background-repeat: no-repeat;
no-repeat - 사진이 배경보다 작으면 빈공간이 드러남
repeat - 빈공간에 사진이 반복적으로 나오면서 모든 공간 채워짐
* 반복 X, 꽉 채우기
1. 이미지 크기 맞추기
background-image: url("../images/beach.jpg");
background-repeat: no-repeat;
background-size: 100%(가로) 50px(세로);
but, 창을 줄이고 늘릴 때 사진 찌그러짐.
2.
background-size: cover;
이건 창을 늘려도 꽉채우고 찌그러지지않음
but, 이러면 잘리는 부분 생길수도 있음, 어쩔 수 없는거지만 어디를 자를지 정해야함
3.
background-image: url("../images/beach.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: right bottom;
right - 가로로 잘릴 때 최대한 오른쪽이 보이게, 왼쪽이 잘림
left
center - 가로/세로 잘릴 때 최대한 가운데가 보이게
bottom - 세로로 잘릴 때 최대한 아래가 보이게, 위쪽이 잘림
top
* background-repeat
/* 반복하지 않음 */ background-repeat: no-repeat;
/* 가로 방향으로만 반복 */ background-repeat: repeat-x;
/* 세로 방향으로만 반복 */ background-repeat: repeat-y;
/* 가로와 세로 모두 반복 */ background-repeat: repeat;
/* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 간의 여백으로 배분 */ background-repeat: space;
/* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 확대를 통해 배분 */ background-repeat: round;
* background-size
/* 원래 이미지 사이즈대로 출력 */ background-size: auto;
/* 화면을 꽉 채우면서, 사진 비율을 유지 */ background-size: cover;
/* 가로, 세로 중 먼저 채워지는 쪽에 맞추어서 출력 */ background-size: contain;
/* 픽셀값 지정 (가로: 30px, 세로: 50px로 설정) */ background-size: 30px 50px;
/* 퍼센트값 지정 (가로: 부모 요소 width의 60%, 세로: 부모 요소 height의 70%로 설정) */ background-size: 60% 70%;
* background-position
/* 단어로 지정해주기 (가로: left, center, right, 세로: top, center, bottom) */
/* 아래와 같은 총 9개의 조합이 가능 */
background-position: left top;
background-position: left center;
background-position: left bottom;
background-position: right top;
background-position: right center;
background-position: right bottom;
background-position: center top;
background-position: center center;
background-position: center bottom;
/* 퍼센트로 지정해주기 (가로: 전체 width의 25% 지점, 세로: 전체 height의 75% 지점 ) */ background-position: 25% 75%;
/* 픽셀로 지정하기 (가로: 가장 왼쪽 가장자리에서부터 오른쪽으로 100px 이동한 지점, 세로: 가장 상단 가장자리에서 아래로 200px 이동한 지점) */ background-position: 100px 200px;
*썸머 뮤직 페스티벌 (SMF)
↓index.html
<!DOCTYPE html>
<html>
<head>
<title>Summer Music Festival</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>
<body>
<div class="hero-header">
<div id="navbar">
<a href="#" id="logo">SMF</a>
</div>
<div class="helper"></div><div class="info">
<h1>10th Summer Music Festival</h1>
<h2>20 - 21 August, 2017</h2>
<a href="#" class="learn-more">Learn More</a>
</div>
</div>
</body>
</html>
↓css
body {
margin: 0;
font-family: 'Noto Sans KR', sans-serif;
}
.hero-header {
position: relative;
height: 684px;
background-image: url('../images/hero_image.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
/* 세로 가운데 정렬을 위해서 */
.hero-header .helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#navbar {
padding: 10px 20px;
position: absolute;
top: 0;
}
#logo {
color: white;
font-size: 28px;
text-decoration: none;
font-weight: bold;
}
.info {
color: white;
text-align: center;
display: inline-block;
width: 100%;
vertical-align: middle;
}
.info h1 {
margin-top: 0;
margin-bottom: 10px;
font-size: 40px;
}
.info h2 {
margin-top: 0;
margin-bottom: 50px;
font-size: 20px;
font-weight: normal;
}
.learn-more {
font-size: 18px;
color: white;
text-decoration: none;
border: 2px solid white;
padding: 8px 40px;
}
↓실행 결과! ( https://bakey-api.codeit.kr/web/enrollments/60e42be122ff6d2ddf76e1b1/lessons/617/index.html )
Summer Music Festival
bakey-api.codeit.kr
