하이고니의 개발 스토리

첫 솔로 프로젝트다. 손 끝을 자극하는 키보드의 감각 하나까지 다 남겨보고 싶다. 처음부터 쓰지 않으면 진행에 몰입하다가 완전 잊을까봐 처음부터 기록한다. 일단 막막하다. 어떻게 시작해야 할까.. 한 번 의식의 흐름대로 적어보겠다. Coz' Mini Hackathon 의 목표는 '나만의 아고라 스테이츠 만들기'. 주어진 최소한의 양식을 가지고 자유롭게 단일 페이지를 구성하는 것이다. Bare Minimum Requirement 디스커션 나열 기능 script.js를 수정하여 agoraStatesDiscussions 배열의 데이터를 나열할 수 있게 구현합니다. CSS 아고라 스테이츠 질문 리스트가 중앙으로 와야 합니다. style.css를 수정하여 멋지고 아름답게 나만의 아고라 스테이츠를 꾸밉니다. col..

자바스크립트 계산기 만들기 2: 계산기능 구현, 예외처리 계산 기능 구현 산술 연산자는 숫자 값을 피연산자로 받아 하나의 숫자 값을 반환합니다. 표준 산술 연산자는 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/)입니다. - MDN 자바스크립트에서 사칙연산과 관련 kanhi.tistory.com 아래 나오는 코드는 모두 위 블로그 복붙입니다. 이 분의 설명 굉장히 굉장합니다. 위 글은 자바스크립트를 처음 시작하고 계산기 만드는 것에 좌절하고 있던 제게, 한 줄기 빛이 되어주었습니다. 글 쓰신 분께 큰 감사의 말씀을 드립니다. HTML AC ÷ 7 8 9 × 4 5 6 - 1 2 3 + 0 . = CSS /* style.css */ main { width: 300px; } .button-wrap { dis..

1. container 를 둘러싼 frame 이 있다. 2. container 는 크게 4가지 영역으로 나뉜다. space, nameTag, screen, buttons 와이어프레임은 아래와 같다. HTML CSS * { margin: 0; padding: 0; box-sizing: border-box; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { display: flex; justify-content: center; align-items: center; } .frame..

목표 코드 HTML 아이콘 1 아이콘 2 아이콘 3 영역 1 영역 2 영역 3 영역 4 영역 5 CSS * { margin: 10px; padding: 10px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 16px; } body { display: flex; flex-direction: row; flex-basis: 0; align-items: center; justify-content: center; box-sizing: border-box; } #containe..

margin (바깥 여백) border 바깥의 여백을 조정 p { margin: 10px 20px 30px 40px; } 각각의 값은 top, right, bottom, left 로 시계 방향 값을 두 개만 넣으면 top과 bottom 값을 하나만 넣으면 모든 방향의 바깥 여백에 적용 다음과 같이 방향을 특정한 속성도 존재 p { margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; } *위의 규칙은 padding 에도 동일하게 적용됨 padding (안쪽 여백) border 안에서 content 를 제외한 공간을 조정 안쪽 box #container { width: 300px; padding: 10px; backgro..