하이고니의 개발 스토리

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

DOM: Doucument Object Model HTML 요소를 JavaScript Object처럼 조작할 수 있는 Model. 아주 간단한 CRUD 설명 C: Create R: Read U: Update D: Delete C document.createElement('div') 새로운 요소를 만든다. const newDiv = document.createElement('div') document.body.append(newDiv) 새로 만든 요소를 변수에 할당해 그 변수를 body의 자식으로 집어 넣는다. R DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는, querySelector의 첫 번째 인자로 셀렉터를 전달하여 확인해야 한다. 셀렉터에는 HTML 요소("div"), id("#myID")..

자바스크립트 계산기 만들기 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..

생활코딩 WEB1 아주 좋은 강의다. 조만간 한 번 더 정주행해야겠다. 단순히 HTML을 사용하는 방법을 알려주는 콘텐츠가 아니라, 웹의 역사와 그 속에서 우리가 갖춰야할 태도를 알려준다. 여러가지 생각을 하게 만드는 것이 꼭 인문학 강의처럼 느껴졌다. 어떤 것이든, 디테일보다 본질을 더 중요시하는 분들이라면 꼭 한 번 들어보길 바란다. https://youtu.be/tZooW6PritE 유튜브 드림코딩 채널에서 NAV BAR 만드는 만드는 강의를 봤다. 태그 하나 하나가 다 너무 생소해서 따라가기 벅찼다. 그래도 태그를 활용하는 방법이나, 태그의 개념 등 많이 쓰이고 중요한 것들에 대해 조금은 익숙해졌다. margin 과 padding 이 계속 헷갈리긴 한다. margin 은 외부의 여백이고 paddi..

HangBokRadio About Video Shop : 링크 태그 target = "_blank" : 새 탭에서 열겠다 이미지를 링크로 불러와야할 때는 나에게 메일로 이미지를 보내서 따면 됨.