Textarea 📌 멀티라인 일반 텍스트 편집 컨트롤을 나타낸다. cf. 는 간단한 한 단락의 글만 가능하다. 속성 autocomplete 컨트롤 값이 브라우저에 자동으로 완성될 수 있는지의 여부를 나타낸다. (on/off) autofocus 페이지가 로드됐을 때, 포커스를 오버라이드(ex. 사용자가 다른 컨트롤 폼에 타이핑)하지 않는다면, 폼 컨트롤이 입력 포커싱될지 지정한다. 이때, 문서에서 오직 하나의 폼 관련 요소만 이 속성이 지정될 수 있다. cols / rows textarea의 너비/높이를 지정한다. (CSS에서 height, width로 더 손쉽게 지정 가능) disabled 사용자가 컨트롤과 상호작용할 수 없도록 한다. maxlength / minlength 사용자가 입력할 수 있는 문자..
Radio 📌 임의의 그룹 내에서는 여러 값 중 단 하나만 선택할 수 있다. 👉 name : name의 값이 같은 것 중 하나를 선택한다. 👉 value : 선택했을 때 전달될 값을 나타낸다. 👉 checked : 해당 버튼을 선택된 상태로 만든다. radio 버튼은 체크박스 버튼과 달리 선택을 해제할 수 없다. Checkbox 📌 사용자가 여러 선택 사항 중에서 하나 이상의 값을 선택할 수 있게 한다. 👉 name : 전달할 값의 이름을 나타낸다. 👉 value : 전달할 값을 나타낸다. value 속성이 생략된 경우 기본 값은 on이다. 👉 checked : 해당 버튼을 선택된 상태로 만든다. Select 📌 특성 multiple : 다수의 항목을 동시에 선택할 수 있도록 한다. (윈도우는 ctrl ..
기본 구조 📌 사용자로부터 인풋(Input)을 받기 위한 태그 form 요소 스타일링 시 모든 elements의 유효성을 나타내는 CSS의 :valid와 :invalid 의사 클래스를 사용할 수 있다. 1) action (필수) 📌 action="API 주소" 해당 form을 처리할 로직이 있는 API의 서버 쪽에 접근 가능한 URL을 명시한다. , , 요소의 formaction 특성으로 재정의할 수 있다. [참고] formaction 이 제출 버튼인 경우, 제출한 정보를 처리할 URL을 명시한다. URL을 지정한 경우, 버튼의 양식 소유자가 가진 action 특성보다 우선한다. 양식 소유자가 존재하지 않으면 영향을 주지 않는다. 2) method (필수) 📌 method="GET | POST" 양식을 ..
blockquote 📌 인용 내용 어떤 문단이나 내용 전체가 하나의 인용문일 경우 사용한다. q보다 더 많이 사용하는 편이다. 주로 들여쓰기를 한 것으로 그려진다. 인용문의 출처 URL은 cite 특성으로 나타낸다. q 📌 문장 내에 작게 들어가는 인용문이 있을 경우 (별도 블록을 쓰지 않아도 될 짧은 인용문) 사용한다. 대부분의 브라우저에서 앞과 뒤에 따옴표를 붙여 표현된다. 인용문의 출처 문서나 메시지, URL은 cite 특성으로 나타낸다. [참고] cite 📌 저작물의 출처를 표기할 때 사용한다. 보통 브라우저에서 기울임꼴로 그려진다. 인용 및 출처 표기 예시 전체가 하나의 인용문으로 로 감싸준다. 태그를 이용해 문단 별로 나눠준다. 문서 내 짧은 인용문은 태그를 통해 나타낸다. 👉🏼 큰 따옴표를 ..
정의 목록을 사용하는 경우 1. 용어를 정의할 때 2. key-value로 정보를 제공할 때 Coffee Black hot drink Milk White cold drink 정의 목록을 사용하는 이유 단순히 용어 정의 시 사용할 수도 있지만 key-value 형태의 정보를 전달 할 때 , 보다 훨씬 더 풍부한 의미를 전달할 수 있기도 하다. 보통 손으로 필기할 때, 어떤 용어에 대한 정의를 나타내는 경우 콜론(:)이나 세미콜론(;)을 사용하곤 한다. 하지만 HTML 문서를 작성할 때는 콜론이나 세미콜론으로 나타낸다고 해서 브라우저가 용어에 대한 정의라고 이해하지 않는다. 그렇기 때문에 브라우저가 이해할 수 있도록 아래의 태그를 사용하여 용어에 대한 정의를 하고 있음을 나타내는 것이다. dl == desc..
ol 📌 Finishing places of contestants not in the winners’ circle: Speedwalk Stu Saunterin’ Sam Slowpoke Rodriguez == ordered list 순서가 중요한 목록 (ex. 요리법, 실시간 목록 등...) 보통 숫자 목록으로 표현된다. 특성 reserved : 내부에 지정한 항목이 역순으로 배열된 것인지 나타낸다. start : 항목을 셀 때 몇 번째 항목부터 시작할 것인지 나타낸다. type : 항목을 셀 때 사용할 카운터 유형을 나타낸다. 👉🏼 a, A, i, l, 1 (기본값) ul 📌 first item second item second item first subitem second item second subi..
이미지 📌 src(source) 이미지 링크 alt(alternative text) 스크린 리더 등을 이용하는 사용자 또는 이미지를 제대로 이해하지 못하는 검색 엔진을 위한 대체 텍스트이다. 해당 이미지를 묘사해주는 내용이 150자 이내로 들어가야 한다. 텍스트 이미지의 경우 해당 텍스트를 반드시 포함해야 한다. 리스트 앞에 나오는 불릿같이 아무 의미 없이 꾸미는 이미지일 경우, 오히려 alt의 속성 값을 비워두는 것이 좋다. 이때, alt의 속성 자체를 사용하지 않으면 비 표준이다! 이미지 alt값이 이미 나온 텍스트와 완전히 동일한 텍스트를 넣는 것은 지양해야 한다. 스크린 리더로 읽을 때 이전 텍스트와 같은 말을 반복하기 때문이다. title 속성은 절대 alt 속성을 대체할 수 없다. title은..
📌 a 태그에는 href attribute를 반드시 명시해야 한다! href = hypertext(HTML 문서, 웹 페이지) reference (주소값, 참조) 👉🏼 어디로 이동할지에 대한 상세 속성을 정의한다. href 주소값 표기 방법 1. 웹 URL 웹 페이지 주소 또는 상대경로 2. 페이지 내 이동 [참고] 현재 페이지의 최상단으로 이동하는 링크 📌 href="#top" 또는 href="#" 3. 메일 쓰기 📌 4. 전화 걸기 (모바일) 📌 [참고] 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타낸다. address 요소의 콘텐츠가 제공하는 연락처 정보는 현재 맥락에 적절한 아무 형태나 취할 수 있으며, 물리적 주소, URL, 이메일 주소, 전화번호, SNS 식별자, 좌..
em 📌 주위 텍스트에 비해 강조된 부분을 나타내며, 주로 기울임꼴을 적용해 표현한다. 이때, 단순히 기울임꼴이 필요해서 을 사용하면 안된다! 이 경우에는 CSS의 속성으로 효과를 부여해야 한다. 과 콘텐츠를 강조할 때 사용한다. ex. Just do it already! / We had do someting about it! 👉🏼 이 문장을 읽는 사람이나 소프트웨어는 기울임꼴 부분에 강세를 두고 말하게 된다. 외국어나 등장인물의 생각 등 일반적인 산문에서 벗어난 경우 사용한다. ex. The Queen Mary sailed last night. 👉🏼 Queen Mary를 강조한다거나 중요하게 취급하는게 아니다. 다만 Mary가 여왕의 이름이 아닌 Queen Mary라는 이름의 선박을 나타내기 위해 기울..
