Front/HTML(8)
-
공간 분할 태그
1. 공간 분할 태그 (layout) 하나의 화면에서 다양한 기능을 사용하기 위해 공간을 분할 1) div 태그 : 블록 형식으로 공간을 분할, 데이터가 있는 한 줄 전체가 선택됨 2) span 태그: 인라인 형식으로 공간을 분할, 데이터가 있는 딱 그 부분만 선택됨 2. 시맨틱 태그 (semantic) 1) header 태그: 웹페이지의 전체를 설명하는 header임을 표현 2) footer 태그: 웹페이지의 바닥부분 footer임을 표현 3) nav : 웹페이지를 탐색하는 네비게이션 역할을 하는 navigator 정보임을 표현 4) section : Content의 묶음, 여러 중심 내용을 감싸는 공간 5) article : 각각의 컨텐츠 6) aside : side에 위치한 컨텐츠
2023.06.16 -
Form태그
Form 태그 1. Form 태그 - Form (폼) : 사용자가 웹사이트로 정보를 보낼 수 있는 요소들 예) 아이디, 비밀번호, 이름 등등.. - Form 태그 여러 폼 요소(input태그 등..) 2. Form 태그 속성 1) method : 데이터가 전달되는 방식을 지정 (GET, POST) 2) action : 해당 폼의 데이터가 전송될 주소값 폼 태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정. 데이터가 전송될 URL. 3) name: 폼의 이름 지정, 여러 form태그를 구분한다 4) enctype : 해당 데이터가 인코딩되는 방법을 명시 4) target: 태그에서 지정한 파일을 다른 창에서 열도록 지정 5) autocompletet: 자동 완성 기능 Form 요소 태그 1. I..
2023.06.16 -
미디어 관련 태그
1. img 태그 1) 이미지를 가져와서 보여주는 두 가지 방식 - 온라인 상의 이미지를 링크 Image Tag 온라인 이미지 링크 - 서버 내에서 이미지를 저장하고 보여주는 방식 Server 이미지 2) 속성 - src : 이미지 경로 지정, 필수 속성 - alt: 이미지가 없을 때 나오는 설명 지정 - width : 이미지의 너비 (CSS에서 주로 지정) - height : 이미지의 높이 (CSS에서 주로 지정) 2. audio 태그 1) 오디오 태그 2) 오디오 태그 속성 - src: 음악 파일 경로 지정, 필수 속성 - preload: 음악 재생 전 데이터 모두 불러올지 여부 지정 - autoplay : 자동 실행 여부 - loop : 반복 여부 - controls : 재생 도구 표시 여부 ..
2023.06.16 -
테이블 태그 (Table)
1. 테이블(table, 표) /!-- table row : 테이블에서 한 줄 생성 --/ /!-- table data : 해당 줄에 가로로 데이터 생성 --/ 2. 테이블 속성 1) border : 테이블 테두리 설정 border = "테두리 두께" 2) colspan : 가로 합치기, 셀의 너비 지정 colspan="합칠 갯수" 3) rowspan: 세로 합치기, 셀의 높이 지정 rowspan="합칠 갯수"
2023.06.16 -
목록 태그 (List)
List는 주로 Navigation(메뉴바) 생성 시 주로 사용 1. 순서가 있는 List (Ordered List) 1) ol 태그 2) ol 태그 속성 - type : 순서를 나타내는 문자를 변경 "A" : 대문자 순서 "a" : 소문자 순서 "I" : 대문자 로마 숫자 순서 "i" : 소문자 로마 숫자 순서 - start : 시작 값을 지정 - reversed : 리스트 순서를 반대로 지정 - CSS에서 속성 변경 가능 (list-style: none;) 순서가 있는 리스트 (Ordered List) 중국 일본 이탈리아 한국 이란 2. 순서가 없는 List (Unordered List) 순서가 없는 리스트 KT KT 10 KT 20 KT 30 LGT SKT
2023.06.16 -
하이퍼링크 태그 (Hyper Link)
1. Hyper Link - a 태그 contents Go Naver 2. href 속성 1) 절대 경로 방식 : 최상위 디렉터리 부터의 위치 - Web (Front)에서는 프로젝트명이 최상위 디렉터리명.(root) - /로 시작하면 절대경로로 인식 - HTML에서 절대 경로 지정 실행 시 최상위 위치 ( "/" 만 작성 시 위치) : apache-tomcat-9.0.33\webapps WebContent는 배포될때 사라지는 폴더이기 때문에 경로 지정 시 생략 Go Test Go text1 2) 상대 경로 방식 : 현재 디렉터리 부터의 위치 - 현재 디렉터리 나타내기 ./ 또는 ./를 생략 - 상위 디렉터리로 이동 ../ - HTML에서 상대 경로 지정 상대 경로 방식 Go Result1 Go R..
2023.06.16