#지난주에 이어서... CSS로 화면을 설계하고, 자바스크립트로 동작을 붙였다면, 6주차는 드디어 웹 문서를 ‘직접 조작하는 단계’ 로 들어섰다. # 자바스크립트와 객체 자바스크립트가 왜 객체 기반 언어인지 이해하는 장이다. 객체의 개념 자바스크립트의 내장 객체 브라우저와 관련된 객체 * 이제 코드가 단순한 명령어 모음이 아니라 속성과 기능을 묶은 구조(객...
#지난주에 이어서... 4주차에서 Grid와 고급 선택자로 CSS의 구조를 완성했다면, 5주차는 정적인 화면에 움직임과 동작을 붙이는 단계 로 넘어가는 구간이었다. # 트랜지션과 애니메이션 CSS로 화면에 움직임과 흐름 을 주는 방법을 다룬다. transform 속성 알아보기 transition으로 부드러운 변화 만들기 animation으로 반복 동작 구현...
#지난주에 이어서... 3주차에서 Flexbox와 반응형 개념을 익혔다면, 4주차는 CSS 레이아웃과 선택자의 ‘완성 단계’ 라고 느껴지는 구간이었다. # CSS 그리드 레이아웃으로 배치하기 Flexbox가 한 방향 정렬이라면, Grid는 화면 전체를 설계하는 레이아웃 도구 라는 느낌이었다. CSS Grid 기본 개념 행(row)과 열(column) 구조 ...
#지난주에 이어서... 2주차에서 HTML과 CSS의 기본 문법을 익혔다면, 3주차는 ‘화면을 어떻게 배치하고, 어떻게 반응하게 만들 것인가’ 에 집중하는 구간이었다. # CSS 박스 모델 CSS 레이아웃의 시작이 되는 박스 모델 을 다룬다. 콘텐츠(content), 패딩(padding), 테두리(border), 마진(margin) 요소 크기 계산 방식 여...
#지난주에 이어서... 1주차에서 HTML 기본 구조를 훑어봤다면, 2주차는 ‘이제 진짜 웹페이지처럼 보이게 만드는 단계’였다. 이번 주차에서는 입력 요소(Form) 와 CSS 스타일링의 핵심 개념들 을 집중적으로 다뤘다. # 입력 양식 작성하기 (Form) 웹에서 빠질 수 없는 게 바로 입력 폼 이다. 회원가입, 로그인, 검색창… 전부 여기서 시작하니까!...
겨울 방학을 맞아 Do it! 기초 언어 스터디 에 참여하게 되었다. 6주 동안 한 권의 책을 정해, 매주 진도에 맞춰 학습하고 내용을 정리해 공유하는 스터디 다. 내가 선택한 책은 「HTML + CSS 웹 표준의 정석」 웹 개발을 기본부터 정리하기에 딱 좋은 책이라 이번 스터디 도서로 골랐다. 스터디는 단순히 읽고 끝나는 게 아니라 정해진 진도표 에 맞춰...
#사소한 짜증이 너무 자주 생긴다 로딩 화면이 잠깐 멈추면 괜히 휴대폰을 내려놓게 된다. 메신저에 ‘읽음’이 찍혔는데 답장이 오지 않으면, 별일 아닌데도 신경이 쓰인다. 결제 버튼을 눌렀는데 바로 완료 화면이 뜨지 않으면 다시 한 번 더 누른다. 엘리베이터 버튼도 한 번이면 충분한데, 괜히 두 번 누른다. 이런 순간들이 하루에 몇 번이나 반복된다. 크게 화...
요즘 디지털 환경에서 느끼는 피로는 단순히 사용 시간이 많아서라기보다, 계속해서 무언가에 반응해야 한다는 압박감에서 오는 경우가 많다. 이번 주차 미션에서는 이러한 문제의식 속에서 디지털 디톡스를 고려한 디자인 사례 들을 ‘행복을 주는 디자인’의 관점으로 살펴보고자 했다. 아래 사례들은 모두 사용자를 더 오래 붙잡기보다는, 사용자가 스스로 디지털과의 거리를...
미션 1 - 4입력 AND, OR, NAND, NOR, XOR 연산의 진리표를 작성해보세요. 답. | A | B | C | D | AND | OR | NAND | NOR | XOR | |:-:|:-:|:-:|:-:|:---:|:--:|:----:|:---:|:---:| | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 1 | 0 | | 0 | 0 | 0...
인프런 워밍업 클럽 4기 첫 주차! 먼저 컴퓨터 구조 강의들을 수강하였다. 각 강의들은 큰 주제를 나누어 섹션별로 구분되어있었는데 첫 번째 섹션은 컴퓨터 구조 개론 이였다. 이 섹션은 4강의로 나누어 이 강의를 들어야 하는 이유 및 컴퓨터의 역사를 배워보는 시간이였다. 어릴 적 어딘가 들어봤던 용어들을 다시 떠올리는 기본 워밍업 느낌의 섹션이였다. 두 번째...
