BELOWZERO

엘리님이 추천하는 10 extensions 정리 Material Theme: change the theme color Material Icon Theme: 아이콘이 좀 더 생동감 있게 표현됨. Prettier- Code formatter -> setting창에 prettier quote검색했을 때 똑같이 안 떠서 설정하는 것까진 못함. Bracket Pair Colorizer - 가독성 Indent Rainbow - 가독성 Auto Rename Tag - html을 편집 시 태그명을 바꿀 때 유용 CSS Peek - html에서 CSS를 빨리 찾을 수 있도록 도와줌 ctrl을 누른 상태로 해당 인자를 클릭하면 css파일로 넘어가는 것을 볼 수 있음. HTML CSS Support - html에서 css자..

오늘은 이제 막 공부하기 시작한 React 개념 중 component에 대해 정리해보려 한다. 웹을 만들 때 기존 방식에서는 html문서에 모든 element구조를 정의했다면 React에서는 element들을 재사용이 가능하도록 비슷한 쓰임을 하는 것끼리 묶어 하나의 component로 만든다는 것이 특징이다. ✅ 폴더구조 우선 react-app으로 react project를 만들었고 필요 없는 파일들은 모두 삭제하고 사용될 애들만 남겨두었다. component로 사용되는 애들 확장자는 js보다는 x를 붙여 jsx로 많이 사용하는 것 같다. 따라서 나도 app.js파일 이름을 app.jsx로 바꿔주었다. ❓ 역할 index.js파일을 보면 다음과 같이 적혀 있는데 얘는 index.html파일안에 명시되어..

오늘은 input태그와 button태그를 이용해서 input태그 안에 적힌 텍스트를 화면에 출력해보고 이를 다시 form태그를 이용하여 구현해보려 한다. html, css, js소스는 아래와 같다. 💻 소스 button exam /* CSS */ input { padding: 10px; } button { border: none; outline: none; border-radius: 3px; padding: 10px 15px; color: white; background-color: black; cursor: pointer; } // JavaScript const input = document.querySelector('input'); const btn = document.querySelector('bu..

html, css를 좀 더 연습하고 싶어서 사이트를 돌아다니면서 구현하고 싶은 것을 골랐다. tree구조로 동작할 수 있게 만드는 건데 이렇게 간단한 걸 구현하면서도 모르는 게 참 많았다. 1. 결과물 및 소스 열린 폴더 아이콘을 누르면 열린 폴더 아이콘은 닫힌 폴더 아이콘으로 변경되고 root노드의 자식들이 모두 닫히는 식으로 동작한다. html 소스 css 소스 2. 구현 과정에서 어려웠던 점 및 알게 된 것 [main idea] checkbox와 label의 동작 방식 input 태그의 type중에 checkbox와 label태그를 이용해서 해당 트리를 구현했다. checkbox의 id를 정해주고 label 태그의 for attribute에 check box의 id를 적어주면 서로 연결되어 chec..

JS도 빨리 적용시켜보고 싶어서 이번에는 js를 이용해서 동적으로 값을 받아와 화면에 표시하는 간단한 웹을 만들었다. 저작권 없는 아이콘에 색까지 내 마음대로 지정할 수 있는 곳을 마땅히 찾지 못해서 이미지는 ppt에서 제공하는 아이콘으로 만들었다. 먼저 정적 웹 페이지를 만든 후 동적으로 만들었다. 저번까지는 다 만들었을 때 github에 올리는 식으로 했는데 기능 단위로 구현할 때마다 commit하는 게 좋다고 해서 이번에는 그렇게 해보았다. 처음에는 기능을 구현하기 위한 소스를 참고하기 위해 구글링을 하려는데 뭐라고 검색을 해야 될지도 몰랐다. 그래서 일단 이것저것 js이벤트 관련된 문서를 읽다가 DOM에 대한 이해가 먼저라고 판단해서 DOM에 대한 이해부터 다시 했다. 이후 데이터를 받아와 화면에..

엘리님의 영상을 참고해서 간단한 반응형 헤더를 제작해보았다. 참고영상 웹사이트 따라만들기, 반응형 헤더편 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript - YouTube 무언가를 만들어서 게시글로 작성해보는 것은 처음인데 앞으로 일관성 있게 작성하기 위해서 글 안에 담는 내용을 통일시킬 생각이다. 글 안에 들어가는 내용은 1. 무엇을 만들었는가, 2. 구현 과정 중 무엇이 어려웠고 어떻게 해결할 수 있었는가, 3. 느낀점 이 3가지가 될 것 같다. 글을 처음 작성하는 거라 앞으로 어떻게 작성할지 더 알아보고 생각 해봐야겠다. 1. 결과물 일단 이 반응형 헤더를 구현하기 전에 내가 알고 있는 지식이 터무니 없이 부족했다. 알고 있는 건 html,css에 대한 얕은 지식, html을 ..

유튜브의 영상이 재생되는 페이지의 UI를 만들어보았다. 엘리님 영상을 보기 전에 먼저 만들어 보고 이후 영상을 보고 구현하지 못했던 부분을 마저 구현했다. 참고 영상 클론코딩 유튜브 사이트 따라 만들기(HTML+CSS 연습편, 웹 포트폴리오) | 프론트엔드 개발자 입문편: HTML, CSS, Javascript - YouTube 1. 결과물 2. 구현 과정에서 어려웠던 점 및 해결 1. ⭐텍스트 라인 제어 .item{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 라인 제한 */ overflow: hidden; } 2. 아이템 중앙에 배치하는 방법 .item{ margin: 0 auto; /* top, botto..

오늘은 scrollIntoview web API를 알게 되었다. 까먹지 않게 정리해보자! scrollIntoView는 모든 element에서 사용이 가능하다. 간단하게 버튼을 클릭했을 때 내가 만들어놓은 보라색 박스로 스크롤이 이동할 수 있도록 했다. const button = document.querySelector('button'); const box = document.querySelector('.box'); button.addEventListener('click', () => { box.scrollIntoView({ behavior: 'smooth' }); }); scrollIntoView API에는 특정 옵션을 전달할 수 있는데 대표적으로 behavior, block 등이 있다. behavior..

flex box는 container에 적용 시킬 수 있는 속성이 존재하고 각 item에 적용 시킬 수 있는 속성이 존재함. display: 화면에 아이템을 어떤 모양으로 배치할 것인지 지정 flex-direction(default: row): - 아이템을 어느 방향으로 배치할 것인지 지정 flex-wrap: nowrap -화면을 축소시킬 때 아이템을 다음줄에 배치시킬 것인지를 지정 flex-flow: 위 2개를 합한 거임. justify-content (default: flex-start): 중심축을 기준으로 아이템을 어떻게 배치할 지 정하는 것. align-items: 중심축과 반대되는 축을 정렬 align-content: align-items와 비슷하지만 nowrap인 경우 의미가 없음. justif..

웹사이트를 만들 때 가장 중요한 것은? 우리가 잘 정의한 박스를 원하는 위치에 원하는 사이즈로 배치하는 것이 가장 중요함. display, position을 알아야 함. block level(ex. div) vs inline level(ex. span) display속성 inline: 물건 lnline-block:상자인데 한 줄에 여러 개가 진열 block: 상자인데 한 줄에 하나씩 position속성 static: 기본 값. html에 정의된 순서대로 자연스럽게 보여지는 것을 의미함. 보통 body안에 태그들이 작성되기 때문에 화면 좌측 상단부터 채워짐. relative: left, top등의 값을 지정해주었다면 그 값에 맞게 위치를 변경시킬 수 있음.(나를 기준으로 움직임) absolute: 자신의 ..