김버그 - html은 재미있다 강의 정리

없음. 그냥 끌리는 대로 쓸 것!<em> 의 경우 기울이기, <strong>의 경우 굵게 표시를 하지만,'브라우저에게 이 부분이 중요하다고 알려주는 것' 이 중요하다!(스타일은 얼마든지 css로 바꿀 수 있다!)결과결과이미 잘 알고 있음.페이지 내에서 해당

form 태그 정리 form 태그 form 태그 형식 > browser에게 form을 쓰겠다고 알려주는 태그! form태그 안에 들어가는 다양한 field들을 알아두자! input 태그 > 입력창, input field (인풋 필드) 라고도 한다 > ⚠ Sy

결과 화면각 줄은 <tr> 태그로 감싸준다각 column의 이름은 <thead>로, 값은 <tbody>로 감싼다<tfoot>의 경우 합계값 등을 사용할 때 쓴다.기타항목 처럼 값이 비어져 있는 경우에도, <td>의 개수를 맞춰 주어야 한다!하

<속성>1\. controls : 볼륨 조절, 구간 조절 등의 기능을 사용할 수 있음.2\. autoplay : 해당 창이 로드되면서 자동으로 재생3\. loop : 재생이 끝나면 자동으로 처음으로 돌아가 재생브라우저에 따라 특정 확장자를 지원하지 않는 경우를 위

실행 화면실행 화면(물리적인) 주소URL이메일 주소전화번호SNS 둘이 비슷하지만 살짝 다르다!: preformatted text'format이 정해지기 전' 이라는 의미이다.실행 화면인덴트까지 반영되어 그대로 표시되는 것을 확인할 수 있다.code를 작성할 때 자주 사

Doctype & Document Structure Document Type Decleration > Document Type Declaration = DTD 선언 = 문서 형식 선언 !DOCTYPE html > '브라우저야, 이 문서는 HTML5 버전으로 작성

Ad Banner HTML 마크업 HTML 코드 결과 화면 > 우선 이렇게 HTML 뼈대를 잘 세우는 것이 중요하다! CSS 입히기 styles.css 결과 화면 > CSS만 잘 입히면 얼마든지 디자인적 요소를 이렇게 넣어줄 수 있다. 우선은 시멘틱한 H

<p> </p> 안의 <div>와 <span>이 html 코드로 인식되지 않게하기 위해서 html escape code를 검색해서 넣어주도록 하자!마찬가지로 semantic한 html 뼈대가 중요하지, css를 입히는 것은 그 이후에 고민해도 되는

FeatureBox.htmlstyles.css그냥 alt=""로 값을 비워둔다. (단 alt속성 자체는 작성해야 함)<img> 태그가 직접적으로 전달하는 정보가 없다고 판단할 경우에는 그냥 css를 활용하여도 된다!

LogoInHeader.htmlstyles.css다시 text를 넣어서 css로 가려주기 보다는, 그냥 alt값으로 해당 text를 넣어주면 된다!

Breadcrumb 부분Pagination 부분styles.cssWeb Accessibility Initiative – Accessible Rich Internet Applications 라는 의미로,인터넷을 사용하는 사람들(특히 시각장애인들의 스크린 리더)이 조금 더

ProductCard.htmlstyles.css한글로 작성된 문서이므로, lang값을 ko로 넣어줌!이미지 다음에 자연스럽게 제목이 읽힐 수 있도록 제목을 우선 배치해 준다.저자 또한 중요한 정보이므로 시멘틱하게 strong 태그를 넣어주도록 한다!스크린리더를 사용하는

receipt.htmlstyles.css제목 안의 from frenchkebab은 그냥 h1 태그 안에서 span으로 감싸주면 된다!나름 중요한 정보 이므로 strong태그로 감싸주도록 하자제목 속의 from frenchkebab과 마찬가지로, span 처리를 해 주도

index.htmlapp.jsstyles.css이 경우, 프로필 사진이 정보 로서의 가치가 있으므로 img태그를 넣어주는 것이지 단순히 이미지라고 해서 넣어주는 것이 아니다!(별 정보가 없을 경우, 그냥 css로 처리해 주어도 되는데 굳이 img태그를 사용해 주는 것이

index.htmlstyles.css이제 좀 form태그 사용하는 것이 편해진 것 같다!

Receipt 😀 html html 코드 결과 화면 😀 css 입히기 css 코드 index.html styles.css app.js 결과 화면 😀 알아갈 점들 😎 마크업을 할 때에는 접어진것 다 펴고 완성본을 기준으로! > 사라졌다 생겼다

Gmail Inbox 😀 html html 코드 결과 화면 😀 css 입히기 css 코드 index.html styles.css app.js 결과 화면 😀 알아갈 점들 😎 보이지 않는 thead도 작성해 두어야 한다! > sr-only 라는

index.htmlstyles.cssapp.js태그 내에 lang 속성을 추가해 주도록 한다!

index.htmlstyles.cssvideo 태그 안에 src 속성으로 넣지 않고, 따로 source 태그를 사용한다!

브라우저가 정보의 위계질서(구조)를 잘 파악할 수 있도록, 개요를 잘 작성하는 것이 중요하다!sectionarticlenavasideheadermainfooter상황에 맞는 적절한 sectioning 요소를 올바르게 사용하는 방법을 공부한다!\-> 구조적으로 아름다운

단원에 걸맞는 제목이 항상 있듯이, 하나의 sectioning element 내에는 반드시 heading 태그를 작성해야 한다!예시1) section 태그예시2) nav 태그눈에는 보이지 않을 지라도 반드시 제목을 명시해 주어야 한다!

크게 3개의 덩어리로 나눌 수 있다!조금 더 세부적으로 나누면 이렇게 두 덩어리로 나눌 수 있다. 여기서도 아래처럼 조금 더 세부적으로 나눌 수 있다.form을 작성하는 파트피드가 올라오는 부분마찬가지도 여기서 조금 더 세부적으로 나누어 보자.Worldwide tren

전체 구조를 위해서는 여기를 참조자세히 살펴보면, header + nav로 이루어져 있음!header 태그도 기본적으로 div와 완전 동일하지만, 상단부 혹은 도입부를 표현한다는 뉘앙스를 더해준 태그이다.트위터 로고가 있으므로 그냥 빼박이다..전체 페이지에서 가장 중요

전체 구조를 위해서는 여기를 참조 main 말 그대로, 본문에 있어서 가장 핵심이 되는 내용들을 묶어주는 역할을 한다하나의 HTML 문서에는 하나의 main 태그만 사용할 수 있다!핵심을 모아놓은 부분이므로,sectionarticleaside등의 태그 안에 들어올 수

오로지 tweet 작성만을 위한 부분이므로, section 태그를 사용한다.form 작성 이외에 어떠한 기능도 하지 않으므로, 브라우저에게 '여긴 form을 작성하기 위한 section이야!' 라고 명시적으로 알려주면 훨씬 의미가 살아날 것!heading으로 보이는 요

따라서 section 태그를 사용하도록 한다!디테일하고 사소한 부분이지만 신경써서 마크업 해주도록 하자!뉴스 기사, 블로그 등 정보 컨텐츠 자체가 완결성이 있는 경우에, 그 뉘앙스를 살려주기 위해서 사용.(혼자 독립적으로 존재해도 정보로서의 완결성이 있는 경우)

지금의 경우 정보의 완결성은 있으나, section과 article에 비해 핵심적인 주제와 동떨어진 곁다리 같은 정보의 경우 사용함

특정 section 내의 하단부 혹은 페이지 전체의 하단부 등에서 사용함!

모든 요소들 합치기 코드 코드 요약 전체 코드