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) 그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치..

이번 섹션에 포함된 강의명은 다음과 같다. (강의에서 제공된 번역 내용을 기반으로 작성하지만, 간혹 오역으로 판단될 경우에는 내 해석으로 대체할 수 있음..!!) 순서 강의명 소요 시간 중요도 (필수crucial/중요important/선택nice to have) 01 불투명도와 알파 채널 Opacity & The Alpha Channel 6' 32" 중요 02 위치 속성 The Position Property 9' 40" 필수&약간 어렵 03 CSS 트랜지션 CSS Transitions (yay!) 11' 17" 필수 04 CSS 변형이 가진 능력 The Power of CSS Transforms 13' 13" 선택(알면 좋음) 05 멋진 버튼 호버(Hover) 효과 주기 Fancy Button Hove..