select 태그 : 드롭다운으로 목록에서 옵션을 선택 할 수 있습니다. optgroup : select 내 옵션을 그룹화 하는데 사용됩니다. 의 속성 그룹에 대한 레이블을 나타내는 label 그룹 내 옵션들을 비활성화할 수있는 disabled 가 있습니다. option : select 리스트의 옵션을 정의합니다. 의 속성 옵션에 대한 레이블을 나타내는 label (아래 예시 코드에서 포메라니안에 label 로 사용) 옵션을 비활성화할 수있는 disabled 기본적으로 선택 상태로 두는 selected 서버에 보낼 값을 지정할 수 있는 value가 있습니다. 동물 선택 진돗개 시바 코숏 렉돌 혹시 햄스터? select 태그 내에서 option 태그 사용 시, label을 사용하던, option 태그 내 ..

웹 표준이란 우리가 css 스타일을 적용하기 전에도 html 만으로도 어디에 쓰이는지 명확하게 명시 되어있어야하고, 태그는 의미에 맞게 사용해야한다. 웹 접근성 4대 원칙에 대해서 알아보자 웹 접근성 검사하기 https://validator.w3.org/#validate_by_input The W3C Markup Validation Service Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website. validator.w3.org 웹 접근성이란 사용자의 ..

label 태그 : 요소의 제목 / 타이틀 처럼 이름표를 나타내기도 하고, input 태그 및 여러 컨트롤 요소들을 label로 감싸 함께 사용하며, 접근성을 높이며, 가독성을 높이는 역할도 합니다. 아래 컨트롤 요소들과 함께 사용할 수 있습니다. label의 속성 for : 함께 사용 될 input 등의 태그에서 사용하는 id값을 label의 for 값에 넣어주어 두 태그의 상관관계를 나타냅니다. form: form 태그를 사용하고, 디자인적이든 어떤이유로든 해당 form 밖에서 label을 사용 시 form 속성을 사용하여 관계를 명시하여주고, 접근성을 향상 시켜줍니다. 회원가입 약관 필수약관 선택약관 전체 동의 필수 약관만 동의 선택 약관만 동의 label 태그가 form 태그 밖에 있지만 form..

figure / figcaption : 독립적인 콘텐츠를 표현 / 콘텐츠와 설명 등 : figure 요소에 대한 설명 test 이미지에 대한 캡션 티스토리 블로그에서도 이미지 아래 설명하는 부분에도 사용되고 있는 것을 개발자 도구를 통해 알 수 있었습니다! mark : 강조 하고 싶은 영역에 태그를 감싸 강조 효과를 줄 수 있음. (형광펜 효과랄까요?) 강조하고 싶은 부분에 강조 할 수 있음 아래와 같이 노란 색으로 효과가 적용 되었습니다. 기본 스타일은 노란 색이네요! background-color로 강조 배경색을 바꾸고, color로 폰트 색상을 바꿀 수 있습니다. abbr text에 약어를 추가 할 수 있다. title 속성에 설명을 넣어주면 됩니다. 커서를 JMTGR 올리면 설명 캡션이 생겨요! ..

Server side Rendering | SSR 특징 - 서버에서 html 콘텐츠가 생성되어 클라이언트에 전송 됨 - 그래서 초기 화면이 빠르게 보여진다. - 이후 javascript가 읽히기 때문에 실제 인터렉션은 자바스크립트가 불려지고 나서 가능하다. 큰 흐름은 이렇습니다. 요청(사용자가 페이지 요청) ▶ 서버(화면에 필요한 DB 혹은 API에서 필요한 데이터를 준비) ▶ HTML 렌더링(사용자로 부터 요청된 페이지에 대한 HTML을 동적으로 렌더링) ▶ 응답 (렌더링 된 HTML을 클라이언트로 보냄) ▶ 브라우저에 표시(브라우저는 HTML을 수신하고 즉시 사용자에게 html, css, jacascrip 순서로 페이지에 보여줌) 장점 초기 로드 시간이 빠름(서버에서 필요한 HTML 먼저 렌더링 해오..

1. block 태그 대표적인 블록 요소 , 등등... 2. inline 태그 대표적인 인라인 요소 텍스트의 기울임 효과 볼드체로 강조 라인의 위쪽에 위치함 기존 텍스트보다 작게 보여짐 밑줄 이거 중간 줄 이거

우선 article 태그의 사용 목적은 독립적인 컨텐츠 유닛을 나타내는 것입니다. 주로 아래와 같은 컨텐츠를 보여줄 때 사용합니다. - 뉴스기사 - 블로그 글 - 댓글 - 상품 카드 - 상품 상세 설명 - 이벤트 정보 - 기타

태그 안에 연락처, 주소 정보가 포함되어있다는 의미론적 태그이고, 태그 내에서 자유롭게 연락처 정보 표시가 가능 이메일 주소 : 이메일 보내기 주소 : 서울시 용산구 한남동 스크린 리더가 표시 된 정보를 보다 명확히 이해를 향상시키는데 도움이 되어 웹 접근성이 향상된다.

쪼리는 HTML 공부중 쪼리는 HTML 공부중 위 예시에서는 아무 일이 일어나지 않지만 아래 예시에서는 HTML 위에 마우스를 올리면 title 속성의 값이 보여진다. HTML 삽입 미리보기할 수 없는 소스 이런 식으로 약어를 사용할 때 문서의 의미를 명확하게 전달 할 수도 있고, 태그를 적절히 활용하면 검색엔진이 해당 키워드의 중요성을 인식하고, 구조와 콘텐츠의 의미를 더 잘 이해할 수 있게 할 수 있습니다.

html의 요소 앵커 요소는 href 특성을 통해 URL로 연결할 수 있는 하이퍼 링크를 만들고, 태그의 href에는 목적지 링크가 있어야합니다. 태그의 속성 1. href 링크로 이동 href의 value는 URL이다. 주로 이동 할 목적지 URL를 사용한다. 하지만 꼭 http 기반 URL 일 필요는 없고, 브라우저가 지원하는 모든 URL을 사용할 수 있다. 현재 페이지에서 링크 이동 현재창에서 링크 이동 새 페이지로 링크 이동 새창에서 링크 이동 여기에서 사용 된 target은 - target : 문서가 열릴 위치를 지정 top과 parent의 차이 새창에서 열림 현재 탭에서 열림 부모 탭에서 열림 최상위 탭에서 열림 - tel : 전화걸기 tel을 사용하여 하이픈이 없이 번호를 넣을 수도 있고, ..