Dev Diary 💻

[The Web Developer Bootcamp 2024] section 3: HTML 기초

이 글은 udemy의 The Web Developer Bootcamp 2024 강좌를 바탕으로 정리한 내용입니다. 19. 섹션주제skip 20. HTML 개요HTML은 웹 페이지의 명사 같은 것으로 콘텐츠의 구조를 규정하는 것입니다.It’s just about marking up a documentHTML은 웹 펭이지라는 문서에 마크업을 하기 위한 언어 또는 구문입니다.  21. 우리의 첫 HTML Pageskip 22. Tip 모질라 개발자 네트워크 https://developer.mozilla.org/ko/docs/Web/HTMLMDN Web Docs(Mozilla Developer Network Web Docs)는 웹 개발자들이 HTML, CSS, JavaScript 및 웹 기술과 관련된 정보를 얻..

Intro안녕하세요. select element 에서 dropdown icon 바꾸는 방법에 대해 알아보도록 하겠습니다 :)  How to solve problem Option 1 Option 2 Option 3/* Hide the default dropdown arrow */.custom-select { appearance: none; /* For Firefox */ -webkit-appearance: none; /* For Chrome, Safari, Opera */ -moz-appearance: none; /* For Firefox */ background-image: url('custom-dropdown-icon.png'); /* Custom arrow icon */ backgrou..

Intro 안녕하세요. 이번 시간에는 document.getElementsByTagName()를 사용해서 css styles을 업데이트/수정하는 방법에 대해 알아보겠습니다. How to solve the problem 문제 해결을 위한 2가지 예시 코드를 보여드리겠습니다. #1 모든 blockqutoe 태그를 가져와서 길이만큼 loop를 돌면서 스타일을 업데이트 해줍니다. 아래의 코드에선 margin을 0, borderLeft 스타일을 '5px solid rgb(9 9 9)'로 수정해줬습니다. function changeBlockquote() { let li_tags = document.getElementsByTagName('blockquote'); for (let i = 0; i < li_tags.le..

Intro 안녕하세요. Input tag를 이용하여 사용자의 password 입력을 받아내는 코드에서 아래와 같은 오류가 발생했습니다. Input elements should have autocomplete attributes (suggested: "current-password") 참고로 사용한 코드는 다음과 같습니다. Why? Autocomplete 을 통해 웹 개발자는 양식 필드 값을 입력할 때 사용자 에이전트가 자동으로 지원해야 하는 권한을 지정할 수 있으며, 필드에 예상되는 정보 유형에 대한 브라우저 안내도 제공한다고 합니다. 즉 자동완성 기능이라고 볼 수 있습니다 :) How to solve the problem autocomplete 속성을 넣어줄 경우 해당 오류가 사라지게 됩니다 . htt..

Intro 안녕하세요. Html Input 태그를 사용하던 도중 아래와 같은 에러가 발생하였습니다 . Password field is not contained in a form Why? 구글링을 해보니, Input 태그가 From 태그 안에 위치하지 않아 생기는 문제였습니다. 사실 경고(warning) 표시라서 코드 수정을 해주지 않아도 문제가 되지 않지만, 콘솔창에 계속 warning 표시가 되어있는 것이 마음에 걸리기 때문에 수정을 해보도록 합시다! 🙃 How to solve the problem 아래와 같이 Html 코드를 수정하면 더이상 다음의 오류는 발생하지 않습니다. Conclusion Html은 쉬우면서도 어렵고, 어려우면서도 쉬운 존재인 것 같습니다.😇

Intro input tag 에서 최소값과 최대값을 설정하는 방법에 대해 알아보도록 하겠습니다. Syntax 숫자 (number) : 최솟값 혹은 최대값을 명시함 날짜 (date) : 최솟값 혹은 최대값을 명시함 Example http://www.tcpschool.com/html-tag-attrs/input-min

이 글은 드림코딩 엘리님의 "HTML 태그들, 헷갈리는거 정리해 보았다 🥳" 영상을 바탕으로 정리한 내용입니다. Intro Html은 다른 프로그래밍 언어에 비해서 진입장벽이 훨씬 낮은 마크업 언어이지만, 만만하게 공부하면 어디에서 어떤 태그를 사용해야 하는지 매우 헷갈립니다. 필수로 알아야 하는 시멘트 태그들과 헷갈리는 태그들에 대해 알아보도록 합시다. Semantic Tags (Semantic Markup)? semantic이란 "의미의, 의미가 있는"을 뜻합니다. html에서 div 태그만 이용해서 모든 웹사이트를 만들 수도 있지만, 브라우저도 개발자도 의미있게 이애할 수 있기 위해서는 semantic tags 를 적절하게 잘 사용하는 게 중요합니다. Top level heading Top leve..