BO의 개발로그

이번 주 주간회고의 제목은 일주일 만에 선생님이 된 보니로 하겠습니다. 약간 열두 살에 부자가 된 키라를 따라한..~ 아니 어쩌다 선생님이 되어버렸냐면..ㅋㅋㅋ 이번 주는 HTML, CSS를 배우는 주간이었고, 내가 개발 공부에 발을 들이면서 처음으로 공부했던 게 바로 이 두 개였다. 그러다 보니 당장 이번 주에 처음 배우는 동기들보다는 알고 있는 게 비교적 많았고, 동기들이 질문하거나 막히는 부분들을 도와줄 수 있었다. 그렇게 거창하지는 않지만 동기들에게 도움을 줄 수 있었던 주간이었다. 오늘 주간회고 때 동기들이 포스트잇에 적어 준 내용을 보니 나름 뿌듯하기도 했고 나 역시도 많이 배웠던 한 주였다.(하지만 7주차부터는 다시 자바 쪼렙으로 돌아갈 예정입니다만? 그것이 "인지상정"이니까..) 무튼! 1..

오늘은 이번 주의 마지막 과제 개발자 프로필을 만들었다. 피그마로 데스크탑, 모바일 버전 디자인 시안을 보면서 구현하는데, 요소 요소가 너무 많을 뿐만 아니라 공통적으로 사용하는 레이아웃을 라이브러리 없이 순수하게 구현하려고 하니 손이 많이 가서 좀 힘들었다. 이로써 재사용성 있는 컴포넌트의 소중함을 다시 한번 깨달았고... 더군다나 이번엔 한번 데스크탑 먼저 만들고, 모바일 버전으로 거슬러 올라가 보려고 시도했으나 대실패.. 역시 모바일 퍼스트가 괜히 있는 것이 아니다.. 그래서 모바일 버전은 아직도 만드는 중..^^ 그동안 내 나름 HTML이랑 CSS를 좋아한다고 자부해왔는데 이번 주는 작업하면서 의문스러울 정도로 왜 이리 진이 빠지는지 모르겠는 것이다.. 집 가는 길에 곰곰이 생각해보니 마크업이랑 ..

1주 1개발 서적 읽기이지만, 이번 주는 총 2권! 새로운 CSS 레이아웃과 함께 『웹디자이너를 위한 HTML5』 -제레미 키스, 레이철 앤드루를 읽어보았다. 이 책은 HTML의 역사를 얘기해주면서 HTML5를 어떻게 써야 할지 알려주는 책이기에 만약 HTML을 처음 배우기 시작했다면 읽어보기를 추천한다. 읽으면서 기록해놓으려고 표시해뒀던 키워드만 몇 가지 정리해보려고 한다. HTML 설계 원칙 - HTML의 핵심 설계 원칙들 중 하나는 "기존의 콘텐츠를 지원하라(Support Existing Contnet)"이다. 이는 온전히 HTML5만을 위한 최초 시작일이 존재하지 않는다는 것을 의미한다. XHTML 2가 기존에 존재하던 모든 것을 완전히 무시하려 했던데 반해, HTML5는 기존 기술과 표준에 바탕..

오늘은 반응형 레이아웃인 마카오 레터를 마크업 & 스타일링하였다! 항상 앞서 나가는 쥬쥬님의 어제자 TIL을 보고 이번 과제는 모바일 퍼스트로 작업을 진행해야 한다는 점을 캐치할 수 있었고, 그리하여 모바일 버전부터 작업하였다! 괜히 멘트도 적어보고..!ㅋㅋㅋ 나의 3년 뒤의 모습이랄까.... (희망사항 ㅎㅎ) 무튼! 모바일 화면이 데스크탑 화면보다 덜 복잡하기 때문에 레이아웃 잡기가 훨씬 쉬웠고, 그렇게 완성을 하고 나서는 바로 태블릿 화면으로 넘어갔다. 태블릿 화면도 세로 모드와 가로 모드를 맞춰서 작업하였고, 폰트나 비율들을 em 단위로 작업했기 때문에 크게 손 봐줘야 할 부분은 없었다. 태블릿 화면에서는 그리드로 세로는 2 columns, 3 columns로 작업하였고, 데스크탑에서는 4 colu..

1주 1개발 서적 읽기 프로젝트. 이번 주는 『새로운 CSS 레이아웃』 - 레이철 앤드루를 읽었다. 읽으면서 공감하면서 읽었던 부분도 많았고, 모던 CSS로 레이아웃을 제대로 짜고 싶다면 이 책을 제대로 읽어야 한다는 생각이 들었다. 읽으면서 내가 기억하고 싶은 부분들을 표시해뒀고, 이번 포스팅에 기록해본다. 논리적 속성과 물리적 속성 - 배치와 관련해 절대 위치를 정할 때처럼 그리드 또는 플렉스 컨테이너의 왼쪽, 오른쪽, 위, 아래라고 하지 않고 왜 '시작(start)'이나 '끝(end)'이라는 표현을 쓰는지 그 이유가 궁금할 수 있다. 이는 절대 위치에서 사용하는 left, right, top, bottom 속성은 물리적 속성이기 때문이다. 즉, 어떤 요소가 화면에서 물리적으로 어디에 위치하는지 나타..

역시나 오늘도 HTML, CSS를 한바탕 흔들어 재낀 날..! 오늘은 메가톡이라는 메신저를 마크업 & 스타일링했는데, 샘플에 있는 디자인만 살려서 내 일상 내용을 같이 녹여내 보려고 했다 ㅋㅋㅋㅋ 괜히 우리 동기들 이름 넣어서 메신저를 완성해보았다 ㅋㅋㅋㅋ 대화 내용도 각자 캐릭터 살려서 넣어봤다... 특히 제나님과의 대화는 항상 이런 식이다(약간 도파민에 미친 2인..)ㅋㅋㅋㅋㅋㅋㅋㅋ 사실 마크업은 이런 재미로 하는 것 아니겠습니꼬...ㅎㅎ 그나저나 뭔가 샘플 코드랑 구조를 다르게 해보고 싶은 마음에 이것저것 시도해보다가 작업이 예상했던 거보다 속도가 나지는 않지만!!! 그래도 역시나 CSS는 재밌다! 이게 내가 프론트엔드 개발자를 꿈꾸게 된 계기였지 싶고..ㅎㅎ 무튼 이번 주는 확실히 여유로워서 즐겁..

어제 멀미를 해가며 CSS 게임을 모두 마쳤고, 오늘부터는 일과 시간에 퀘스트 과제를 시작하였다. HTML/CSS 주간이라 당연히 퍼블리싱이 주된 내용이었고, 오늘은 마카오뱅크 페이지를 HTML, CSS로 작성해보았다! 큰 문제없이 레이아웃을 완성할 수 있었는데, 과제 안내문에 포함되어 있던 배포 주소로 미리 엿 본 샘플 코드 중 메인 페이지 버튼 요소가 inline-flex로 정렬되어 있었다. 물론 나는 샘플과는 다른 방식으로 코드를 작성했기 때문에 이번 과제에서 inline-flex를 쓸 일은 없었지만, inline-flex는 처음 본 속성이었고, 궁금해서 오늘 한번 정리해보려고 한다. 우선 코드는 아래와 같다. A B C .container { display: flex; /* ✅ */ display..

오늘은 CSS 게임을 한 8가지를 했는데..... 레알로다가 Flexbox랑 Grid 레이아웃에 탈탈 털린 하루였다... 인생이 무료하거나 시간이 너무 빨리 흘러간다 싶은 사람들은 Grid Attack 추천합니다 ㅎ.. CSS 게임 중에 얘가 단연코 일짱이다;; 진짜 끝나지 않는 라운드에 질려서 토가 나올 지경....ㄱ-.... Play Grid Attack – CSS Game to learn CSS Grid codingfantasy.com 근데 진짜 지겨워서 토할 거 같으면서도 손은 이 움짤처럼 계속 움직이고 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 막상 통과할 때마다 쾌감 돋아서 멈추지 않는 내 손....... 징하다 징해.... 그래도 그 덕분에 나는 오늘부로 그동안 자신 없었던 Flexbox와 Grid 레이아..