학원/HTML (10) 썸네일형 리스트형 10장. 웹페이지의 레이아웃을 구성하기 위해 공간을 분할하는 태그 [ 목차 ] 1. 기존의 태그 2. 현재의 태그 1. 기존의 태그 1) 공간 분할 태그는 div, span, table이 존재 2) 과거는 주로 table과 dib를 사용 3) div 태그는 의미론적으로 어떠한 의미도 가지고 있지 않음 2. 현재의 태그 1) div 태그의 단점을 보완하기 위해 새로운 태그를 사용 2) IE에서 작동하지 않음에 주의 3) 공간 분할 태그는 일반적으로 다른 요소를 포함하는 컨테이너 역할 1) header : 헤더 2) nav : 내비게이션 3) aside : 사이드에 위치하는 공간 4) section : 본문의 여러 내용을 포함하는 공간 5) article : 본문의 주 내용이 들어가는 공간 6) footer : 푸터 9장. 사용자와의 커뮤니케이션을 위한 폼 태그 [ 목차 ] 1. form 2. input 3. select 4. textarea 5. button 6. fieldset/legend 1. form 1) 사용자가 입력한 데이터를 수집하기 위해 사용 2) input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그 포함 3) 어트리뷰트 1] action : 입력 데이터가 전송될 URL 지정 2] method : 입력 데이터의 전달 방식 지정, get/post get 1) 전송 URL에 입력 데이터를 쿼리스트링으로 보내는 방식 2) 전송 URL 바로 뒤에 '?'를 통해 데이터의 시작을 알려주고, key-value형태의 데이터를 추가 3) 1개 이상의 전송 데이터는 '&'.. 8장. 이미지의 표현과 동영상, 음악 등 멀티미디어를 지원하는 태그 [ 목차 ] 1. 이미지 2. 미디어 - 오디오 3. 미디어 - 비디오 1. 이미지 1) 웹페이지에 이미지를 삽입하는 경우 img tag를 사용 2) 어트리뷰트 1] src : 이미지 파일 경로 2] alt : 이미지 파일이 없을 경우 표시되는 문장 3] width : 이미지의 너비 4] height : 이미지의 높이 2. 미디어 - 오디오 1) audio 태그는 HTML5에서 새롭게 추가 2) 어트리뷰트 1] src : 음악 파일 경로 2] preload : 재생 전에 음악 파일을 모두 불러올 것인지 지정 3] autoplay : 음악 파일을 자동재생 개시할 것인지 지정 4] loop : 음악을 반복할 것인지 지정 5] controls : 음악재생 도구를 표시할 것인지 지정하며, 외관은 브라우저마다 차.. 7장. 목록과 표 형식 표현을 위한 태그 [ 목차 ] 1. 순서없는 목록 2. 순서 있는 목록 3. 중첩 목록 4. 테이블 1. 순서없는 목록 2. 순서 있는 목록 1) type 어트리뷰트를 사용해 순서를 나타내는 문자를 지정 가능 2) start 어트리뷰트를 사용해 리스트의 시작값 지정 가능 3) reversed 어트리뷰트를 사용해 리스트의 순서값을 역으로 지정 가능 2) 에 value 어트리뷰트를 통해 임의의 값 지정 가능 3. 중첩 목록 4. 테이블 1) 표를 만들 때 사용하는 태그 2) table : 표를 감사는 태그 3) tr: 표 내부의 행 4) th : 행 내부의 제목 셀 5) td : 행 내부의 일반 셀 5. 테이블 어트리뷰트 1) border 어트리뷰트를 사용해 외곽선 입력 가능 2) rowspan 어트리뷰트를 사용해 해당 셀이.. 6장. Hyperlink [ 목차 ] 1. Hyper 2. 디렉터리 3. 파일 경로 4. href 어트리뷰트에 사용 가능한 값 1. Hyper 1) 텍스트 등의 정보가 동일 선상에 있는 것이 아니라 다중으로 연결되어 있는 상태를 의미 2) html의 link의 개념과 연결되는데 기존 문서나 텍스트의 선형성, 고정성의 제약에서 벗어나 사용자가 원하는 순서대로 원하는 정보를 취득할 수 있는 기능을 제공 3) 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 이 기능을 하이퍼링크라 지칭 2. 디렉터리 1) 파일과 다른 디렉터리를 갖는 파일 시스템 내의 존재물로서 폴더라고도 지칭 2) 루트 디렉터리 : 파일 시스템 계층 구조 상의 최상위 디렉터리 1] Unix:/ 2] windoes: C:＼ 3) 홈 디렉토리 : 시스템의 사용자에게 .. 5장. 텍스트 관련 태그 [ 목차 ] 1. 제목 태그 2. 글자 형태 태그 3. 본문 태그 4. 공백 태그 1. 제목 태그 1) Heading 태그는 제목을 나타낼 대 사용되며 h1부터 h6까지의 태그가 존재 2) h1이 가장 중요한 제목을 의미하며 크기도 가장 큼 3) 시맨틱 웹의 의미를 살려서 제목 이외에는 사용하지 않은 것이 좋음 4) 검색엔진이 제목 태그를 중요한 의미로 받아들일 가능성이 높음 2. 글자 형태 태그 1) b : bold체를 지정하는 것으로, 제목 태그와 같이 의미론적 중요성의 의미는 없음 2) string : b 태그와 동일하게 bold체를 지정하지만 의미론적 중요성을 지님 3) i : italic체를 지정하는 것으로, 중요성의 의미는 없음 4) em : 문장을 강조하는 것으로, i 태그와 동일하게 ita.. 4장. 웹페이지를 구성하는 기본 태그 [ 목차 ] 1. 문서 형식 정의 tag 2. html tag 3. head tag 4. head tag - title tag 5. head tag - style tag 6. head tag - link tag 7. head tag - script tag 8. head tag - meta tag 9. body tag 1. 문서 형식 정의 tag 1) 문서 형식 정의 태그는 출력할 웹 페이지의 형식을 브라우저에 전달 2) 문서의 최상위에 위치해야 하며 대소문자를 구별하지 않음 2. html tag 1) html 태그는 모든 html 요소의 부모 요소이며 웹페이지에 단 하나만 존재 2) 즉, 모든 요소는 html 요소의 자식 요소이며 html 요소 내부에 기술 3) html은 글로벌 어트리뷰를 지원하며 특히.. 3장. 시맨틱 요소 [ 목차 ] 1. 시맨틱 웹 2. 시맨틱 태그 1. 시맨틱 웹 1) 웹에 존재하는 수많은 웹페이지들에 메타데이터를 부여하여 기존의 잡다한 데이터 집합이었던 웹페이지를 의미와 관 련성을 가지는 거대한 데이터베이스로 구축하고자 하는 발상 2) non-semantic 요소 : div, span 등이 있으며 이들 태그는 contetn에 대하여 어떤 설명도 하지 않음 3) semantic 요소 : from, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명 2. 시맨틱 태그 2장. HTML5 기본문법 [ 목차 ] 1. HTML 2. Hello HTML5 3. HTML5의 기본문법 - 요소 4. HTML5의 기본문법 - 요소의 중첩 5. HTML5의 기본문법 - 빈 요소 6. HTML5의 기본문법 - 어트리뷰트 7. HTML5의 기본문법 - 글로벌 어트리뷰트 8. HTML5의 기본문법 - 주석 1. HTML5 1) 웹페이지를 기술하기 위한 마크업 언어 2) 웹페이지의 내용과 구조를 담당하는 언어로써 HTML태그를 통해 정보를 구조화 3) 5까지 최신 버전이 나와 있으며, 머티미디어, 그래픽, 통신, 디바이스접근, 시맨틱 태그 등 다양한 기능을 지원 2. Hello HTML5 1) 반드시 으로 시작하며 문서형식을 HTML5로 지정해야 함 2) 실제적 HTML document는 2행부터 시작되며, 과 사이.. 1장. 기본 설치와 설정 [ 목차 ] 1. IIS 기본 설치 2. 아이피 찾기 3. 서버 도메인 설정 4. vscode 다운로드 1. IIS 기본 설치 1) 제어판 - 프로그램 및 기능 - windows 기능 켜기 / 끄기 2) 인터넷 정보 서비스 - world wide web 서비스 설치 3) 인터넷 정보 서비스 - 웹 관리 도구 설치 2. 아이피 찾기 1) 명령 프롬프트 - ipconfig 입력 3. 서버 도메인 설정 1) 관리자 권한으로 메모장 실행 2) C:\Windows\System32\drivers\etc의 hosts 파일을 불러오기 3) 하단에 ip 주소와 도메인 입력 4. vscode 다운로드 https://code.visualstudio.com/Download# Download Visual Studio Code .. 이전 1 다음
