hyeeoooook 님의 블로그

오늘은 멋사에서 회고팀원들끼리 공용 브랜치 및 디스코드를 개설했음! ㅎ github pages를 이용하여 간단하게 배포를 하고 branch를 이용해서 앞으로 팀원들과 제작한 홈페이지를 각각의 페이지로 이동할 수 있게 하기위함임https://dohyuk-centric.github.io/likelion17th-Pride/ Pride Team dohyuk-centric.github.io 슬비 강사님의 강의 대부분은 상당히 모던한 CSS와 HTML의 구조를 성명하는 수업 방식이었음 근데 사실 이런 내용들은 요즘 AI에게 미리 학습시키지 않는한에는 쉽게 얻지못하는 지식들인데 강사님을 통해서 접근성을 자세히 배울 수 있었음 ㅎㅎㅎ 하루에 시간이 될때마다 개인 프로젝트와 블로그에 회고를 자주 올리곤 하는데 해주신 피..

동영상이 무한 재생되는 화면을 만들어 보았다.주제는 나름 한국의 관광지를 설명하는 컨셉의 예제로 꾸며보았다. HTML과 CSS HTML+CSS+JS HTML+CSS+JS 화면 오버레이 메인 화면 서울 경복궁, 명동거리, 남산타워(N서울타워), 동대문, 디자인플라자(DDP), 홍대거리, 광화문광장, 청와대(청와대 본관·녹지원 개방), 롯데월드 타워·서울스카이 전망대, 인사동 문화거리, 북촌 한옥마을 ..

프런트엔드로서의 길을 가기 위해 약 한 달 동안을 전전긍긍했다. 해보고 싶은 것도 해보았고, 심지어 타입스크립트도 사용하지 않는 리액트 + 자바스크립트 버전으로 회원가입 및 로그인을 구현해 보았다. 꼴에 백엔드까지 진행해 보려고 JWT까지 구축하여 Spring Boot 서버 개설과 이를 미들웨어 화하였고, 이것을 MySql DB에 저장하여 accessToken과 RefreshToken까지 발급하였다. 이는 To do List를 만들어가는 과정이었다. 와중에 나는 문득 생각이 났다.앞으로 이런 내용들은 죽도록 할 것이다.하지만 기본적인 어쩌면 가장 놓치기 쉬운 것은 무엇일까..이렇게 앞으로 나아간다면 취업, 어쩌면 개발자로서의 올바른 방향인 걸까? 때문에 하던 모든 프로젝트를 내려두고 다시 처음으로 돌아왔..

header란?[내 생각] HTML의 body 태그안에 최상단에 위치하여 사용자들에게 해당 문서(HTML)을 최대한 객관적으로 전달하고 어떤 내용들이 있는지 nav를 통해 리스트화 시키고, 때론 로그인/회원가입과 같은 시스템을 제공하면서 해당 웹 페이지의 이정표와 같은 역할을 한다고 생각한다. 태그는일반적으로 말하는 웹 페이지의 맨 위에 있는 글로벌 헤더나,글이나 콘텐츠의 서두[서론/서문/도입부]를 나타낼 때 사용합니다.나는 내 생각을 정리하여 실제 이론과 비교하는걸 습관화 하려고 한다.개발자는 너무나도 많은 정보의 사이에서 실제하는것과 실제하지 않는 정보를 가려내고, 결국 나의 성향이 코드로 보여지기 때문이다.헤더를 다뤄야할까?사실 header를 딥하게 다뤄야할까? 많이 고민했다. 하지만 초보자에게 ..

오늘은 저번에 Login 페이지 구현에 이어서 그와 연동되는 main홈페이지를 제작하였다.사실 나는 주말에 계속 코딩을 진행해서 따로 페이지를 만들었었다. 오늘의 포스팅 주제는 다른 홈페이지가 어떤식으로 코딩되고 구동되는지 알아보기 위함이다.중점적으로 볼 사항은 아래와 같다.1. 코드를 어떻게 묶었는가2. , , , , 와 같은 시멘틱 태그들을 어떻게 적절하게 사용하는가?(사실 article, section은 드물 가능성이 높다)3. JavaScript를 사용했다면, 어떻게 사용했는지와 HTML을 어디에 어떻게 무엇을 담는지4. 전체적인 구동 방식과 레이아웃 설정 사실 그 외에도 배워봐야할 점은 많겠지만 많이 먹으면 배에 탈이나는법..배울 수 있는 양을 배워 확실하게 기록하고 남겨가자! 참고한 사이트는 ..

Scroll-Snap이란? 웹 페이지에서 스크롤을 할 때, 요소가 스크롤되는 위치에 자동으로 스냅 되도록 하는 CSS 속성즉, 임의 위치에서 멈추지 않고, 개발자가 정의한 포인트에서 자동으로 멈추게 하는 기술 나는 이 내용을 배달의 민족 홈페이지보고 매력을 느꼇다. 내가 생각하는 대표적인 예인 것 같다.배달의 민족(https://www.baemin.com/) 배달의민족 - 무료배달 배민클럽시켜도 시켜도 무료배달 배민클럽! 음식부터 장보기, 쇼핑까지 배달은 배달의민족www.baemin.com Scroll-Snap은 필수적으로 부모 요소와 자식 요소로 정의된다. 1) 부모 요소 - 스냅 종류 설정.container { scroll-snap-type: y mandatory; overflow-y: scro..

어제 새벽 3시까지 코딩을 진행하며, 잠은 거의 4시간 정도? 잔 것 같다.일단 이번 포스팅은 나의 개발 관점과 무엇을 놓치고 있었는지에 대해서 포스팅할 것 같다. 내가 왜 이렇게 늦게까지 하고 잠을 줄였냐고? 음... 그건 사실 생각해 보면 재미가 있기 때문이지 않을까?무언가 배우려는 열정과 이 분야를 잘해지고 싶다는 욕망이 생긴다는 것이 어떻게 보면 재미라고 볼 수 있지 않을까 싶다.미래에 내가 다시 포스팅을 쓱 읽어보면 아! 나는 이때 이렇게 생각했고 이렇게 접근했고 나를 알 수 있을 것 같아서 적어 놓는 것이 중요할 것 같다. 일단 개발에 대한 나의 생각은 기본적인 내용들은 모두 짚어보면서 나아가고 싶다는 것이다.코드를 작성할 때 한 줄이라도 더 짧게 줄여보려고 노력하고, class의 이름을 다..

CSS란?CSS는 HTML이나 XML과 같은 구조화 된 문서를 화면, 종이 등에 어떻게 랜더링할 것인지를 정의하기 위한 언어.CSS는 HTML에 종속적이며 단독으로는 큰 의미를 갖지 못한다. 즉, 함께 쓰여야 제대로된 시너지가 나온다. CSS 선언 방식인라인 방식내장 방식링크 방식@import 방인라인 방식 : HTML문서 요소에서 스타일 속성을 사용하여 직접 스타일을 작성하는 방식이다. 내장 방식 : 링크 방식 : 를 사용하여 외부 문서로 css를 불러와 적용하는 방식이다. @import 방식 : @import를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식이다.마진(Margin), 보더(Border), 패딩(Pading)Margin의 속성에는 왼쪽(left), 오른쪽(Right), 아래(Bot..