Goorm(부트캠프)/Front-End 3회차
HTML/CSS(1일차)
inzero98
2025. 3. 6. 15:12
반응형
HTML/CSS/JS의 개념
- HTML : 웹사이트의 구조를 이루는 뼈대
- CSS : 웹사이트를 꾸며주는 스타일링
- JS : 웹사이트가 사용자와 상호작용할 수 있도록 움직임을 더해주는 관절
HTML : HyperText Markup Language
- Markup Language : 자료의 구조(웹페이지)를 표한하기 위한 언어
템플릿
- < > 열린 태그 < /> 닫힌 태그 : HTML은 열린 태그가 있다면 반드시 같은 단어로 닫힌 태그 있어야함
- <!DOCTYPE html> : 이 친구의 역할은 문서 형식(document type)을 HTML5로 지정합니다.
- <html> </html> : 실질적인 HTML document의 시작과 끝을 나타냄
- <head> </head> : document title, 외부 파일의 참조, 메타데이터 설정 등의 정보가 들어감
- 이 정보들은 브라우저에 표시되지 X - <body> </body> : 웹 브라우저에 출력되는 모든 요소 (웹페이지에 단 하나만 존재함)
Attirbute(어트리뷰트)
- 어트리뷰트 = 속성
- 요소의 성질, 특징을 정의하는 명세 (요소에 추가적인 정보를 제공)
- ex) src="html.png"에서 src는 어트리뷰트명(Attribute Name), "html.png"는 어트리뷰트 값(Attribute Vlaue)
글로벌 어트리뷰트(Global Attribute)
- 모든 HTML 요소가 공통으로 사용할 수 있는 어트리뷰트 (몇몇 요소 안 될 수도 있긴 함)
| Attribute | Description |
| id | 유일한 식별자(id)를 요소에 지정한다. 중복 지정이 불가하다. |
| class | 스타일시트에 정의된 class를 요소에 지정한다. 중복 지정이 가능하다. |
| hidden | css의 hidden과는 다르게 의미상으로도 브라우저에 노출되지 않게 한다. |
| lang | 지정된 요소의 언어를 지정한다. 검색엔진의 크롤링 시. 웹페이지의 언어를 인식할 수 있게 한다. |
| style | 요소에 인라인 스타일을 지정한다. |
| tabindex | 사용자가 키보드로 페이지를 내비게이션 시. 이동 순서를 지정한다. |
| title | 요소에 관한 제목을 지정한다. |
HTML에서 공백을 삽입하는 방법 :
HTML에서 줄넘김을 삽입하는 방법 : <br>
HTML에서 수평줄을 삽입하는 방법 : <hr>
목록과 표 관련 태그
- ul : 순서 없는 목록
- ol : 순서 있는 목록
table 관련 태그
| tag | Description |
| table | 표를 감싸는 태그 |
| tr | 표 내부의 행 (table row) |
| th | 행 내부의 제목 셀 (table heading) |
| td | 행 내부의 일반 셀 (table data) |
테이블 태그의 어트리뷰트
| attribute | Description |
| border | 표 테두리 두께 지정 (CSS border property를 사용하는것이 더 낫다.) |
| rowspan | 해당 셀이 점유하는 행의 수 지정 |
| colspan | 해당 셀이 점유하는 열의 수 지정 |
img 태그의 어트리뷰트
| attribute | Description |
| src | 이미지 파일 경로 |
| alt | 이미지 파일이 없을 경우 표시되는 문장 |
| width | 이미지의 너비 (CSS에서 지정하는 것이 일반적이다.) |
| height | 이미지의 높이 (CSS에서 지정하는 것이 일반적이다.) |
audio 태그의 어트리뷰트
| attribute | Description |
| src | 음악 파일 경로 |
| preload | 재생 전에 음악 파일을 모두 불러올 것인지 지정 |
| autoplay | 음악 파일을 자동으로 재생할 것인지 지정 |
| loop | 음악을 반복할 것인지 지정 |
| controls | 음악 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다. |
video 태그의 어트리뷰트
| attribute | Description |
| src | 동영상 파일 경로 |
| poster | 동영상 준비 중에 표시될 이미지 파일 경로 |
| preload | 재생 전에 동영상 파일을 모두 불러올 것인지 지정 |
| autoplay | 동영상 파일을 자동으로 재생할 것인지 지정 |
| loop | 동영상을 반복할 것인지 지정 |
| controls | 동영상 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다. |
| width | 동영상의 너비를 지정 |
| height | 동영상의 높이를 지정 |
form 태그
- 사용자 커뮤니케이션을 위한 태그
- 사용자가 입력한 데이터를 수집하기 위해 사용
form 어트리뷰트
| attribute | Value | Description |
| action | URL | 입력 데이터(form data)가 전송될 URL 지정 |
| method | get / post | 입력 데이터(form data) 전달 방식 지정 |
GET / POST
- GET / POST : HTTP 프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식 (HTTP request method라고 한다.)
- GET : 서버에 데이터 조회를 요청하는 방식
- POST : 특정 데이터 생성을 요청하는 방식
input 태그
- form 태그에서 중요한 태그
- 사용자로부터 입력 받기 위해 사용
- 다양한 종류가 있으며 type 어트리뷰트에 의해 구분된다.
자주 사용되는 type 어트리뷰트
| attribute | Description |
| button | 버튼 생성 |
| checkbox | checkbox 생성 |
| date | date 생성 |
| file | 파일 선택 form todtjd |
| password | password 입력 form 생성 |
| radio | radio button 생성 |
| submit | 제출 button 생성 |
select : 복수 개의 리스트에서 복수 개의 아이템을 선택할 때 사용
textarea : 여러 줄의 글자를 입력 받을 때 사용됨
button : 클릭할 수 있는 버튼 생성
- input 태그는 빈 태그
- button 태그는 반드시 닫힌 태그 필요! (버튼에 텍스트나 이미지 같은 콘텐츠 사용 가능)
웹페이지 레이아웃을 구성하기 위한 공간 분할 태그
| tag | Description |
| header | 헤더를 의미 |
| nav | 내비게이션을 의미 |
| aside | 사이드에 위치하는 공간을 의미 |
| section | 본문의 여러 내용(article)을 포함하는 공간을 의미 |
| article | 본문의 주내용이 들어가는 공간을 의미 |
| footer | 푸터를 의미 |
시맨틱 태그
시맨틱 태그가 중요한 이유
- 웹사이트는 검색 엔진에 노출되는 것이 굉장히 중요. 당연한 것이 검색 엔진에 노출되지 않는 웹사이트를 검색해도 노출되지 않으니 접속하는 사람도 없다는 뜻
- SEO(검색엔진 최적화)를 위해 본인 웹사이트를 검색하기 알맞은 구조로 조정하기도 하는데 이것도 최적화 잘해주려면 웹사이트 정보가 잘 수집된다는 것이 전제로 깔려야한다.
→ 즉, 검색엔진이 HTML코드들로 해당 코드의 의미를 파악해야 해서 시맨틱 태그를 써야한다.
웹 접근성
- 누구에게나 동등한 기회 제공을 위해 장애인이나 고령자가 웹 사이트에서 제공하는 정보를 비장애인과 동일하게 이용할 수 있도록 보장하는 것
접근성 높이는 방법
<img alt='어떤 이미지인지 알 수 있는 대체텍스트' src='mandoo.jpg' />위 코드처럼 alt 속성이 인터넷 연결이 끊겨 이미지가 보이지 않을 때 대체 텍스트이기도 하면서
시각장애인 분들이 스크린리더를 활용할 때 alt의 내용을 듣게 된다.
modal 이라는 것을 웹사이트가 인식하려면 dialog 처럼 모달을 위한 태그를 사용해야된다.
dialog 가 제공하는 웹 접근성 기능
- 포커스 관리 : 모달이 열리면 포커스 자동 이동
- 접근성 트랩 : 포커스를 모달 안에 가두기
- 모바일 네이티브 이벤트 구현 : 두 손가락 문지르기를 통한 모달 닫기 가능
dialog 사용 방법
- Show() : 비모달식 대화상자 오픈 → 외부요소와 상호작용O
- ShowModal() : 모달식 대화상자 오픈 → 외부요소와 상호작용X
ex)
<div>MODAL</div> // ❌
<dialog>MODAL</dialog> // ✅반응형