다시 쓰는 이력서 by 동퐈

요소는 옵션 선택 메뉴를 제공하는 역할을 한다. 기본적으로 내부요소인 을 가지며 옵션에 개수에 따라 선택할 수 있는 드롭다운 목록이 나타나게 된다. 요소를 id로 묶어서 연관성을 나타낼 수 있다. 반려동물 강아지 고양이 토끼 햄스터 을 사용해서 옵션 그룹을 생성해서 옵션을 분리할 수 있다. 에는 selected라는 속성을 부여해서 기본 선택값으로 사용할 수 있다. 반려동물 --좋아하는 애완동물을 선택하세요-- 강아지 고양이 토끼 햄스터 ..

은 클릭 가능한 버튼을 생성하는 요소를 나타낸다. 내부에서 사용하면 사용자 입력 내용을 action속성에 정의된 URL로 전송하는 역할을 하지만 그 외에도 입력 정보를 리셋하거나 javascript의 이벤트 처리 등 다양한 작업을 수행하기도 한다. 요소에도 type="submit"을 통해 동일한 역할을 부여할 수 있지만 텍스트 외에 다른 이미지 등을 넣을 수 없어 다양한 UI요소를 꾸미는데 한계가 있다. 반면 요소는 등을 내부요소로 사용해서 기본 스타일 외에 다양한 버튼 UI를 만들 수 있다. 요소는 type속성을 통해 다양한 역할을 부여할 수 있다.값설명submit태그에 정의된 URL로 사용자 입력값을 전송함reset사용자 입력값 초기화button값 자체는 기능이 없으나 javascript와 함께..

요소는 사용자의 입력 데이터를 서버에 전송하기 위한 컨테이너 역할을 한다. 자식요소로 를 갖는다. 과 요소를 내부에 포함해서 사용자 입력값을 서버에 전송할 수 있다. 은 관련된 입력 필드를 그룹화하는 데 사용된다. 그룹화된 필드 셋은 브라우저에서 하나의 박스 형태로 보기게 된다. 폼의 가독성을 높이고 사용자 입력값과 관련된 필드를 구조화하기 위해 사용한다. 는 안에서 그룹의 제목을 정의하는 데 사용한다.  폼 제목 아이디 비밀번호 요소의 주요 속성 값예시설명action"https://formspree.io/f/xeqwwbwk"데이터를 ..

이미지 요소는 HTML의 이미지 안에서 특정 영역을 클릭했을 때 다른 링크로 연결되도록 하는 기능을 제공한다. 실제 웹사이트 하단에 보면 SNS로 이동하는 링크나 프로모션 상품 링크로 이동하는 경우 이미지맵을 사용하는 것을 종종 볼 수 있다.   요소는 이미지 맵의 컨테이너 역할을 하며 name이나 id 속성으로 이미지 맵의 이름을 정의한다. 이때 사용된 속성값은 의 usemap 속성값과 연결된다. 그다음 태그 안에 태그로 이미지의 클릭 가능 영역을 정의하면 된다.  태그의 주요 속성은 다음과 같다. 속성값설명shaperect (사각형)circle (원형)poly (다각형)default (이미지 전체)클릭 가능한 모양을 정의coordsrect (x1, y1..

요소는 웹 페이지 안에 다른 웹페이지를 삽입할때 사용하는 HTML요소이다.흔하게 유투브 영상을 퍼가는 소스코드를 보면 자주 볼 수 있다. 속성설명src포함할 컨텐츠 경로width가로 크기height세로 크기title컨텐츠의 제목(스크린 리더용)allowfullscreen전체 화면 허용loadinglazy 또는 eager로 로딩방식 제어sandbox보안 제한 설정 소스코드의 allow 속성과 referrerpolicy속성은 웹 표준에 위배되는 속성으로 사용하지 않는것이 좋다. 속성설명 data삽입할 컨텐츠의 경로type파일의 유형 (type="application/pdf")width가로 크기height세로 크기name객체 이름(자바스크립트로 접근 가능)form 요소와 연결하는 id 값

웹브라우저에서 동영상컨텐츠를 제공하고 싶다면 요소를 사용 할 수 있다.   동영상 콘텐츠는 src에는 영상 경로를, type에는 비디오 코덱 속성을 명시하면 브라우저에서 지원하는 코덱에 따라 그에 맞는 영상을 렌더링한다. 주요 속성으로는 controls(컨트롤러 제공), mute(실행시 음소거), poster(썸네일), autoplay(자동재생)가 있으며 자막파일을 제공한다면 요소를 사용해서 자막있는 동영상을 렌더링 할 수도 있다. src 속성으로 자막파일 경로를 명시해주고 kind는 자막의 유형 srclang은 제공언어의 코드 lang은 자막 선택시 표시될 이름을 나타낸다.

이전에 HTML에서 이미지를 다루는 요소 에 관해 알아봤었다. 는 여러 이미지를 그룹화하고 브라우저가 조건에 따라 적절한 이미지를 선택할 수 있도록 하는 컨테이너 요소이다.요소와 함께 사용하며 는 요소 내부에서 다양한 미디어 소스를 제공하기 위해 사용된다. 외에도 태그 내에서도 소스제공을 하기 위한 요소로 사용된다.    태그를 사용하면 HTML로도 반응형 이미지를 구현할 수 있다. 해당 예제에는 기본적으로 해변사진을 보여주고 있다.하지만 태그의 media 속성에 따라 브라우저 크기가 달라지게 되면 srcset 속성에 명시된 이미지로 교체하게 된다.

몇몇 홈페이지를 보면 홈페이지 최하단에 회사 정보가 적혀있는 것을 볼 수 있다.  요소는 이런 정보들을 기입하는 데 사용하는 요소이다.MDN을 살펴보면 요소 안에는 작성 규칙이 정해진 것은 아니고 실제주소, URL, 이메일, 전화번호, SNS, 좌표 등등 다양한 정보와 이 정보를 제공하는 주체가 반드시 포함되어야 한다고 되어있다. 작성 위치 또한 정해지지 않았으며 다른 섹션에서도 사용될 수 있다고 한다.  (주) 여기어때컴퍼니 주소:서울특별시 강남구 봉은사로 479, 479타워 11층 | 대표이사:정명훈 | 사업자등록번호: 742-86-00224 사업자정보확인 전자우편주소:help@yeogi.com ..

텍스트 레벨 요소는 텍스트 정보를 명확하게 표현하기 위해 사용하는 요소들이다.   / : 요소는 위 / 아래 첨자를 표현한다. 수학식, 화학식, 각주, 단위 표시 등에 사용된다.  : abbreviation 요소는 축약어나 약칭을 나타내는 데 사용한다. 이때 title 속성을 사용하여 약어의 내용을 이해할 수 있는 추가정보를 제공할 수 있다. 실제화면에서는 텍스트 아래 점선줄이 표현되며 마우스를 올려놓게 되면 title속성에 작성한 내용을 확인할 수 있다.  : 요소는 날짜와 시간 정보를 표현하는 데 사용된다. 이 요소는 날짜 및 시간의 의미를 명확히 하기 위해 datetime 속성을 사용할 수 있다. time 요소를 사용하면 검색엔진이나 스크린리더가 날짜 시간데이터를 읽을 수 있도록 한다.  : 요소..

섹션을 나누는 요소들은 흔히 시멘틱 태그라고 해서 HTML문서에 구조적인 의미를 줄 수 있는 태그들을 말한다. 도 비슷한 역할을 하지만 아무 의미가 없는 태그기 때문에 구조적인 의미를 갖고 있지 않아 성격적으로 다르다.  : 머리말 (로고, 사이트 소개, 내비게이션 포함 가능) : 내비게이션 (메뉴) : 문서의 주요 콘텐츠 : 주제별 콘텐츠 구분 : 독립적인 콘텐츠 (블로그 글, 뉴스 기사 등) : 부가 정보 (사이드바, 광고 등) : 바닥글 (저작권, 연락처 등) 간단한 예시로 살펴보면 아래와 같이 사용할 수 있다.본문 헤더내비게이션 섹션 헤더 ... 섹션 푸터 섹션 헤더 ... 섹션 푸터 부가 콘텐츠본문 푸터 위 사진은 컨테이너 요소와 섹션 요소의 차이점을..