브라우저 정보 얻기 요소는 독립적인 콘텐츠를 표현한다. 일반적으로 는 문서의 내용에 참조는 되지만, 내용에 영향을 주지 않는다. 문서의 다른 부분이나 부록으로 이동할 수있는 이미지, 일러스트레이션, 다이어그램, 코드 조각 등을 가리킨다. 요소를 사용해 설명을 붙일 수 있다. 피규어, 설명, 콘텐츠는 하나의 단위로 참조된다. (반드시 3개를 한 셋트로 사용하는것은 아님) [공부좌표] https://developer.mozilla.org/ko/docs/Web/HTML/Element/figure
순서 - 선택해서 사용 - 0개 이상 - 선택해서 사용 다음 중 하나 - 0개 이상(없으면 브라우저에서 자동 생성) - 0개 이상(없으면 브라우저에서 자동 생성) - 선택해서 사용 관련 CSS 속성 의 display: table은 inline-block과 비슷하다. overflow 속성이 적용되지 않는다. border-collapse border-collapse: separate(기본값) | collapse 표 테두리(border)가 분리(separated) 또는 상쇄(collapsed)될 지를 결정한다. 분리 모델에서는, 인접한 셀은 각각 자신의 고유(distinct) 테두리가 있고 상쇄 모델에서는, 인접한 표 셀은 테두리를 공유한다. border-spacing 인접한 표 칸의 테두리 간격을 지정한다...
img의 적절한 사용 페이지 출력시 이미지를 포함시킬 경우 이미지에 경고 아이콘과 같은 중요한 의미가있는 경우 img의 실용적인 사용 이미지가 로고, 다이어그램 또는 사람 (스톡 사진 인물이 아닌 실제 인물)과 같은 콘텐츠의 일부인 경우 브라우저 크기 조정에 의존하여 텍스트 크기에 비례하여 이미지를 렌더링하는 경우 배경 이미지 대신 img를 사용하면 배경에서 애니메이션 성능을 크게 향상시킬 수 있다. background-image를 사용하는 경우 이미지가 콘텐츠의 일부가 아닌 경우 이미지 위에 텍스트가 들어가는 경우 페이지 출력시 이미지를 제거해야하는 경우 sprite 이미지를 사용하는 경우 sprite처럼 이미지의 일부만 표시해야하는 경우 전체 창을 채우기 위해 배경 이미지를 늘리는 경우 아이콘과 같이..
, , , sectioning content는 제목과 그 내용을 포함한 범위를 지정하는 콘텐츠를 나타낸다. 모든 sectioning content는 heading과 outline을 가진다. *heading과 outline의 차이를 모른다면 링크의 "Q. 앞에 있는 번호들은 무엇인가요?" 참고 01. 를 sectioning content내에 사용 할 수 있다. section 안의 header는 section의 제목, 작성자 이름 등이 포함될 수 있다. 는 반드시 섹션의 시작 부분에 배치돼야 하는 것은 아니다. 02. 를 sectioning content내에 사용 할 수 있다. section 안의 footer에는 section의 게시 날짜, 라이센스 정보 등이 포함될 수 있다. 역시 반드시 섹션의 끝 부분에..
섹션화란? 책의 목차를 빗대어 말하자면, 상단 이미지의 title 하나 하나가 섹션화 된 것이다. 책의 구성(섹션)을 나누고, 구성(섹션)의 제목을 붙이 듯. HTML문서 또한 자동으로 문서의 목차가 만들어 진다. 눈에는 보이지 않기 때문에 아래의 "HTML 5 Outliner"를 사용해서 섹션화된 콘텐츠를 확인할 수 있다. 빨간색 박스에 아래의 코드를 넣어보자. Outline this!를 클릭하면 아래와 같은 결과가 나온다. 빨간색 박스에 아래의 코드를 넣어보자. Q. 최상단에 있는 1.은 무엇인가요? HTML문서의 제목을 뜻한다. 사이트의 제목 사이트의 제목 위의 방법들을 통해서 알 수 있듯이 는 섹션화하지 않고, 은 섹션화한다. Q. 앞에 있는 번호들은 무엇인가요? section이 가지고 있는 ou..
- Total
- Today
- Yesterday
- 객체의 프로퍼티
- offsetTop
- 부등 연산자
- property
- scrollHeight
- 불일치 연산자
- constructor
- offsetHeight
- outerHeight
- clientHeight
- javascript class
- 동등 연산자
- 프로퍼티
- 점 표기법
- [[Prototype]]
- @font-face
- 일치 연산자
- innerHeight
- 동치 연산자
- 대괄포 표기법
- 링크막기 #a링크막기
- scrollTop
- __proto__
- prototype 프로퍼티
- clinetTop
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |