728x90
반응형
1. 문제점
프로젝트에서 필요한 HTML이 많았다..!
간만에 만져보는데 역시 수평수직 중앙정렬도 헷갈리고
그외는 어떻게 분리해야할지 헷갈렸다.
2. 시도해본 것들
구글링도 해보고, AI에게 물어보기도 했다.
기본적으로 flex 세트를 썼지만 잘 먹히지 않았다.
3. 해결과정
예전에 많이 애먹었던 기억이 있는데 body,html에 너비높이를 100%로 줘서 해결했던 것이 기억이 났다.
그리고 헷갈리는 부분은 친구의 도움을 받았다.
4. 알게 된 점
친구가 비주얼스튜디오 live share를 통해 코딩하는 것을 도와줬다.
현업에서 일하는 친구의 코딩스타일을 보니 깔끔했고 많은 도움이 되었다.
아래의 코드는 나중에 다시 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" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>🧺세탁 신청서🧺</title>
</head>
<style>
*{margin:0; padding:0;}
html,body{width:100%; height:100%;}
body{background-image:url("https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbdByfl%2FbtrVf7i5Uq5%2FjJ5afu7vrUKkgNGmzP2kAk%2Fimg.jpg"); background-repeat:no-repeat; background-size:cover;}
.flex_center{display:flex; align-items:center; justify-content:center; width:100%; height:100%;}
.status{border-radius: 50%; background-color: #6D67E4; width: 400px; height: 400px;}
</style>
<body>
<div class="flex_center">
<h1 style="position:absolute; top:100px; text-align:center;">🧺세탁물 상태현황🧺</h1>
<div class="status flex_center" style="color:#F2F7A1; font-size: 30px; font-weight:bold;">상태표시</div>
</div>
</body>
</html>728x90
반응형
'일기 > TIL' 카테고리의 다른 글
| TIL: Today I Learned 39일차 [프로젝트 마지막] (0) | 2023.01.05 |
|---|---|
| TIL: Today I Learned 38일차 [코드분석] (0) | 2023.01.04 |
| TIL: Today I Learned 36일차 [안될땐 재부팅] (0) | 2023.01.02 |
| TIL: Today I Learned 35일차 [프로젝트 시작] (0) | 2022.12.30 |
| TIL: Today I Learned 34일차 [심화과제2] (0) | 2022.12.29 |