html문서8 08. HTML 메타(meta) 요소 ○ 메타데이터 - 데이터에 대한 데이터 - 데이터를 설명하는 데이터 (e.g. 사진 정보를 보면 나오는 날짜, 장소 등) - HTML 또한 데이터이기 때문에 그에 대한 메타데이터(문서 정보, 작성자 등)가 존재 ○ HTML meta 요소 - HTML 문서에 대한 정보를 안에 태그를 이용해서 넣는다 - : HTML문서에서 사용하는 문자셋을 인코딩 (필수) - : HTML문서에 대한 설명 (선택) - : 검색엔진 키워드 정의 (선택) - : HTML문서를 만든 사람 (선택) - : 뷰포트 설정 (필수) - : 정해진 시간마다 주기적으로 HTML문서를 새로고침 (선택) 2022. 4. 2. 07. HTML 레이아웃(Layout) & 시맨틱(Semantic) ○ HTML 레이아웃(Layout)과 시맨틱(Semantic) 태그 - : 콘텐츠를 묶어 시각적 효과(CSS)를 적용할 때 중요하게 사용됨 - HTML구조를 만들때 , 태그 외에 시맨틱(Semantic) 태그 사용 권장 - 시맨틱(Semantic) : '의미가 통하는'이라는 뜻, 태그만 보고도 페이지 구조를 쉽게 파악할 수 있도록 함 - 웹사이트 주요 구조 : 헤더(header), 본문(contents), 사이드바(sidebar), 푸터(footer) 등 ○ 시맨틱(Semantic) 태그 - 시맨틱 태그는 일반 태그와 달리 HTML구조에 의미를 부여할 뿐 실제 출력에 영향을 주진 않는다 ① : 머리말 영역 지정, 주로 페이지의 맨 위쪽이나 왼쪽에 삽입 ② : 네이게이션 역할, 동일한 사이트 안의 문서나 .. 2022. 3. 27. 06. HTML 블록(Block)요소와 인라인(Inline)요소 ○ 블록(block) 요소 / 블록 레벨 태그 - 특정영역에 대해서 블럭을 지정 - 내용의 크기와 상관없이 정해진 크기를 가지고 있음 - , , 등 ○인라인(inline) 요소 / 인라인 레벨 태그 - 내용의 크기가 곧 영역의 크기 - , , 등 ○ 블록 요소와 인라인 요소의 크기 비교 - 블록 요소는 텍스트 내용의 길이와 상관없이 정해진 영역 모두 자신의 영역 (한 줄의 배경색이 모두 변함) - 인라인 요소는 텍스트 내용의 길이가 곧 자신의 영역 (텍스트 부분만 배경색이 변함) 블록요소 DIV 블록요소 BLOCKQUOTE 블록요소 PRE 인라인요소 STRONG 인라인요소 SPAN HTML 삽입 미리보기할 수 없는 소스 2022. 3. 26. 05. HTML 폼(Form) 관련 태그들 ○ 폼(Form) - 폼(Form) : 사용자가 웹 사이트로 정보를 보낼 수 있는 요소 사용자가 입력한 값을 전송해 준다 (e.g. 로그인창, 회원가입창, 검색창 등) - 사용자가 입력한 정보는 단위로 서버로 전송된다 - 폼을 만드는 태그 : - 폼 태그 안에 또 다른 폼 태그가 올 수 없다 ( → 잘못된 경우 ) - 태그 안에 여러 폼 컨트롤 요소를 넣어준다 ○ 폼 관련 속성들 - id="폼아이디" : 여러 폼이 있을 떄 구분하기 위해 사용 (주로 Frontend단에서 접근시 사용) - name="폼이름" : 여러 폼이 있을 떄 구분하기 위해 사용 (주로 Backend단에서 접근시 사용) - method="post/get" : 전송방식 (post : 전송내용이 URL에 드러나지 않음 / get : 전송.. 2022. 3. 25. 04. HTML 표 작성 태그 ○ 표(Table) 작성 태그 - 표를 이루는 요소 : row(행), column(열), cell(셀, 행과 열이 만나 이루는 영역) - 표를 만드는 태그 : , , , - 표 만드는 순서 ① : 테이블의 처음과 끝을 만든다 ② : ①번 안에 행을 만든다 ③ , : ②번 안에 열을 추가해 셀을 만든다 ( : 제목셀 / : 일반셀) ④ ③번의 여는 태그와 닫는 태그 사이에 셀 안에 들어갈 내용을 입력한다 이름 주소 손흥민 영국 런던 ↓ HTML 삽입 미리보기할 수 없는 소스 - 표 크기 조절 : 태그에 속성값을 준다 ( width="가로크기" height="세로크기" ) 이름 주소 황의조 프랑스 보르도 - 표 정렬 : 가로 (align), 세로(valign) 가로정렬 왼쪽 가로정렬 중간 가로정렬 오른쪽 세.. 2022. 3. 25. 03. HTML 이미지, 미디어, 링크, 프레임 삽입 관련 태그들 ○ 이미지 삽입 태그 - 이미지 삽입 태그 : 또는 - 이미지 경로 ① 상대경로 : 현재 HTML문서가 저장되어 있는 폴더 기준 폴더명/현재 폴더의 하위폴더 ./폴더명/현재 폴더의 하위폴더 ../폴더명/현재 폴더의 상위폴더 ../../폴더명/현재 폴더의 상위상위폴더 ② 절대경로 : 웹프로젝트의 홈디렉토리(ROOT)부터 시작 - 속성값으로 크기를 조정할 수 있다 (height이 생략되면 width에 맞춰 줄어든다) ○ 미디어 삽입 태그 - 음악 삽입 태그 : - 영상 삽입 태그 : - 미디어 삽입 태그에서 사용되는 속성들 ① controls : 컨트롤 막대 표시 ② autoplay : 자동 재생 ③ width, height : 비디오 크기 조절 ④ poster : 비디오가 재생되지 않을 시 표시되는 이미지.. 2022. 3. 23. 이전 1 2 다음
