Day 4 기록
오늘은 CSS 중에서도 position과 flexbox 태그에 대해 더 알아보고, 연습하는 시간을 가졌다.
개발공부를 하기 전에는, figma나 powerpoint 등으로 다양한 디자인을 했었기 때문에 내가 원하는 요소를 특정 영역에 위치시키는 게 전-혀 어렵지 않았다. 왜? 그냥 마우스 커서로 끌어놓으면 되니까. 근데, 이걸 코딩으로 하려니까 완전 다른 얘기가 된다.
예를 들어서, 어떠한 요소들을 화면상에서 이렇게 배치하려고 할 때 CSS 태그에서 그냥 직관적으로 위/아래/모서리가 있는 게 아니라서 좀 더 건설적(?)으로 생각해서 프로그래밍을 해야한다.
가장 먼저 해야 할 것은, 세개의 도형들이 어떤 관계를 갖는지 설정해야 한다. 작은 도형들이 큰 도형에 소속이 되는지, 아니면 서로 따로 놀아도 되는지. 이걸 파악하려면, CSS 태그에서 Position 또는 Flexbox 태그들의 속성을 잘 알아야 한다.
이 태그들로만 인해 도형들이 움직이기 때문에, 꽤나 제한적인 태그들로 도형들을 움직이려면 소속관계와 태그들의 기능을 함께 생각해서 코드를 짜야한다.
복기를 위한 코드⬇️
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="big-box">
<div class="box top-box">
</div>
<div class="box bottom-box">
</div>
</div>
</body>
</html>
[css]
.big-box{
color:white;
background-color:grey;
width:450px;
height:150px;
position:absolute;
right:0;
bottom:0;
}
.box{
background-color:black;
width:100px;
height:100px;
}
.top-box{
position:absolute;
right:0;
top:0;
}
.bottom-box{
position:absolute;
left:0;
bottom:0;
}
총 5문제를 강사님이 내주셨는데, 나의 힘으로 정답을 맞춘게 고작 한 개.... 시간도 엄청 많이 걸렸음. 전혀 감이 안잡혀서 오늘 망했다라고 생각했는데. 그 다음날인 오늘 블로그를 쓰며 복기하니, 조금씩 이해가 되기 시작한다. 역시 연습이 정말 중요한듯!
쉴때 Flexbox 연습을 여기서 간간히 해야겠다.
https://flexboxfroggy.com/#ko
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
'나의 개발자 입문기 2023' 카테고리의 다른 글
| Day 8 : 지옥같았던 스포티파이 웹사이트 빌딩 2 (0) | 2023.03.14 |
|---|---|
| Day 6 ~ Day 7 : 지옥같았던 스포티파이 웹사이트 빌딩 1 (1) | 2023.03.14 |
| Day 5 : Position, Flexbox 연습 또 연습... (0) | 2023.03.14 |
| Day 3 : 구글 웹사이트를 만들어 보았다. (0) | 2023.03.09 |
| 앞으로의 계획을 세워보았다. (0) | 2023.03.09 |
