WEB/Html (5) 썸네일형 리스트형 [Html] 시멘틱 태그 1. 시멘틱 웹이란?- 기계가 쉽게 알아 들을 수 있는 웹 형식 2. 태그- 문서나 특정 세션의 헤더를 정의할 때 사용되며, 로고나 제목 등을 표시할 때 주로 사용됩니다. 3. 태그- 링크 중에서 중요도가 높은 메뉴, 목차 등을 구성할 때 사용됩니다. 4. 태그- 해당 문서의 메인 컨텐츠를 정의할 때 사용하며 페이지 당 단 하나의 main만 존재해야 합니다. 5. 태그- 독립적인 섹션을 정의할 때 사용합니다. 6. 태그- 페이지나 사이트와 독립적으로 구성할 수 있는 요소를 정의 할 때 사용합니다.- 블로그나 뉴스기사 등이 있습니다.- 내용끼리 관련이 있다면 section, 없다면 article을 주로 사용합니다. 7. 태그- 사이드바 개념으로 활용됩니다. 주로 구글 광고 게재 등에 활용됩니다.. [Html] 태그 Part 3 1. 전송양식 태그 - form- 서버로 전송하기 위한 양식태그- 눈에 보이는 차이점은 발생하지 않습니다. 2. 선택요소 - select- option들 중 선택을 할 수 있게 만든 태그- 만약 option이 없으면 선택지가 없게 됩니다. 3. 인라인 프레임 태그 - iframe- 현재 문서에 다른 문서를 삽입할 수 있습니다. - 예를 들어 다른 홈페이지(구글, 네이버 등) 또는 유튜브 영상등을 가져올 수 있습니다. 기본형태는 다음과 같습니다.- src = 페이지 주소- width = 가로길이(너비)- height = 세로길이(높이) (1) 예시 - 홈페이지 삽입하기 (2) 예시 - 유튜브 영상 삽입하기1) 원하는 유튜브 영상을 찾습니다.2) 공유버튼을 누릅니다.3) 퍼가기를 누릅니다. 4) 아래 내용을.. [Html] 태그 Part 2 1. 입력 태그 - input기본적인 형태는 다음과 같습니다.- type = input을 어떤 형태로 받느냐를 결정합니다.- value = 기본값을 작성할 때 사용되며 작성하지 않느면 빈값이 기본값이 됩니다.- placeholder = 주로 안내문구에 사용됩니다. (1) type = "text"- 기본값입니다. (2) type = "password"- 일반적으로 비밀번호를 입력받을 때 많이 사용되며 암호화되어 보여집니다. (3) type = "radio"- 라디오 버튼으로 1가지를 선택할 수 있게 합니다. - 문제는 이와 같이 코드를 작성할시 이런식으로 의도와 다르게 모두 선택될 수 있다는 것입니다. - 이는 name을 이용해 그룹으로 묶어줄시 1가지만 선택 가능하게 바꿀 수 있습니다. (4) type.. [Html] 태그 part 1 0. 들어가기 전- 이전 포스팅을 읽고 같은 방법으로 html파일을 생성한 뒤 의 열린 태그와 닫힌 태그 사이에 쓰면서 연습하시면 됩니다.- 코드를 작성한 후에는 오른쪽 클릭 > Open with live Server를 클릭합니다.- 방금 쓴 코드를 새로고침하여 서버에 반영하고 싶을 때는 ctrl+S를 이용하여 코드를 저장하면 반영이 됩니다. 1. 제목 태그 - h1- 제목 태그를 나타냅니다.- 폰트의 이름, 사이즈 등을 상세히 조절할 수는 없습니다. (이는 CSS에서 가능합니다.) 2. 목록태그 - ul, ol, li- ul은 unordered list로 순서가 없습니다.- ol은 ordered list로 순서가 있습니다.- 둘 모두 공통점으로 자식으로 li태그를 가진다는 점이 있습니다. 3. 앵커태.. [Html] 기본코드 0. 들어가기 전VScode와 확장에서 Live Server를 설치해주세요!VScode는 앞으로 배울 코드를 작성하기 위해 필요하고, Live Server는 값 변경시 (정확히는 변경 후 저장시) 결과물을 즉시 확인할 수 있게 해줍니다. 1. Html이란?Html은 Hyper Text Markup Language로 태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어입니다.기본적으로 콘텐츠의 구조를 같습니다.- 태그: 입력된 정보의 성격을 나타냅니다. 몇몇 태그는 닫힌태그가 없습니다.- 속성: 그 태그가 가진 역할을 뜻합니다. - 콘텐츠: 내용물 이렇게 들으면 뭐가 뭔지 잘 모를 수 있습니다. 몇가지 예제를 통해 더 상세히 알아보도록 합시다. 2.Html의 기본코드(1) 바탕화면에 폴더를 생성합니다... 이전 1 다음
