제 부사수 민수는 지독한 ‘길치’였습니다. CSS 좌표 잡는 걸 그렇게 어려워했죠. 어느 날 justify-content와 align-items를 반대로 적어서 레이아웃이 다 깨진 걸 보고, 제가 모니터에 포스트잇 한 장을 붙여줬습니다. 거기엔 딱 한 문장이 적혀 있었습니다. “지금 네가 깐 도로는 어디로 뚫려 있냐?”Flexbox는 사실 박스를 배치하는 게 아닙니다. ‘흐름(도로)’을 만드는 겁니다. 꼬치구이가 정적인 이미지라면, 도로는 우리가 매일 […]
justify와 align이 헷갈릴 땐? ‘차선 변경’을 기억하세요 (Flexbox 완벽 정리) 더 읽기"
오늘 학원 수업 시간에 강사님이 그러시더군요. “여러분, 홈페이지는 사실 거대한 도시락 통입니다.” 처음엔 다들 무슨 소린가 해서 눈만 껌뻑였는데, 수업이 끝날 때쯤엔 모두 고개를 끄덕였습니다. 저도 예전에 혼자 독학할 때, 글자 색 하나 바꾸려다 레이아웃이 와장창 깨져서 당황했던 적이 있거든요. 그때 제가 몰랐던 게 바로 오늘 배운 ‘블록(Block)’과 ‘인라인(Inline)’의 차이였습니다. 오늘 이 글을 다 읽으시면,
HTML Div와 Span 차이점 분석: 도시락 비유로 배우는 블록 요소와 인라인 요소 더 읽기"
2013년 여름, 제가 웹 에이전시에서 퍼블리싱 팀장으로 일할 때였습니다. 갓 입사한 신입 디자이너가 울상을 지으며 제게 찾아왔습니다. “팀장님, 제가 디자인한 건 텍스트가 이미지 위에 올라가 있는데, 코딩된 페이지에선 자꾸 아래로 떨어져요.” 저는 그 친구의 모니터 화면(포토샵)과 제 모니터 화면(VS Code)을 나란히 두고 말했습니다. “포토샵 레이어 패널에서 폴더를 접었다 폈다 하시죠? 코딩도 똑같아요. 단지 마우스로 드래그하느냐,
포토샵 ‘레이어’만 이해해도 HTML 코딩의 50%가 끝나는 이유 더 읽기"
