hyeeoooook 님의 블로그

HTML 구조화HTML의 header부분이 매번 같은 코드가 반복되어 이를 분류하여 재사용하기로 하였다.수정전 개인 개발 블로그 개발 블로그 ..

기존 포스팅에 앞서 트위터의 로그인 페이지에서 부족했던 부분들을 수정하고 전체적으로 정리하였다. 2025.12.13 - [Front-End/HTML] - HTML - 트위터 클론 코딩 - 11. a태그 추가 target="_blank"로 새창 띄우도록2. Footer 내용 동적 렌더링3. CSS 모듈화(버튼)4. 버튼 및 로그인 안내문 등 문서 전체 컴포넌트화 HTML 저번 포스팅보다 훨씬 간결하고 눈에띄게 깔..

트위터 URL : https://x.com/?locale=ko트위터의 회원가입페이지를 클론코딩 해보았다. HTMLHTML Happening now Join today. ..

a태그를 이용하여 내가 원하는 위치로 이동하도록 하는 방식은 흔히 볼 수 있는 기술이다. HTML 1로 이동 2로 이동 3로 이동 4로 이동 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, blanditiis perferendis totam, ducimus incidunt obcaecati in saepe tempore fugit veritatis ea voluptates illo vel, sint a! Voluptatum, sunt nisi! Eaque. Suscipit, in nesciunt voluptatem consequun..

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

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

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..

: 웹 문서의 맨 윗부분, 웹 사이트 로고, 로그인, 회원가입, 사이트맵, 언어 선택 등이 들어감 : 문서의 navigation, 메뉴, 리스트와 링크(ul, li, a) : 문서에서 관련 있는 내용을 묶음 : 독립적인 내용, 뉴스 기사나 블로그 내용 등 : 본문 글과 연관성 없는 내용(광고, 위젯 등) : 주소, 연락처, 저작권 등Sementic(=의미론적)sementic, non-sementic 두 가지로 분류된다. 먼저 Sementic이란 어원대로 의미가 맞아야 한다는 뜻이다.즉, 의미있는 부분을 의미에 맞게 태그를 사용하는 것을 말한다.이때 검색엔진은 정보를 수집하는데 이것을 크롤링이라고 한다.크롤링 과정에서 로봇은 HTML 코드만에 의지하며 정보 수집을 시행해야 하는데, 이때 확인하는 것이 Se..