본문 바로가기

html,css 기초10

html 5 : 목록과 표 ol, ul, li, dl, dt, dd, div, table, tr, th, td ol - 순서가 있는 목록 - 보통 숫자 목록으로 나타남 - type : a A i I 등 항목을 세는 유형 변경 - reversed : 거꾸로 순서를 셈 - start : 항목을 셀 때 시작하는 수 ul - 순서가 없는 목록 - ol과 ul은 중첩해서 사용할 수 있음 first second second 1 second 2 second 3 third li - ol과 ul 안에 들어가는 리스트 dl dt dd div - definition list 용어 설명이나 메타데이터(키-값 목록)을 설명할 때 사용 - dt : term 용어 dd : description 설명 - dd 안에 여러 개의 dt, dd 값을 넣을 수 있음 - div : dt와 dd를 함께 묶어 스타일링을 할 경우 div로 묶어서 표현 ta.. 2022. 7. 5.
html 4 : 구조 div, span, semantic web, nav, aside div -구획을 나타내는 컨테이너 -블록 요소이기 때문에 가로 공간을 모두 차지함 -순수 컨테이너로서 아무런 의미를 담지 않음 span -구획을 나타내는 컨테이너 -인라인 요소이기 때문에 콘텐츠 길이만큼만 공간 차지 Semantic Web -div와 span으로 구획을 나눠 스타일링 할 수 있지만 header nav 등과 같이 목적에 따라 구획을 나누는 방법이다. -검색 엔진이 효율적으로 정보를 인식함 -스크린 리더로 페이지를 탐색하기 수월함 (시각 장애인분들은 스크린 리더에 의존하는 경우가 많기 때문에) -개발자 간에도 의미를 찾기 쉬워짐 header - 소개에 사용되는 로고, 제목 등을 나타냄 - 페이지 제목이나 글 제목으로 사용 Main Page Title The Planet Earth Posted.. 2022. 7. 5.
html 3 : 텍스트 b, strong, i, em, sup, sub, del, ins, cite, mark b, strong -b : 중요한 내용을 굵게 처리할 때 사용 -strong : 앞뒤 문장보다 훨씬 중요할 때 -같은 결과로 보이지만 웹브라우저나 스크린리더 입장에서는 완전히 다른 태그임 i, em -i : 기술 용어, 외국어 구절, 등장인물의 생각 등 주위 내용과 구분할 때 사용함 -em : emphasize 강조할 때 사용함 mark -하이라이트 표시 -검색 결과를 표시하거나 마음에 와닿는 문구를 표시할 때 사용 small -저작권이나 법률 표기 등을 표시할 때 사용 sup, sub -위첨자 :제곱 등을 표시할 때 -아래첨자 : 원소기호 등을 표시할 때 del, ins -del : 삭제된 내용이 있을 때 -ins : 추가된 내용이 있을 때 -cite : 회의록 등 어떤 이유로 어떤 때에 삭제/추가 되.. 2022. 7. 4.
html 2 : 텍스트 Visual Studio 단축키, blockquote, q, pre, figure, abbr, address, cite, bdo 에디터 창 윈도우 맥 현재 창 닫기 Ctrl + w Cmd + w 닫은 창 다시 열기 Ctrl + Shift + t Cmd + Shift + t 사이드바 토글 Ctrl + b Cmd + b 사이드바 + 탐색기 Ctrl + Shift + e Cmd + Shift + e 사이드바 + 전체 탐색 Ctrl + Shift + f Cmd + Shift + f 에디터 확대 Ctrl + +(=) Cmd + +(=) 에디터 축소 Ctrl + - Cmd + - 소스코드 편집 윈도우 맥 들여쓰기 Tab 혹은 Ctrl + ] Tab 혹은 Cmd + ] 내어쓰기 Shift + Tab 혹은 Ctrl + [ Shift + Tab 혹은 Cmd + [ 아래에 행 삽입 Ctrl + Enter Cmd + Enter 위에 행 삽입 Ctrl.. 2022. 7. 3.
html 1 : 기본 형식, Tag 분류, Contents models 내용 -여는 태그와 닫는 태그 -알아보기 쉽도록 소문자로 작성 추천 -일부 태그는 빈 요소로 단독 사용 가능 -Nesting 중첩 : 요소 안에 다른 요소가 있는 포함 관계 -Comments 주석 : 코드에 메모 추가나 사용하지 않는 코드 임시 처리하고자 사용 -head : 웹페이지 정보(웹문서 제목 등) -body : 그 외의 모든 것 Tag -구획을 나누는 태그 -요소 태그 -Block : 가로를 모두 차지 -Inline : 안에 가지고 있는 크기만큼 차지 -인라인 요소는 블록 요소를 포함할 수 없음 Content models 출처 https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html 3.2.5 Content models — HTML5 w.. 2022. 7. 2.
반응형