다시 쓰는 이력서 by 동퐈

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

HTML의 컨테이너 요소는 레이아웃을 구성하고 스타일이나 스크립트를 적용하기 위해 그룹화하기 위해 사용하는 요소이다.  : division 아무런 의미를 갖고 있지 않는 태그다. 블록 레벨 요소를 가지고 레이아웃을 나누는 데 사용된다. : div와 동일하게 아무런 의미를 갖지 않는 태그다. 인라인 레벨 요소를 가지고 텍스트나 다른 인라인 요소를 꾸미기 위해 사용한다. 블록 컨테이너 요소 div는 블럭 레벨 요소로 레이아웃을 나누기 위해 사용합니다. 예제에서는 두개로 나눠진 레이아웃을 확인 할 수 있습니다. 인라인 컨테이너 요소 AI 코딩도구 윈드 서퍼 커서 코파일럿 , , , , , , 도 컨테이너 요소로 사용한..

은 행과 열을 나타내기 위한 마크업 요소이다.기본 자식요소로 를 갖는다.  : 테이블의 제목을 담당 : table row 테이블의 행을 의미 : table header 테이블 셀의 제목 : table data 테이블 행에 들어가는 내용 위 내용을 토대로 테이블을 만들어보면 이렇게 된다. 테이블 제목 셀 제목1 셀 제목2 셀 제목3 셀 제목4 셀 내용1 셀 내용2 셀 내용3 셀 내용4 셀 내용5 셀 내용6 셀 내용7 셀 내용8  HTML에서 표를 그리..

블록 인용문 우리가 할 수 있는 노력은 과정이 전부야. 결과는 우리 손안에 있는게 아니야. 결과까지 서너개 넣으려다 보니까 무리수를 두는 거야 드라마 <미생> 중에서  책이나 연설문, 논문의 일부 내용을 인용할 때 와 요소를 사용한다.는 텍스트가 긴 문장을 인용할 때 사용한다. 를 사용하면 자동으로 들여 쓰기가 적용되며 CSS margin 속성으로 들여 쓰기 간격을 바꿔줄 수 있다.출처 정보를 명시해야 할 때 를 사용한다. 과 시각적으로는 동일하지만 다른 성격을 가지고 있다.cite는 속성으로도 사용하는데 링크를 걸거나 시각적으로 보이지는 않지만 SEO나 스크린 리더등 웹표준과 웹 접근성 방면에서 이점을..