본문 바로가기

전체 글82

html 8 : 메타데이터 title, meta, link, MIME, style, script 메타데이터 - 데이터를 설명하는 데이터 - 검색 엔진이 제일 먼저 메타 데이터를 보고 정보를 분류해 검 색 결과를 노출함 title - 탭 제목을 나타낼 수 있음 - 안쪽에 태그가 있더라도 무시함, 텍스트만 입력 가능 - head와 마찬가지로 하나의 문서에 하나만 입력 - 북마크(즐겨찾기)의 기본으로 들어감 - title을 잘 작성해야 검색결과 상위에 노출됨, 단어 설명은 광고로 인식하니 주의 루키의 페이지입니다. meta - name 속성 - name, content를 함께 사용 - application-name : 웹페이지를 아우를 수 있는 하나의 제목 하나 - title은 웹페이지의 제목과 부가 설명이 함께 들어갈 수 있다는 점이 차이 - author : 문서 제작자 - description : 페.. 2022. 7. 10.
html 7 : 폼 form, action, method, label, fieldset, legend, input 속성 form - 사용자가 정보를 입력할 수 있게 장치를 만들어 줌 - 다른 페이지나 서버로 전송할 수 있게 해줌 form 특성 1. action - 폼 데이터를 보낼 주소를 입력함 - 절대 경로 또는 상대 경로 2. method - 양식을 제출 HTTP 메서드(서버 개념을 이해해야 함 아직은 저두 몰라유) - GET : 보내려고 하는 주소 뒤에 어떤 데이터를 입력했는지 보여지게 됨 - 데이터가 보여지기 때문에 검색창 등에 사용됨 - POST : 주소창에 입력한 정보가 보이지 않음 - 보낸 요청이 주소로 보이지 않게 숨겨서 보내짐 제출 제출 3. label - input : 사용자가 정보를 입력할 수 있는 영역 - label : 어떤 정보를 입력할지 설명함 - for 속성을 이용해 어떤 input을 가리키는지.. 2022. 7. 10.
html 6 : 임베디드 image, 이미지 유형, srcset, sizes, video, audio, iframe 임베디드 요소 - 외부에 소스를 불러와서 웹페이지에 삽입하는 요소 image - src(source) 속성을 필수로 사용해야함, 외부의 url이나 파일이 위치한 경로 - 절대 경로 : 어떤 위치에서 파일을 부르던 간에 동일한 이미지를 보여줌 - 상대 경로 : 현재 위치 중심, 내가 있는 위치에서 이미지가 있는 위치를 가리킬 때 - arl(arlternative 대체) 속성을 이용해 이미지에 대한 설명을 남겨 스크린 리더가 이미지를 설명할 수 있음 또는 이미지 주소가 잘못 작성되어 있을 경우 등 이미지가 깨질 때 원래 어떤 이미지가 있었는지 설명 웹에서 사용하는 이미지 유형 abbreviation type file extension summary JPEG image/jpeg .jpg .jpeg .jfif .. 2022. 7. 7.
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.
반응형