5일차 - html

dudu00·2022년 10월 26일

codestates

목록 보기

5/25

1. 웹 개발 이해하기

HTML CSS JS (구조 스타일 상호작용)
JS - 특정 조건에 따라 상호작용하도록 하는 프로그래밍 언어

2. HTML 기초

tag들의 집합
Tag: 부등호(<>)로 묶인 HTML의 기본 구성 요소

태그 내부에 내용이 없다면,
<tag></tag>
와 같이 표현되는 경우
<tag/>
와 같이 표현 가능

태그에는 src, style등의 속성을 담을 수 있다.

div vs span
div 태그는 한 줄을 차지
span 태그는 컨텐츠 크기만큼 공간을 차지한다

img : 이미지 삽입
이미지 태그는 닫는 태그가 없다
<img src =
태그안에 src 속성

a :링크 삽입
<a href:"http~" target: blank   
ul, li: 리스트, ol : 순서 O

input, textarea: 다양한 입력 폼 태그
<input type="text", "checkbox" placeholder: 
<input type= "radio" name="option1" value=> 옵션 A
<input type: "radio" name="option1" value= > 옵션 B 
이렇게 하면
radio는 둘 중 하나 선택 가능

type=checkbox
checkbox는 여러 개 체크 가능

textarea 는 줄바꿈이 되는 입력 폼 태그

button 태그

input 요소는 type 속성을 text, radio, checkbox 등으로 설정해서 다양한 형태로 변형할 수 있다

textarea 요소는 줄 바꿈이 가능한 입력 폼을 생성

placeholder 속성을 사용하면, 입력폼 안에 작성해야 하는 내용에 대한 힌트를 제공

3. 시맨틱 요소의 종류

시맨틱이란 ‘의미가 있는, 의미론적인'

div 태그의 경우 의미가 없는 구분을 위한 태그기 때문에 남용하기 보다는
좀 더 불필요한 태그를 줄이고 의미있는 태그 작성을 위해
시맨틱 요소 사용

section 요소는 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는 데 사용

div 요소는 HTML5 이전에는 하나의 구역(division)을 나타내기 위해 사용할 수 있었지만, 지금은 어떤 큰 구역을 구분하기 위하여 사용되는 것은 지양
다만, 작은 구역에서 불가피하게 div를 사용해야 하는 경우엔 사용 O

article : 독립적이고 자체 포함된 콘텐츠를 지정

aside : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용

footer : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용.

header : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있음

nav : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용. 보통은 안에 ul태그를 넣어 목록 형태로 사용.

main : 문서의 주된 콘텐츠를 표시.

4. HTML 심화

&& 체크 &&

만들고 싶은 앱의 와이어프레임을 그려볼 수 있다.

와이어프레임만 보고 HTML로 코딩할 수 있다.

div 요소 또는 section, header 등의 시맨틱 요소로 영역을 구분하는 이유를 이해할 수 있다.

HTML 문서에서 언제 id 혹은 class를 사용해야 하는지 이해할 수 있다.

(1) 웹 페이지의 구조잡기

큰 틀에서 영역 나누기
각 영역을 태그로 표현하기

<form> 요소는 일반적으로 사용자가 입력한 값을 다른 페이지로 전송하는 역할을 한다.
예를 들어 로그인 시 <form> 요소를 사용하여 <input> 요소, <button> 요소 등의
자식 요소를 감싸는 경우에 자주 사용. 목적이 명확하므로, 단순히 영역을 나누기 위해
사용하는 <div> 요소보다는 더 sementic한 요소 사용이라고 할 수 있다.
단, 페이지 전환이 되는 액션이 발생할 수 있으므로, 주의가 필요

(2) id 및 class 목적에 맞게 사용하기

id ㅡ 고유한 이름을 붙일 때 unique
class ㅡ 반복되는 영역을 유형별로 분류할 때

읽기 영역 자체는 고유하므로 id로 이름을 붙인다.
반복되는 항목은 class로 지정한다.
같은 class 값을 지정해줌으로서, 동일한 유형임을 알 수 있다.

=> 나중에 css 로 구분해서 해주기 편해짐

요소==태그

P 요소는 paragraph(문단)의 약자로, 하나의 문단을 표현하기 위하여 사용