오늘 실습으로 만들어 볼 화면은 이 여우 화면이다!
20분 안에 만들 수 있을 것이라고 자신만만하게 생각했는데 구현하는 것은 어렵지 않았지만 그 안에서 헷갈리는 개념들이 많았다.
확실히 수업을 듣기 전에는 그냥 시각적으로 바로바로 바뀌는게 기분 좋아서 이유는 따져보지 않고 코드를 맘대로 작성하고, 여기 껴보고 저기 껴보고 하다가 결과만 좋으면 끝냈던 것 같다 ㅎㅎ
이래서 내가 css가 안늘었겠지 .. 항상 결국 결과가 나오기는 해도 내가 원하는 방향대로 한번에 움직일 수 가 없었고 생각한 레이아웃대로 작성하려면 한참 돌아서 가야했다 ㅎ (결국 완성되도 이유를 몰랐음)
수업을 들으면서는 이제 이 코드가 왜 이 타입 선택자에 들어가야 하는지, 이 방법 말고 다른 방법은? 이렇게 생각하게 되고 기초가 단단히 쌓이는 것이 느껴진다!!
우선 내가 작성한 코드는 아래와 같다.
✔️ HTML
<!DOCTYPE html>
<html>
<head>
<title>Animal-Fox</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<img src="./animal07.png" class="fox" />
<img src="./green.png" class="green" />
<div class="discription">
<h1>Fox</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore
quisquam tenetur fugit, ut ducimus illum! Commodi excepturi quo quasi
inventore, ipsum odio suscipit delectus voluptatum unde voluptate
mollitia illum numquam.
</p>
</div>
</div>
</body>
</html>
✔️ CSS
h1 {
margin: 0;
}
body {
background-image: url(./bg.png);
}
.wrapper {
color: white;
}
img {
display: block;
margin: 0 auto;
}
.discription {
background-color: #9c6035;
width: 300px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
font-weight: 200;
border-bottom: 6px solid #46260e;
border-radius: 0 0 10% 10%;
}
섹션 나누기
이젠 css 작성 시 무엇을 해야하는 지 순서를 생각해보기로 했다. (레이아웃!)
내가 진행한 순서는
1. 일단 배경이랑 (여우+땅+텍스트)를 구분지어 두 덩이로 생각했다.
2. (여우+땅+텍스트)를 3개의 섹션으로 나누어 div를 지정했다.
3. 텍스트에서도 또 제목과 텍스트를 div로 감싸주었다.
❗️우선 div로 섹션을 지정하면 텍스트, 배경색을 넣어 크기, 배치등을 시각적으로 확인해보자
💡 하다가 이상한 margin 등 아무리 생각해도 내가 지정 안했는데 이상한게 껴서 내가 원하는 그림을 방해할 때!!
❗️ 검사 페이지에 들어가서 그 부분을 확인해보면 user agent stylesheet에서 임의로 지정해놓은 것을 알 수 있음
❗️css 맨 위로 가서 초기화 먼저 실행!
h1 {
margin: 0; // 이상한 마진 들어가서 맨 위에서 초기화 함
}👀 헷갈렸던 점 1
사진 두개 (여우, 땅)가 위아래로 배치가 안되고 좌우로 배치되어 하나의 가로 선상에 뜸
역시나 검사 페이지로 갔더니 지금 까지 내가 사용한 이미지들은 block 처리가 되어있었는데 이번엔 display:inline이라고 설정된 것을 볼 수 있다.
다시 한번 정리하면
💡display (너비 따로 설정 안했을 때)
- inline : 컨텐츠만큼만 너비 차지
- block : 가로선상 모두를 차지 ( 부모요소의 너비만큼 전부 차지)
이를 해결하기 위해서 나는
display: block;이렇게 img요소를 block으로 바꾸어 한칸 내려줬다.
그랬더니 원하는 대로 밑의 칸으로 내려왔다!
이렇게 되면 img는 block으로 바꿨으므로 가로에 가용공간이 생기는 것이다.
⭐️⭐️⭐️ display: block 가용공간 margin: 0 auto ⭐️⭐️⭐️
이 세개는 꼭 함께 기억하자!
블록요소이므로 가용공간이 생기고 가용 공간이 있으니 마진을 활용하여 가운데 정렬을 시킬 수 있다.
아마 이렇게 block을 이용해서 내리는 방법은 두 이미지의 너비가 같아서 저렇게 딱 맞을 수 있다고 생각한다 ..ㅎㅎ
두 이미지의 너비가 달랐으면 저 둘을 가운데 정렬하면서도 땅 가운데에 여우를 제대로 두려면 padding이나 margin으로 조정했어야 했을 것 같다.
👀 헷갈렸던 점 2
padding 설정을 하면 컨텐츠+padding으로 원하는 너비보다 전체 너비가 크게 나옴
➡️box-sizing: border-box
discription이라는 클래스 안에 포함된 h1, p를 검사로 확인해보면 블록 요소라는 것을 알 수있다.
아까 이야기했듯이 블록요소는 부모 요소의 너비에 맞추므로 이 요소들은 discription 박스에 딱 맞는 크기이다.
그런데 이 안에 내가 디자인상 padding을 주니 컨텐츠+padding 이렇게 되어서 discription 박스보다 튀어나오는 것을 볼 수 있다.
padding: 20px;
box-sizing: border-box;이렇게 하면 내가 지정한 width 안에 padding+컨텐츠가 모두 포함되게 된다.
💡 box-sizing ⭐️⭐️⭐️⭐️⭐️
content-box(기본값)
컨텐츠만!(너비=컨텐츠너비)border-box
컨텐츠+padding+border (border까지!)
(너비=컨텐츠+padding+border 다 더한 너비)
content-box
내가 겪은 문제처럼 박스 안에 컨텐츠만 존재!
내가 지정한 너비가 컨텐츠만의 너비인 것이다.
padding을 따로 주면 padding만큼 너비가 더해지는 것
width: 400px;
padding: 30px;이렇게 예시를 들면 (30 + 400 + 30)으로 실제 너비는 내가 지정한 400px이 아니라 460px인 것이다.
이것은 배경색을 지정해보면 시각적으로 확인해볼 수 있을 듯 하다.
이렇게 되면 padding이 늘어날 수록 컨텐츠, padding 등은 고정이고 전체 너비가 늘어나겠지?
왜냐하면 전체 너비는 변화하니까!
border-box
컨텐츠+padding+border까지 모두 포함한 크기가 너비가 되는 것이다.
width: 400px;
padding: 30px;이 예시에서 padding 30 30을 모두 포함해서 너비가 400px이라는 것이다.
이렇게 되면 padding이 늘어날 수록 컨텐츠의 크기가 줄어들겠지?
왜냐하면 전체 너비는 고정이니까!
👀 헷갈렸던 점 3
wrapper에 text-align:center를 활용하여 가운데 정렬하려고 했는데, 이미지도 텍스트도 가운데 정렬이 안됨
❗️text-align 속성은 인라인 레벨 요소에만 적용
헷갈리지말자!!
당연히 가운데 정렬을 하려면 충분한 공간이 있어야 가운데로 정렬을 할 수 있는 것이다.
인라인 요소는 컨텐츠만큼의 너비만 공간이 있으니 딱 맞아서 그 공간에 껴서 가운데로 이동을 해도 우리가 보기엔 티가 안나는 것이다.
(이 개념 맨날 헷갈리니까 의식적으로 생각해보기!)
block
👀 방 안에서 내가 가운데로 간다고 생각해보자
누가 봐도 가운데 자리로 간 내 모습을 볼 수 있다.
inline
👀 내 몸만한 옷장 안에서 내가 가운데로 간다고 생각해보자
나름대로 가운데로 갔지만 내 몸사이즈에 딱 맞는 공간이니 남들이 보기엔 그냥 그대로 있는 것 처럼 보인다.
❗️보통 inline이 기본 속성
❗️img, p 등등 모두 기본값은 inline
✨ 총평
코드를 작성하는 것은 아직 오래걸리지 않지만 그 코드에 대해서 생각해보면서 아직 기초가 안잡혀있다는 것을 깨달았다.
하나의 개념만 추가가 되어도 원래 있던 개념까지 헷갈리는 걸 보면 계속 헷갈리는 것들을 찾아보며 기본기를 다 잡아야 할 것 같다.
