hyeeoooook 님의 블로그

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

import { auth } from "./firebase";import { onAuthStateChanged } from "firebase/auth";DevloginState();// index.html에 있는 페이지와 연동함function DevloginState() { const DevLogActionSignedIn = document.getElementById("DevLogActionSignedIn"); const DevLogActionSignedOut = document.getElementById("DevLogActionSignedOut"); onAuthStateChanged(auth, (user) => { if (user) { DevLogActionSignedOut.styl..

Picture와 Source요소picture 태그 자체로는 화면에 아무것도 표시하지 않습니다.단지, 내부의 반응형 이미지를 제공하는 source 태그가 있다면 source 태그의 srcset 속성과 media 속성 및 type 속성으로 설정한 반응형 이미지에 맞는 이미지 소스를 선택하도록 환경을 제공하는 역할을 합니다.출처 : https://codingeverybody.kr/html-picture%EC%99%80-source-%ED%83%9C%EA%B7%B8-%EB%B0%98%EC%9D%91%ED%98%95-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0/즉, picture 태그는 source와 img 태그의 부모 요소로서 아래에 포함하..

role 속성의 활용 본래 시멘틱 태그를 사용할 때 header, nav, main, aside, footer와 같은 태그를 사용하여 기본 골격을 잡는다.이를 div로 표현을 해보았을때, 다음 코드와 같다. 헤더 내비게이션 Like 섹션 Lion 섹션 사이드바 푸터 스크린 리더는 다음 순서와 같이 읽는다.배너헤더내비게이션내비게이션메인지역Like 섹션지역Lion 섹션보완 콘텐츠사이드바콘텐츠 정보푸터 스크린 리더 사용자는 헤더라는 텍스트가 배너에 위치해 있고, 내비게이션 자리에 내비게이션이라는 텍스트라는 내용을 포함한 것으로 인지할 것이다. role 속성의 사용에 유의할 점은 시멘틱 태그와 사용하지 말아야 하며, ..

이미지와 피규어 Index로 이동 이미지와 피규어 메세지 회의실에서 미팅 이미지 요소를 공부하던 중 svg 요소에 들어가는 상세 요소들에 대한 공부가 부족하단 것을 알았다.다음에 svg 요소를 원활하게 사용하는 데에 필요한 요소들을 모두 정리하며 공부하는 것으로 포스팅을 시작해야겠다.img요소결과..

동영상이 무한 재생되는 화면을 만들어 보았다.주제는 나름 한국의 관광지를 설명하는 컨셉의 예제로 꾸며보았다. 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. 전체적인 구동 방식과 레이아웃 설정 사실 그 외에도 배워봐야할 점은 많겠지만 많이 먹으면 배에 탈이나는법..배울 수 있는 양을 배워 확실하게 기록하고 남겨가자! 참고한 사이트는 ..

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