본문 바로가기

✒️ GURU39

[HTML5] 9. 문서의 전형적 구조 + HTML5의 문서 구조화 + 시맨틱 태그와 시맨틱 웹 9. 문서의 전형적 구조 + HTML5의 문서 구조화 + 시맨틱 태그와 시맨틱 웹 # 기존 HTML 의 한계 : 웹 문서의 구조를 표현하는 태그가 없었음 - 태그나 태그로 구조화되어 보이게 작성 - HTML 페이지의 소스를 보면 문서 구조 파악 불가능 # 문서 구조화의 이유 : 검색 엔진이 좋아하는 웹 페이지 작성의 필요성이 대두 - 정보 탐색이 중요해짐 - 사물인터넷으로 IT 기기들이 스스로 정보를 검색할 수 있게 됨 - 사용자가 만든 웹 페이지의 가치를 극대화할 수 있게 하기 위함 -> 탐색이 쉽도록 작성 # 시멘틱 웹 : 웹 문서를 구조화하여 의미 있는 내용 탐색이 용이한 웹 - 기존의 태그 : , , , 등의 태그를 사용했으나 문서의 의미나 구조 전달이 어려웠다. - 시맨틱 태그 : 문서의 구조와.. 2022. 7. 17.

[HTML5] 8. 인라인 프레임 <iframe> + 브라우저 윈도우와 인라인 프레임의 계층 관계 8. 인라인 프레임 + 브라우저 윈도우와 인라인 프레임의 계층 관계 # 태그와 인라인 프레임 - HTML 페이지 안에 또 다른 HTML 페이지를 삽입 ex) 200x150 크기의 인라인 프레임에 iframe.html 출력 브라우저는 iframe 태그를 지원하지 않습니다. - src : 출력할 웹 페이지의 URL 주소 - srcdoc : 직접 HTML 태그로 작성된 텍스트로서 출력될 내용. srcdoc 속성이 있다면, src 속성은 무시된다. - name : 프레임 윈도우의 이름. 다른 웹 페이지에서 target 속성 값으로 사용됨 - width : 프레임의 폭, 픽셀 값으로 디폴트 값은 300이다. - height : 프레임의 높이이자 픽셀 값으로, 디폴트 값은 150이다. # 2개의 인라인 프레임을 가.. 2022. 7. 17.

[HTML5] 7. <a> 태그와 하이퍼링크 + 하이퍼링크 텍스트의 색 + 링크와 target 속성 + id 속성과 앵커 + 파일 다운로드 링크 + 미디어 삽입과 <audio>, <video> 태그 7. 태그와 하이퍼링크 + 하이퍼링크 텍스트의 색 + 링크와 target 속성 + id 속성과 앵커 + 파일 다운로드 링크 + 미디어 삽입과 , 태그 # 하이퍼링크와 태그 - 하이퍼링크 : 다른 HTML 페이지와의 연결 고리로, 이미지나 텍스트로 작성한다. 같은 웹 사이트 안의 페이지(상대 경로)는 물론 다른 웹 사이트 안의 HTML 페이지에 모두 연결이 가능하다. - 항해 : 하이퍼링크를 따라 다른 웹 페이지를 방문하는 것 - href : 이동할 HTML 페이지의 URL 혹은 HTML 페이지 내 앵커의 이름 - target : 링크에 연결된 HTML 페이지가 출력될 윈도우 이름 지정 # 태그의 href 속성에 하이퍼링크 작성 - 같은 웹사이트 안에 있는 웹페이지 연결 (텍스트 작성) 클릭하면 사진 페이.. 2022. 7. 16.

[HTML5] 6. <table> 태그와 표 생성 + 이미지를 가지는 표 생성 + 셀 합치기 with rowspan & colspan 6. 태그와 표 생성 + 이미지를 가지는 표 생성 + 셀 합치기 with rowspan & colspan # 표 생성에 사용되는 태그들 - : 표 전체를 담는 컨테이너 - : 표 제목 - : 헤딩 셀 그룹 - : 바닥 셀 그룹 - : 데이터 셀 그룹 - : 행 (여러 , 포함) - : 열 제목(헤딩) 셀 - : 데이터 셀 # 행과 열 만들기 -표는 여러 행으로 구성되고, 한 행은 여러 셀로 구성된다. - , , 은 여러 개의 을 포함할 수 있다. 이름 HTML CSS 황기태 80 70 ... # 셀 합치기 - 가로로 합치기 : colspan + bgcolor 은 배경색을 의미함 - 세로로 합치기 : rowspan # 이미지를 가지는 표 만들기 2022. 7. 16.

[HTML5] 5. <img> 태그와 이미지 삽입 + 리스트와 리스트 아이템 + <ol> 과 중첩 리스트 + 정의 리스트 5. 태그와 이미지 삽입 + 리스트와 리스트 아이템 + 과 중첩 리스트 + 정의 리스트 # 태그와 이미지 삽입 - 태그의 src 속성에 이미지 파일의 주소를 지정하며, src에는 BMP, GIF, PNG, JPG, JPEG, animated-GIF 등의 이미지를 지정할 수 있다. - src : 이미지 파일의 URL로, 필수 속성이다. - alt : 이미지가 없거나 손상되는 등 이미지를 출력할 수 없는 경우 출력되는 문자열로, 필수 속성이다. - width : 이미지가 출력되는 너비로, 생략이 가능하다. 생략될 경우 원본 이미지의 폭을 차용한다. - height : 이미지가 출력되는 높이로.. 2022. 7. 15.

[HTML5] 4. 문자, 기호, 심볼 입력 + <pre> 태그 + 블록 태그 + 인라인 태그 + 메타 데이터 + < base > 태그 + < link > 태그와 < meta > 태그 + 절대 경로와 상대 경로 4. 문자, 기호, 심볼 입력 + 태그 + 블록 태그 + 인라인 태그 + 메타 데이터 + 태그 + 태그와 태그 + 절대 경로와 상대 경로 # 문자, 기호, 심볼과 코드 표현 및 삽입 # 태그로 개발자의 포멧 그대로 출력 # 텍스트 꾸미기 # 블록 태그와 인라인 태그 블록 태그 인라인 태그 - 항상 새 라인에서 시작하여 출력 (독립적임) - 양 옆에 타 콘텐츠를 배치하지 않고 한 라인을 독점하여 사용 - 태그 사례 : , , , - 블록 속에 삽입되어 블록의 일부로 출력 - 태그 사례 : , , , # 태그로 배경 색 및 태그로 글자 색 정하기 # 메타 데이터와 메타 데이터의 삽입 - 메타 데이터 : 데이터를 설명하는 데이터 + ex) 사진 데이터의 메타 데.. 2022. 7. 14.

이전 1 2 3 4 5 6 7 다음

티스토리툴바