결국은 서울로 학원을 가는 걸 포기하고 본가가 있는 지방에서 학원을 다니기로 결정했다. (독립이 잠시 미뤄져서 속상하지만.. 별 수 있나... 현대인은 돈의 노예니까....) 그렇다고 서울과 엄~~청 멀리 떨어진 지방이 아니어서 그런지 다행히도(?) 내가 사는 이 지역에도 국비 학원이 있었다. 그래서, 지난 26일, 펑펑 쏟아지는 함박눈을 뚫고 학원에 상담을 다녀온 후기를 풀어볼까 한다. 아니 사실 후기라기보다 거기서 질문하고 들은 답들을 정리한 것에 가까울 거 같다. 내가 간 바로 그 학원만의 특성일 수도 있지만, 서울의 몇몇 학원을 상담차 다녀와 본 것 + 수많은 커뮤니티 글들에서 읽은 국비 학원의 특징(?) 등을 종합해볼 때, 굉장히 참고할 수 있을 공통점이 많을 것이라고 생각된다. Q1. HRD-..

https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 해볼만 한 게임(?)이다. 무엇보다 한글 지원이 돼서 좋다. 영카데미 김민영멘토님 통해서 알게 된 건데 강의 듣다 딴길로 샜음.. 읍읍;; order는 첨 보는데.. Do it 책에선 못봤다고...???

(반응형 웹 디자인에 적합한) 그리드 레이아웃grid layout을 만드는 방법 中 ⤻ 수식 첫 번째, 플렉스 박스 레이아웃flexible box layout. 낯선 용어들 먼저 정리하고 가자. ① flex container 플렉스 컨테이너, 부모 박스 flex item들을 모두 묶은 요소. ② flex item 플렉스 항목, 자식 박스 flex box를 구성하는 요소들 모두. 위 동영상에서는 1번 ~ 6번 박스들을 의미. ③ main axis 주축 flex box의 주된 배치 방향. 늘 수평방향을 의미하지는 않음. 위 동영상에서 1번 박스 왼쪽 위 꼭짓점을 '주축 시작점', 2번 박스 오른쪽 위 꼭짓점을 '주축 끝점'이라고 칭함. ④ cross axis 교차축 flex box의 주축과 교차하는 방향. ..

열심히 해두었던 영어 공부를 한참 쉬었더니 그나마라도 쌓아두었던 것마저 무용지물이 될 것 같아서 따로 영어 공부할 시간은 안 될 것 같고.. 강의를 영어자막 켜 놓고 보려고 한다..ㅎㅎ 속도가 느려질 수 있음ㅠㅠ (언젠 빨랐냐!) 03. CSS 트랜지션 트랜지션도 border처럼 한 가지 속성에 여러 가지를 지정할 수 있다. 이 와중에 강사님이 VSCode를 이용하는 걸 봤는데, 하나를 만들어 클래스 이름을 circle로 한다고 해놓고 .circle만 입력하더니 Tab을 눌렀다. 여기도 emmet이 숨어있을 줄이야..ㅋㅋㅋㅋ 굳이 div.circle이라고 쓰지 않아도 별다른 역할이 적히지 않은 div는 생략이 가능한가 보다. (JSFiddle, Codepen에서도 먹히는 거 확인했따 흐흐😎) 또한 CSS..

반응형 웹 디자인responsive web design을 사용했으면 화면 너비에 따라 웹 문서 안의 요소들을 다시 배치해야 하는데, 그 배치 기준이 되는 것이 바로 이번 주제인 그리드 레이아웃Grid Layout : 웹 사이트를 여러 개의 colomn으로 나누고 웹 요소(메뉴, 본문, 이미지 등)를 화면에 맞게 배치하는 것. 그리드 레이아웃의 장점 레이아웃을 일정하게 유지할 수 있음. (∵ 화면을 규칙적으로 배열하니까.) 그리드 레이아웃의 특징 시각적으로 안정된 디자인 제작 가능 업데이트가 편한 웹 디자인 구성 가능 요소를 자유롭게 배치 가능 그리드 레이아웃 만드는 법 flexible box layout(= flex box layout) 그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치..