Today I Learned
- 기초 팀 프로젝트 발제-S.A 작성
- 프로세스, 스레드, 비동기 주제 CS 특강 수강
해결하는 경험
내가 담당한 마이페이지의 대략적인 틀을 만들고 있다. 간단한 구조 같아 보이지만 여기까지 만드는 데 3시간이 걸렸다.😥 현재 문제사항은 좌측에 이미지 변경 버튼이 가운데 정렬이 되지 않는 것과 우측에 베이지색 박스가 내가 원하는 위치에 들어가지 않는다는 것이다.
일단 이미지 변경 버튼은 justify-content: center;로 여기저기 시도해봤지만 실패하고 일단 버튼에 margin-left 값을 설정해서 가운데로 오도록 수정했다.
div 정렬 문제는 content_box에 display 설정을 했더니 해결되었다. 글로 적으니까 간단하지만 해결하기까지 많은 시행착오가 있었다ㅎㅎ
.my_box .content_box{
position: relative;
width: 800px;
height: 400px;
border: 1px solid #B2B2B2;
border-radius: 20px;
margin: 100px auto;
display: flex;
justify-content: center;
align-items: center;
}
일단 오늘은 여기까지 코드를 작성하고 마무리하려고 한다. 프로필 박스 하단에 내가 작성한 글을 모아볼 수 있는 부분을 추가적으로 구현해야 한다.
+) 페이지 전체에 배경색 넣기
body {
background-color: #D3DEDC;
}
느낀 점
웹 퍼블리싱 강의를 코드를 정말 열심히 분석해가며 공부해서 html, css 코드 작성하는 것이 기대됐었는데 역시 현실은 그렇게 쉽지가 않다. 이렇게 간단한 페이지 만드는 데도 몇 시간이 걸렸는지... 그리고 팀원분의 추천으로 이번에는 코드를 BEM 문법으로 작성하기로 했는데 익숙하지가 않아서 주말에 전체적으로 코드를 수정해야 할 거 같다. 주말에 공부해야 될 게 너무 많은데 일단 BEM 문법에 따른 코드 수정, 내가 작성한 글 모아 보는 페이지 구현이랑 firebase 공부하는 것을 우선순위로 삼으려고 한다. 이번 팀 프로젝트는 미니 팀 프로젝트보다 수준이 확 높아진 느낌이라 프로젝트 따라가려면 정말 부지런하게 공부해야 할 거 같다.
+) 오늘 처음으로 프로그래머스 코딩테스트 문제를 풀어 봤다! 시작은 레벨0의 간단한 문제였지만 앞으로는 깃헙에 꾸준하게 올려야겠다.
