22,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결초보자를 위한 HTML 기초
input 과 label 의 작성 순서
안녕하세요~ 이번 피자주문 form 예시를 보다보니 사이즈/토핑추가의 경우 input 이 label 보다 앞서서 작성되어있는데, 추가 요청 사항 영역은 label 이 textarea 보다 우선해서 작성되어있더라구요. label 의 위치는 입력요소의 종류에 관계없이 작업자가 원하는 위치(두 요소를 나란히 작성한다는 가정하에)에 작성해도 괜찮은 것인가요? 또 input (textarea)과 label 요소 사이에 div 등 다른 요소가 작성될 수도 있나요?
- 미해결초보자를 위한 HTML 기초
a 링크의 href 속성
안녕하세요~ 한가지 궁금한점이 있어서 질문 드립니다. a 태그에서 href 속성은 필수가 아니라고 말씀주셨는데요. href 속성이 없으면 탭을 사용하여 페이지 이동(?)시에 a 링크 영역이 잡히지 않더라구요. 접근성을 생각하면 href가 필수일 것 같은데 비활성화 상태일때만 없어도 된다는 의미로 이해하면 될까요?
- 미해결초보자를 위한 HTML 기초
리액트에서 picture 사용법
혹시 리액트에서 picture, source를 사용하는 방법을 아실까 해서 질문 남겨봅니다. 아래 코드와 같이 리액트에서 응용해보았는데, 화면에는 이미지가 나오지 않습니다. img 태그를 썼을 때는 정상적으로 보입니다. import React from 'react'; import Image1 from './images/image.png'; import Image2 from './images/image@2x.png'; import Image3 from './images/image@3x.png'; function App() { return ( <picture> <source src={Image1} srcSet={`${Image2} 2x, ${Image3} 3x`} type="image/png" /> </picture> ); } export default App; 그리고 지금은 source의 src에 기본 이미지를, srcSet에는 화소 밀도가 두배, 세배인 이미지를 넣는 방식으로 사용하였는데,src를 사용하지 않고 srcset에만 모두 넣어 사용이 가능한지도 궁금합니다.예를 들어, <picture> <source media="(min-width: 45em)" srcSet="large.jpg, large-hd.jpg 2x" /> <source media="(min-width: 18em)" srcSet="med.jpg, med-hd.jpg 2x" /> <source srcSet="small.jpg, small-hd.jpg 2x" /> <img src="small-1.jpg" alt="rwd" /> </picture> 이렇게 사용이 가능한지 알고 싶습니다.
- 미해결초보자를 위한 HTML 기초
section 내에서 여러요소를 그룹핑해야 되는 상황에 대해 질문드립니다.
section 내에서 여러요소를 그룹핑해야 될 때, section 안에 section을 넣을 수 있나요? 아니면 div(예 : div1, div2, div3)로 사용하는게 좋을까요? 예를 들어, 아래와 같은 코드에서요!
- 미해결초보자를 위한 HTML 기초
dialog 미지원 브라우저를 위한 fallback 관련 질문입니다
만약, dialog를 사용할 경우, 미지원 브라우저를 위한 fallback을 사용하면 된다고 하셨는데, 혹시 코드로 예시를 알려주실 수 있나요?
- 미해결초보자를 위한 HTML 기초
React의 컴포넌트 개발과 시맨틱 구조 작성의 연관성에 대해 궁금한 점이 있어 질문드립니다.
덕분에 HTML 에 대한 오해를 풀고 HTML에 대해 흥미가 생겼습니다. 정말 감사합니다 :) 완강하고 나니, 한가지 궁금한 점이 생겼습니다. React를 개발하다보면 재사용 가능한 컴포넌트를 만들기 위해 노력하는데, 여기서 배운 요소들을 사용하면서 시맨틱한 구조로 짜려는 노력이, 재사용 가능한 컴포넌트 만들기 위해 도움이 되는 것 같은데, 제가 제대로 이해한게 맞나요?
- 미해결초보자를 위한 HTML 기초
tr 요소 내에 th, td 혼용 관련 질문입니다
tr 요소 내에 th와 td 요소 혼용해서 써도 괜찮나요? 강의 1:19 정도쯤 보면, tr 요소 내에 th, td를 혼용해서 쓰시는데, 오타인지 아니면 이렇게 쓰일 수 있는지 궁금해서요!
- 미해결초보자를 위한 HTML 기초
시맨틱 구조 관련해서 질문있습니다.
안녕하세요? 시맨틱 구조 관련해서 질문있습니다 :) 디자이너가 디자인한 페이지 기준으로 마크업을 하게 될 때, 시맨틱 구조 잡기에 유용한 태그이지만, 화면에 보일 필요가 없는 태그(예 : h 태그 등)에 대해서는 일단 추가하고 안보이게 하나요? 아니면 아예 디자인된 페이지에 없으니까 추가 자체를 하지 않나용?ㅎㅎ
- 미해결초보자를 위한 HTML 기초
details 엘리먼트의 이점에 대해
<details> 엘리먼트에 대해 질문이 있습니다. 아코디언식 UI부분에 details 엘리먼트를 사용해보려고 합니다. 그래서 div 엘리먼트를 사용해 구현할 때와 비교하여, details 엘리먼트의 이점을 생각해보았습니다. 1. details가 상세정보를 포함하는 영역이며, 내부의 내용이 상세 정보임을 명확하게 나타낸다. 2. summery 부분을 클릭하면 자동으로 상세정보 영역이 토글되므로, 별도로 click event를 설정할 필요가 없다. 이 외에 또 다른 이점이 있을까요?
- 해결됨초보자를 위한 HTML 기초
address 요소 설명 중 궁금한 것이 있어서 질문드립니다.
- 스펙 문서를 보면 중에 https://html.spec.whatwg.org/multipage/sections.html#the-address-elementaddress의 요소에 대한 관한 설명을 보면 연락처 정보를 나타낸다고 나오는데 , 그 중에서 연락처 정보(contact information) 외 이외의 다른 정보를 담으면 안된다고 해서요.아래는 스펙 문서 내용입니다. ------------------------------------------------------------------------------------------------------------------- The address element must not be used to represent arbitrary addresses (e.g. postal addresses), unless those addresses are in fact the relevant contact information. (The p element is the appropriate element for marking up postal addresses in general.) The address element must not contain information other than contact information. -------------------------------------------------------------------------------------------------------------------그런데 강의에서는 발행자 정보(작성자명, 발행일자 등)를 담아낼수 있다고 해서 궁금해서 질문합니다.
- 미해결초보자를 위한 HTML 기초
자바스크립트를 이용할 때 button type 지정에 관한 궁금증
안녕하세요! 자바스크립트를 사용하여 정보 전송을 제어할 때, 전송 button의 type을 "button"으로 지정하라는 부분과 관련해 궁금한 점이 있습니다. button의 type을 submit으로 지정할 경우, 해당 버튼 클릭, 엔터키 입력 그리고 스페이스바 입력 등 form에 대한 모든 submit 이벤트를 유발하는 동작이 유효해지더라구요. 그래서 저는 종종 button의 type을 submit으로 지정하고, form의 submit 이벤트에 event.preventDefault 메서드로 본래의 동작을 막은 후 원하는 자바스크립트 코드를 실행시키고는 합니다(아래 예시). 이 경우에 어떤 문제가 있을 수 있을까요? document.querySelector('form').addEventListener('submit', (e) => { e.preventDefault(); // 원하는 동작을 수행하는 코드 })