[HTML] 기초/HTML 기초4 Chapter2-4. 시맨틱 요소 시맨틱 요소란? HTML의 최신 버전인 HTML5에서는 시맨틱 웹(semantic web)이 중시되면서 여러 시맨틱 요소(semantic element)가 새롭게 만들어졌습니다. 시맨틱이란 ‘의미가 있는, 의미론적인'이라고 해석할 수 있습니다. 다시 말해, 의미를 가진 요소를 사용하는 방식을 추구하기 시작했습니다. 시맨틱 요소 중 하나인 요소를 예로 들어 보겠습니다. 최상위 제목(top level heading)을 표현할 때 사용하는 요소인 요소를 사용할 경우, 브라우저가 큰 폰트 사이즈를 적용할 뿐 아니라, 위아래로 간격을 주어 제목처럼 보이도록 합니다. 이와 같은 효과는 요소, 요소에 CSS 속성을 추가하여 요소와 똑같이 보이도록 할 수 있습니다. 그러나 요소를 사용할 때처럼 의미적 가치는 없다고 할.. 2022. 12. 21. Chapter2-3. 로그인 페이지 만들기 예시) 네이버 로그인 페이지 1. 아이디 또는 이메일 주소를 입력할 입력폼이 필요합니다. 2. 비밀번호를 입력할 수 있는 입력폼도 필요 3. 로그인 버튼도 반드시 필요 4. 로그인 상태를 유지할 수 있도록 체크박스 5. 회원가입 페이지로 이동할 수 있는 링크 1. 아이디, 비밀번호 입력 창 만들기 여기서 placeholder 속성을 사용하면 입력폼 안에 작성해야 하는 내용에 대한 힌트를 제공할 수 있습니다. 2. 로그인 버튼 만들기 Login 3. 로그인 상태 유지 체크박스 만들기 태그는 사용자 인터페이스(UI) 요소의 라벨(label)을 정의할 때 사용합니다. 요소는 for 속성을 사용하여 다른 요소와 결합할 수 있으며, 이때 요소의 for 속성값은 결합하고자 하는 요소의 id 속성값과 같아야 합니다... 2022. 12. 21. Chapter2-2. 자주 사용하는 HTML요소 MOST USED TAGS IN HTML 태그 : 설명 : Division : Span : image : Link & : Unordered List & List item : input(Text, Radio, Checkbox) : Multi-line Text input : Button div vs span div 태그는 한 줄을 차지합니다. span 태그는 컨텐츠 크기만큼 공간을 차지합니다. img: 이미지 삽입 // 닫는 태그가 없음 a: 링크 삽입 링크 제목 만약 새창으로 열게 하고 싶으면? 링크 제목 ul, li: 리스트 ul: 순서가 없는 HTML 리스트(list)를 정의할 때 사용합니다. 요소에 속하는 각 아이템은 요소를 사용합니다. + ol: 태그는 ordered list의 약자로, 숫자나 알파.. 2022. 12. 21. Chapter2-1. HTML 기본 구조와 문법 HTML HyperText Markup Language의 약자 웹 페이지의 틀을 만드는 마크업 언어 HTML은 tag들의 집합 Tag: 부등호()로 묶인 HTML의 기본 구성 요소 html 확장자 사용 Page title HelloWorld Contents here Here too! TREE STRUCTURE (나무 구조) HTML 문서 시작 HTML head title:Page title body h1: HelloWorld div: Contents here span: Here too! SELF-CLOSING TAG 태그 내부에 내용이 없다면, (와 같이 표현되는 경우) 와 같이 표현 가능 2022. 12. 21. 이전 1 다음