본문 바로가기

HTML10

HTML) form 관련 태그 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. form (사용자 입력 양식 태그) - 서버로 사용자 입력 값을 전송 → action : 폼을 제출할 서버 url → method : 전송방식 GET(기본값) / POST * GET : 사용자 입력 값을 url에 직렬화하여 전송 (단순 조회 시 사용) * POST : 사용자 입력 값을 http 메세지 body에 작성 (url에 노출되지 않음, 데이터 입력/수정/삭제 용도로 사용) form 태그 하위에 name 속성이 있는 input 태그 값, select 태그 값, textarea 값 등을 제출 global 속성 id 페이지 내에 태그 식별자 (페이지 내에서 중복 허용 X) 폼 관련 속성 .. 2022. 5. 12.
HTML) 멀티 미디어 관련 태그 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 멀티미디어 관련 audio / video 태그 - src - controls : 제어기능 시각화 여부 (controls 속성이 없으면 화면에 보이지 않음) audio 멀티미디어 관련 controls가 없다면 브라우저에 표시 되지 않으니 반드시 controls 속성을 적용해줘야 합니다. 플레이 버튼을 누르니 음악이 재생되는 것을 확인할 수 있습니다. autoplay 속성 - 자동 플레이 플레이 버튼을 누르지 않아도 자동으로 실행되는 것을 확인할 수 있습니다. muted 속성 - 음소거 처리 autoplay로 인해서 자동 실행되지만 muted 속성으로 인해 음소거 처리 된 것을 확인할 수 있습.. 2022. 5. 11.
HTML) 링크 관련 태그 (a 태그의 href 속성, target 속성) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 링크 관련 a 태그의 href 속성(hyper reference)에 명시된 문서로 이동 가능 - 절대 주소 : protocol 또는 /로 시작 - 상대 주소 : protocol 또는 /로 시작하지 않음 target 속성 ① _self : 현재 페이지에서 이동 ② _blank : 빈 페이지 (새 페이지)에서 오픈 네이버로 인덱스로(절대주소) 인덱스로(상대주소1) 인덱스로(상대주소2) 네이버로 이동 클릭 시 해당 탭에서 naver가 열림 (target 지정하지 않았으므로 _self가 기본값 적용) 인덱스로(절대주소) 클릭 시 해당 탭에서 index.html이 열림 (target을 _self로 .. 2022. 5. 11.
HTML) 이미지 관련 태그 (절대주소, 상대주소, 절대크기, 상대크기) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 이미지 관련 - img 시작/종료 태그 구분 없이 하나의 태그만 작성 - src : 이미지 경로 (절대경로, 상대경로) - alt : 대체 텍스트 (이미지를 못 찾거나, 시각적 확인이 불가능한 경우 사용할 텍스트) 절대 주소 - 프로토콜 또는 / 로 시작 이미지관련 프로토콜과 /로 시작하였기 때문에 절대 주소라는 것을 알 수 있으며, 꽃3은 파일프로토콜 (File Path)로 접근하려고 하였지만 불가합니다. 서버 환경에서는 보안 상의 이유로 인하여 접근이 불가하기 때문입니다. (폴더에서 드래그 + 드랍하면 보여지긴 함) 상대주소 - 프로토콜 또는 /로 시작하지 않는 주소 (현재 페이지 기준.. 2022. 5. 11.
HTML) block / inline 요소 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. block / inline 요소 block 요소 - 화면 너비 전체를 차지하는 요소 (div, p, h1~h6, table...) block | inline div1 div2 div3 inline 요소 - content만큼만 영역을 차지하는 요소 (span, strong, em, del, img, a...) span1 span2 span3 div1 div2 div3 span1 span2 span3 div4 이렇게 inline요소인 태그 뒤에 block요소인 태그를 입력해도, block 요소는 한 칸을 모두 차지 하기 때문에 "span3" 옆이 아닌 다음 문장에서의 너비를 모두 차지하는 것을.. 2022. 5. 11.
HTML) table 관련 태그 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 표(table) 관련 태그 table table thead 헤더행 묶음 tr th | td (셀) tbody 본문행 묶음 tr th | td tfoot 정리행 묶음 tr th | td 브라우져 벤더사 홈페이지 크롬 구글 https://google.com 사파리 애플 https://apple.com 웨일 네이버 https://naver.com 총 브라우저 수 : 3 table을 생성하였지만, 경계선이 없어서 표처럼 보이지 않기 때문에 css로 style을 적용해줍니다. head에 작성 경계선이 생기면서 테이블스러워졌습니다. 자기소개 사진 이름 연락처 주소 자기소개 ※ 테이블 생성 시 참고할 .. 2022. 5. 11.

티스토리툴바