jyoon dev log

1. 일반적으로 JavaScript를 불러오기 위해 요소를 요소가 끝나기 직전에 배치합니다. 이유가 무엇인가요? 요소가 끝나기 전에 요소를 작성을 보통 하는 이유는 HTML이 다 파싱되고 난 후에 JavaScript을 적용하기 위해서입니다.HTML이 다 불러와지지 않고, JavaScript를 실행(execute)하기 시작하면 JavaScript 프로그램에서 의도했던 바와 다르게 DOM에서 원하는 HTML 요소를 불러오지 못할 수 있습니다. 이를 방지하기 위해서 JavaScript를 불러오기 위한 요소는 요소가 끝나기 직전에 작성합니다. 2. 요소는 왜 요소의 자식 요소여야만 하나요? 요소는 목록 아이템(list item)을 보여주기 위한 요소입니다.(문제를 정의) 그래서 목록을 담는 요소의 자식 요소여야..

🕊 반응형 웹이란? 반응형 웹 디자인이란 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써, 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미한다. 즉, 하나의 소스 코드로 모든 스크린에 최적화된 웹 사이트를 구축할 수 있는 방법론, 디바이스 종류에 따라 웹페이지의 크기가 자동적으로 재조정되는 것이다. 반응형 웹은 하나의 URL을 기반으로 화면이 바뀐다. 반응형 웹 디자인은 유연한 레이아웃에 대응하여 항상 최적의 화면을 제공함으로써 다양한 스크린 사이즈를 지닌 디바이스에 적응할 수 있다. 특정 장치에 연결이 되는 별도의 URL은 모바일의 경우 대개 m.domainname.com 같은 식으로, 도메인 앞에 모바일을 의미..

브라우저란? HTML 문서 및 그림, 멀티미디어(ex. 동영상) 등의 컨텐츠를 열람할 수 있게 해주는 GUI 기반의 소프트웨어 프로그램 브라우저의 특징과 웹의 동작 원리 브라우저는 사용자가 선택한 자원(Resource)를 서버에 요청(Request)하고, 서버의 응답(Response)을 브라우저에 띄우는(Rendering) 방식으로 동작한다. 사용자가 웹 브라우저를 통해 찾고 싶은 웹 페이지의 URL 주소를 입력한다. DNS 서버에서 사용자가 입력한 URL 주소 중 도메인 네임을 검색한다. 해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달한다. 웹 페이지 URL 정보와 전달받은 IP 주소는 HTTP 프로토콜을 사용해 HTTP 요청 메세지를 생성해 TCP 프로토콜을 사..

Box header footer nav aside main section article div span form Item a button input label img video audio map canvas table inline 공간이 허용하면 그 옆에 다른 태그옆에 배치가 가능하다. Block 한줄에 한 요소만 배치 Cupcakes are delicious 오프닝태그 클로징태그 Cupcakes are delicious : Content Cupcakes are delicious :Element Cupcakes are delicious ↑attribute↑

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN 이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다. developer.mozilla.org https://developer.mozilla.org/ko/docs/Web/HTML/Element Semantic Tags (Semantic markup) 시맨틱 태그 1. SEO : 검색을 최적화 하기 위해서. 이런 키워드를 검색했을 때 이 웹사이트를 추천해줘야겠다고 알수있다. 2. Accessibility: 웹 접근성 때문. 웹 페이지를 음성으로 읽어주는 스크린 리더를 이용하거나 키보드를 이용할 경우에도 문제없이 잘 동작할 수 있어야한다. 3. Maintainability: 개발자들을 위해..

Visual Studio Code HTML문서 작성하면서 모양 확인하기 좋은 확장도구 1. live preview vscode 내에서 확인 원하는 경우 변경내용 저장 전 코드 입력한대로 바로 바뀌는 모습 확인 가능한 익스텐션. 2. live server 브라우저 상에서 확인 원하는 경우 코드 작성후 저장하면 브라우저 새로고침 없이 반영되며 확인 가능하다. 3. Auto rename tag 여는 태그 한쪽만 수정해도 닫는 태그도 수정되는 익스텐션.