html+Css

네이버 클론코딩 후기 안녕하세요 이번에 네이버 클론코딩을 하면서 느낀 점, 좋았던 점, 보완하고 싶은 점을 공유하고자 합니다. 느낀점 네이버 클론코딩을 하면서 HTML과 CSS의 기본적인 개념을 다시 한번 정리할 수 있었습니다. 또한, 실제 웹사이트를 클론하면서 시각적으로 어떻게 표현할 수 있는지 배울 수 있었습니다. 특히, 그리드와 flexbox를 사용하여 웹사이트의 레이아웃을 조정하는 방법을 배웠고, 이것이 웹사이트의 디자인에 큰 영향을 미칠 수 있다는 것을 알게 되었습니다. 좋았던 점 네이버 클론코딩을 하면서 가장 좋았던 점은 내가 직접 코드를 작성하여 웹사이트를 만들 수 있다는 것입니다. 처음에는 어려웠지만, 차근차근 개발자도구를 눌러 어떤식으로 작성할까 고민을 하다보니 어느새 웹사이트를 완성할 ..

이글은 첫번째 부분은 아래링크에서 확인할수있습니다. https://kjh0811.tistory.com/35 네이버 클론 코딩(1) 포스팅에서는 상단 아이콘과 검색창을 클론해봤습니다. 이번 포스팅에서는 검색창 하단에있는 아이콘들과 메인창 섹션을 나눠볼 예정입니다. 메일 카페 블로그 쇼핑 뉴스 증권 부동산 지도 웹툰 위 코드와 같이 html에서 li태그 , a태그, div태그 ,span태그를 활용하여 html 구조를 만들었습니다. 주요 css 정리 **display** display 속성은 요소의 렌더링 방법을 지정합니다. display 속성의 값은 다음과 같습니다. * block: 요소를 블록으로 렌더링합니다. 블록은 줄 바꿈을 생성하는 요소로, 화면의 너비를 가득 채웁니다. * inline: 요소를 인라..

이번 포스트에서는 제가 네이버 프론트 페이지를 클론 코딩하는 과정을 기록하려고 합니다. 네이버는 한국에서 가장 인기 있는 검색 엔진 중 하나로, 깔끔한 디자인과 여러 기능들이 사용자들에게 많은 정보를 제공합니다. 이 프로젝트를 진행하면서 HTML, CSS 를 활용해 네이버의 프론트 페이지를 완벽하게 재현해 보겠습니다. 우선 클론코딩하기전 페이지가 어떤식으로 구성되어있는지 나눠봤습니다. 가로 세로 div 넣을 위치를 미리 파악하기위해 개발자도구를 통해 큰 틀을 확인하였습니다. 보통 가로부터 구분을하지만 웹사이트의경우 예외로 컨테이너가 가운데로 작업을 하려면 세로를 구분시작해놓고 작업을하는게 낫다고 생각하여 세로선 작업이후 상단의 3개의 아이콘과 검색창을 구현했습니다. div태그와 id를 이용하여 html ..

VS Code(Visual Studio Code) Microsoft에서 개발한 대중적이고 강력한 코드 편집기입니다. 가볍고 확장 가능하며 다양한 프로그래밍 언어와 프레임워크를 지원합니다. VS Code를 설치하고 설정하는 과정을 안내하고 생산성을 높이는 몇 가지 필수 플러그인을 소개하겠습니당~~~~ Visual Studio Code 설치 방법 Visual Studio Code 공식 웹사이트에 접속합니다. 다운로드 페이지에서 운영체제에 맞는 설치 파일을 다운로드합니다. 다운로드한 파일을 실행합니다. 설치 과정을 따릅니다. 설치가 완료되면 Visual Studio Code를 실행합니다. 초기 설정 Visual Studio Code를 실행한 후, 왼쪽에 위치한 사이드바에서 Extensions(Ctrl+Shif..