본문 바로가기

CSS10

HTML/CSS - Table 을 사용하여 표 만들기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 HTML/CSS 기능을 활용해서 표, 그리고 웹 페이지에서 자주 보던 게시판을 구현해보도록 하겠습니다. 게시판 구현에 사용되는, HTML Element, CSS 기본 활용을 포함하고 있으며, 이 활용은 가장 기초적인 방법을 사용하였으므로. 실제 방법은 더 다양하고 ,간결할 수 있습니다. 그럼 시작해보겠습니다. =========== 1. 표, 게시판 사용에 이용되는 Element 2. HTML - 기본 작성 예제 3. CSS - 기본 작성 예제 =========== 1. 표, 게시판 사용에 이용되는 Element Element 명칭 설명 Table Element 를 사용하여 행과 열로 이루어진 표를 나타냅니다. Table 에서 행을 만듭니다. Table 에서.. 2022. 11. 21.
JavaScript 실습예제 - Lotto JavaScript 코드 효율화 안녕하세요. Hynn 입니다. 이전 포스팅에서 코드의 효율성을 위해 JavaScript 를 효율적으로 작성하기 위한 예제를 게시한 바 있습니다. 이번 포스팅에서는 효율적으로 작성한 JavaScript 코드를 작성하는 방식에 대해서 해설이 있다면, 저도 기억하기가 좋고, 다른 분들께서도 좋은 참고자료가 되었으면 합니다. 그럼 시작해보겠습니다. ============== 1. JavaScript 작성 2. 해설본 ============== 1. JavaScript 작성 const btn = document.querySelector('#submit') const LottoDisplay = document.querySelector('#lottonum') const LottoBox = document.queryS.. 2022. 11. 10.
JavaScript 실습예제 - Lotto 번호 생생 웹 페이지 만들기 안녕하세요. 이전 포스팅에서 작성한 여러개의 기능을 사용하여, 이제 Lotto 번호 생성기를 만드는 예제를 작성해보겠습니다. 각 페이지 단계별로 설명을 첨부하였으니, 참고하시면 도움이 될 것이라고 생각합니다. 그리고, 코드를 조금 더 간추린 버전을 설정하여, 페이지 하단에 기재했으니, 참고하시면 좋을 거 같습니다. 이에 대해서는 별도의 설명을 하지 않겠습니다. ========================== 1. Lotto 번호 만들기 - HTML 2. Lotto 번호 만들기 - CSS 3. Lotto 번호 만들기 - JavaScript 4. 코드 정리하기 ========================== 1. Lotto 번호 만들기 - HTML 먼저 HTML은 간촐하게 작성합니다. 먼저 영역을 설정하기 .. 2022. 11. 10.
HTML/CSS - Display Flex 에 관하여 안녕하세요. Hynn 입니다. Display 속성에서 이전에 Block, Inline, Inline-block 에 대해서 다루었던 적이 있습니다. 하지만 별도로 이 포스팅을 작성하는 이유는, 기존의 Block, Inline 에 이어서, 이 개념은 별도로 작성해야, 이해가 더 좋을 것이라고 생각되어 별도 작성을 하게 되었습니다. 작성자가 가장 중요하게 HTML/CSS 에서 생각하는 점은, 컨텐츠의 작성방법도 중요하지만, 본질적으로 가장 중요한 영역은 Layout 을 설정하는 단계가 가장 중요하고, 이 단계가 완벽히 이루어져야, 이후의 Contents 작성에서 스스로 진행을 하기가 가장 원활하다고 판단되기 때문입니다. 그럼 Display Flex 에 대해서 알아보도록 하겠습니다. ===============.. 2022. 10. 28.
HTML/CSS 따라하기 기본 Naver 회원가입 페이지 Clone - Footer 안녕하세요 Hynn입니다. 이제 마지막 단계만을 남겨두고 있습니다. Footer 라고 하는 영역은, 특별한 정보라기 보다는, 각 회사의 이용약관,정보 및 연락처등이 포함된 Information 영역입니다. 하지만 이전에 Block 성질의 Element 를 학습하면서, 이러한 유형들을 몇가지 살펴본 바 있습니다. 그 중 Header, Footer 는 일반 홈페이지에서도 많이 보이는 영역이기 때문에, 용어에 익숙해지면 도움이 되리라 생각합니다. 원래는 어제 업로드가 됬어야 했지만 몸의 신호로 긴급하게 병원을 다녀오다 보니 작성이 늦었습니다. 그럼 마무리해보도록 하겠습니다. ================================================================== 1. Footer.. 2022. 10. 28.
HTML/CSS 따라하기 기본 Naver 회원가입 페이지 Clone - Contents 3 안녕하세요 Hynn입니다. 이전 포스팅에서는 유저정보를 입력하는 영역을 완성했습니다. 이제 마지막으로 전화번호를 입력하고, 인증번호를 입력하는 영역, 그리고 가입하기 버튼까지 완성해보도록 하겠습니다. 이미 앞선 포스팅을 따라오셧다면, 이제 어렵지 않게 할 수 있으리라고 생각합니다. 다만 몇가지 추가로 사용되는 Element 나 속성은 같이 설명하면서 진행하도록 하겠습니다. ================================================================== 1. Contents Part3 - Joinnumber 2. Joinnumber - HTML 3. Joinnumber - CSS =================================================.. 2022. 10. 26.

티스토리툴바