배경 레이아웃에 버튼 하나, 박스 하나를 이용한 "카페모카 사주세요" 레이아웃을 만들어 보았다.
공부한 거 정리
- background-image: url();
- 배경 여러 개 겹치고 싶을 때 원하는 만큼
url()을 더 써준다.
- background-size:
- contain - 배경 짤리면 no no
- cover - 배경 짤려도 상관 없다, 빈공간 없이 배경으로 꽉 채워줘
- background-repeat
- no-repeat: 배경 no 반복
- background-position
- 배경 이미지 위치 조정
- background-attachment
- 스크롤 시 배경 위치 조정 가능
- filter()
- 배경에 필터 (보정) 입히기
- 예) filter: brightness(70%) -> 배경 밝기 조절
- margin: 0px;
- body 태그에는 기본 margin이 있어서 없애주려고 사용
- 버튼 좌표도 속성 이용해서 배치 가능
-
position: relative 먼저 부여하고
- 좌표 속성 (left, right, top, bottom ...) 부여해주기
-
position 속성도 공중에 뜬다.
-
relative: 내 원래 위치 기준 이동해줘
-
static: 좌표 이동 x
-
fixed: 현재 화면 (viewport)이 기준
-
absolutre: 내 부모 태그가 기준
- 정확히는 position: relative 가진 부모가 기준
position: absolute 준 요소 가운데 정렬하려면?
- left: 0;
- right: 0;
- margin: auto;
- width: 적절하게
- z-index
- 누가 맨 앞에 올 것인지 조정해주고 싶을 때 사용
- z-index가 높을 수록 앞에 온다.
- max-width
- width %의 문제는 PC 사이즈에서 너무 크기 때문에 width랑 같이 쓸 수 없다.
- box-sizing
- 박스의 폭을 border까지 설정해주고 싶을 때 쓰는 속성
- box-sizing: border-box;
- 박스의 폭은 border까지 포함된다.- box-sizing: content-box;
- 박스의 폭은 padding 안쪽이다.
- box-sizing: content-box;
- 참고: content < padding < border < margin
- css 파일 작성 시 기본으로 쓰면 좋을 속성들
div {
box-sizing: border-box;
}
body {
margin: 0;
}13. CSS normalize - 같은 코드를 짜도 다른 브라우저에선 이상하게 보일 수 있기 때문에 - 브라우저간 통일된 스타일을 주기 위해 특정 스타일을 맨 위에 적고 css 코드를 짜는 경우도 있다.
- https://github.com/necolas/normalize.css/blob/master/normalize.css
- 스타일 붙여 넣으면 브라우저간 다르게 보이는 문제들을 미리 해결할 수 있다.
전체 코드
<!-- layout2.html -->
<!DOCTYPE html>
<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>
<link rel="stylesheet" href="./layout2.css">
</head>
<body style="margin: 0px;"> <!-- margin: 0px;로 주면 body 태그에 있는 기본 마진을 없애줌! -->
<div class="main-background">
<h4 class="main-title">내 카페모카 사줘!</h4>
<button class="main-button">Buy now</button>
</div>
<div class="box">
<h4 class="box-title">우리 집 카페모카의 효능</h4>
<p class="box-text">
どうでもいいような 夜だけど
도데모 이이 요나 요루다케도
어찌 되든 좋은 밤이지만
響めき 煌めきと君も
도요메키 키라메키토 키미모
떠들썩함, 반짝임과 함께 너도
まだ止まった 刻む針も
마다 토맛타 키자무 하리모
아직도 멈춰 있는, 새겨놓았던 바늘도
</p>
</div>
</body>
</html>// layout2.css
.main-background {
width: 100%;
height: 500px;
background-image: url(./img/cafemocha.jpg);
background-size: cover;
background-repeat: no-repeat; /* no 반복 */
background-position: center; /* 배경 위치 조정 */
background-attachment: fixed; /* 스크롤 시 배경 위치 조정 가능 */
filter: brightness(70%); /* 박스에 보정 입히기 */
padding: 1px;
}
.main-title {
color: red;
font-size: 40px;
margin-top: 200px;
}
.main-button {
padding: 15px;
font-size: 20px;
background: white;
border: none;
border-radius: 5px;
position: relative;
left: 100px;
}
.box {
width: 500px;
margin: auto;
padding: 20px;
text-align: center;
background-color: #eee;
position: relative;
top: -40px;
}
.box .box-title {
text-align: center;
font-size: 16pt;
}
.box .box-text {
font-size: 12pt;
margin-left: 30px;
margin-right: 30px;
}
데이터로 세상을 쓰고 읽고 싶은 헤븐리뷰입니다.