본문 바로가기

html14

HTML/CSS 따라하기 기본 Naver 회원가입 페이지 Clone - Contents 3 안녕하세요 Hynn입니다. 이전 포스팅에서는 유저정보를 입력하는 영역을 완성했습니다. 이제 마지막으로 전화번호를 입력하고, 인증번호를 입력하는 영역, 그리고 가입하기 버튼까지 완성해보도록 하겠습니다. 이미 앞선 포스팅을 따라오셧다면, 이제 어렵지 않게 할 수 있으리라고 생각합니다. 다만 몇가지 추가로 사용되는 Element 나 속성은 같이 설명하면서 진행하도록 하겠습니다. ================================================================== 1. Contents Part3 - Joinnumber 2. Joinnumber - HTML 3. Joinnumber - CSS =================================================.. 2022. 10. 26.
HTML/CSS 따라하기 기본 Naver 회원가입 페이지 Clone - Contents 2 안녕하세요 Hynn입니다. 이전 포스팅에서는 아이디,비밀번호 영역을 완성했습니다. 이제 이름과 같은 유저의 정보를 입력하는 영역을 완성해보도록 하겠습니다. 이미 앞선 포스팅을 따라오셧다면, 이제 어렵지 않게 할 수 있으리라고 생각합니다. 다만 몇가지 추가로 사용되는 Element 나 속성은 같이 설명하면서 진행하도록 하겠습니다. ================================================================== 1. Contents Part2 - Joinuser 2. Joinuser - HTML 3. Joinuser - CSS ================================================================== 1. Contents P.. 2022. 10. 26.
HTML/CSS 따라하기 기본 Naver 회원가입 페이지 Clone - Contents 1 안녕하세요. Hynn 입니다. 이전 포스팅에서는 Header 영역을 작성했고, 실제 홈페이지와 유사하게 작성했습니다. 이제 메인무대가 되는 회원가입 부분의 Contents 를 작성해보도록 하겠습니다. 개발자는 아무래도 주어진 언어를 가지고 활용하는 직업이 되는것이니 만큼, 이전 포스팅에서 다루었던 Element 위주로 어떻게 활용이 되었는지를 가지고 작성해보도록 하겠습니다. ================================================================== 1. Contents Part1 - Joinidpw 2. Joinidpw - HTML 3. Joinidpw - CSS ======================================================.. 2022. 10. 25.
HTML/CSS 따라하기 기본 Naver 회원가입 페이지 Clone - Header 안녕하세요. Hynn 입니다. 이전 포스팅에서 Layout을 설정했기 때문에, 이제 실제 보여지는 Contents 를 작성해보도록 하겠습니다. 컨텐츠는 이미 이전 포스팅에서 Header, Join_form,Footer 의 3가지 큰 틀로 나누었고, 하나하나씩 분리하여 작성해보도록 하겠습니다. Header 영역에서는 크게 네이버 로고가 표시되고, 로고를 클릭하면, 홈페이지로 이동되는 구조를 가지고 있습니다. 하나의 포스팅에 모든 영역을 작성하면, 글이 길어질 수 있으니, 3가지 영역을 나누어 작성해보도록 하겠습니다. 기존에 다루지않은 Element 에는 각 영역에 설명을 첨부하였으니, 같이 적용해보시면 좋을 거 같습니다. ===============================================.. 2022. 10. 25.
HTML HTML 기본 개념 정리 및 가이드 - Inline Element 안녕하세요. Hynn 입니다. 이번 포스팅에서는 Block Element 에 이어, In-Line Element 를 정리해보도록 하겠습니다. In-Line Element 의 경우 활용도에 따라 불가피하게 추가적인 Display Porperty 설정을 해야 의도한 대로 작성이 되는 경우가 존재하며, 기본적으로는 Display Porperty 에서 어떠한 성질을 가지고 있는 Element 인지를 이해해야 올바른 작성이 가능합니다. In-Line 속성을 가진 HTML Element 는 이후에 다루게 될 CSS에서 Width(넓이), Height(높이) 를 설정할 수 없습니다. 이를 위해 Display Porperty 설정을 추가로 해야하는데, 본 포스팅에서 같이 다루어보도록 하겠습니다. ============.. 2022. 10. 21.
HTML HTML 기본 개념 정리 및 가이드 - Block Element 안녕하세요. Hynn 입니다. 이 글에서는 이전 포스팅에서 설명한 Block과 Inline의 개념을 바탕으로 둔 각각의 Element 를 정리하고, Element 별 주로 사용되는 형태에 대해서 설명하도록 하겠습니다. Block Element 이전 포스팅에서 설명했듯이 한 줄 영역 전체를 차지하는 Block 형태의 Element를 먼저 정리하도록 하겠습니다. 이 Porperty 유형 별의 Element 를 이해하지 않고 사용한다면 HTML로 구현하는 웹 사이트의 영역 정리가 불가할 수 밖에 없기 때문에 사용자는 이를 반드시 인지하고 작성을 해야 올바른 웹 페이지를 구현할 수 있습니다. Block 속성을 가진 HTML Element 는 이후에 다루게 될 CSS에서 Width(넓이), Height(높이) 를.. 2022. 10. 21.