💡 25-06-26 (목)
다음주면 포트폴리오라니 😱
완벽함도 중요하지만 하루하루 최선을 다하자 🔥🔥
HTML
Hyper Text Markup Language
✔️ Hyper Text는 기존의 일반적인 문서들보다 더 뛰어난 기능을 담고 있는 텍스트라는 의미다
↪︎ Hyper : 최고의, 과도한
그 최고의 기능 중 하나가 바로 하이퍼링크이다
하이퍼링크는 텍스트를 클릭하면 다른 페이지로 이동할 수 있게 해주는 기능이다
▶︎ 페이지에서 다른 페이지로 이동하게 하는 링크 기능
웹이 처음 만들어졌을 때의 핵심은 정보를 서로 연결하는 것❗️
종이책처럼 고정된 문서가 아니라, 어떤 단어를 클릭하면 다른 페이지로 넘어갈 수 있는 웹페이지를 만들자는 아이디어에서 하이퍼링크가 등장하게 되었다 ‼️
그리고 이렇게 하이퍼링크가 포함된 텍스트를 ‘Hyper Text’라고 부르며 이는 단순한 글이 아니라 서로 연결되는 글을 뜻한다
✔️ Markup Language는 내용을 구조화하고 표시하는 언어이다
(디자인으로 비유하자면 레이어에 이름을 붙이고 정렬하는 것과 같은 개념)
Markup : 원래 인쇄 원고에서 교정 표시를 뜻하는 단어
▶︎ 텍스트의 의미나 역할을 태그로 표시해주는 것으로 마크업(표시) 해줌
Language : 컴퓨터가 이해할 수 있는 코드 언어
▶︎ 단순히 사람이 읽는 문장이 아니라 “이것은 제목이다”, “이것은 중요한 말이다”, “이것은 클릭하면 다른 곳으로 넘어가는 링크다” 라고 컴퓨터에게 알려주는 역할
☑️ 'DOCTYPE html'은 HTML5를 선언한다는 뜻이다
▶︎ 웹페이지가 어떻게 해석되어야 하는지, 무슨 버전인지 알려줌
☑️ html lang="ko"는 현재 웹 문서가 어떤 언어로 작성되었는지를 나타내는 속서이다
▶︎ ko는 문서가 한국어로 작성 / en을 쓰면 영어로 작성된 문서
☑️ HTML 문서는 head와 body로 나뉘는데,
▪️ head
UTF-8 : 한글 같은 문자가 깨지지 않도록 해주는 설정
viewport : 반응형 웹을 위해 필수로 넣는 설정
title : 탭에 표시되는 웹페이지의 제목
▪️ body
실제 웹페이지에서 사용자에게 보여지는 영역의 내용이 작성된다
HTML 태그는 시작태그 - 내용 - 종료태그 구조로 되어있다
(종료태그는 태그명 앞에 슬래시(/) 를 붙여 닫아줌)
h1부터 h6까지는 태그명이고 이 태그 안에는 속성명을 넣어 각 태그의 역할이나 스타일을 지정할 수 있다
또한 속성명에는 속성값을 넣어, 그 속성이 어떤 값을 가지는지를 알려준다
☝️ 시각장애인이 웹페이지를 볼 때 VS Code에서는 한국어로 작성되어 있어도 lang 속성이 en으로 설정되어 있으면 스크린 리더기가 영어 발음으로 읽어 제대로 전달되지 않을 수 있다
☝️ 이미지 태그에 alt 속성을 잘 작성해주면 이미지를 볼 수 없는 사용자들에게도 “여기에 어떤 이미지가 있다”는 설명이 제공된다
▶️ 태그, 구조, 정보들을 올바르게 작성해두면 스크린 리더가 화면의 내용을 정확히 읽어줄 수 있어 모든 사용자에게 정보가 잘 전달될 수 있다
글꼴태그
▪️ h1~h6 (Heading)
웹 페이지의 제목 또는 부제목을 표현할때 사용하며 숫자가 작을수록 큰 제목을 표시하는데 사용한다
▪️ P (Paragraph)
하나의 문단을 표시할때 사용한다
▪️ hr (Horizontal Rule)
가로로 선을 긋는 태그다 (종료태그 ❌)
▪️ br (Break)
줄바꿈 태그로 HTML에서 개행 역할을 한다 (종료태그 ❌)
내용을 시각적으로 구분짓고 싶을때 사용한다
▪️ i (Italic)
텍스트를 이텔릭체로 표시할때 사용한다
▶︎ 의미적인 강조보다는 디자인적으로 강조하고 싶을 때 주로 사용
▪️ em (Emphasis)
텍스트를 이텔릭체로 강조할때 사용한다
▶︎ 단순히 스타일을 주는 것을 넘어 해당 단어의 중요성을 나타냄
▪️ b (Bold)
텍스트를 진하게 표시할때 사용한다
▶︎ 의미를 강조하기보다는 텍스트를 눈에 띄게 하고 시각적 효과를 주고 싶을 때 사용
▪️ Strong
텍스트를 진하게 강조할때 사용한다
▶︎ em 태그보다 더 강한 의미 전달이 필요할 때 사용
시각적 vs 의미 강조
태그들의 사용 용도는 크게 다르다❗️
✔️ b 태그와 i 태그는 단순히 텍스트를 진하게 하거나 이탤릭체로 표시하는 역할만 하며 시각적, 디자인 효과를 위한 태그다
✔️ strong 태그와 em 태그는 페이지 내에서 실제로 중요한 부분을 강조하고 싶을 때 사용되며 각 태그의 용도에 맞게 사용하면 웹 접근성 향상에 큰 기여를 한다
☝️ 브라우저에서 스크린 리더를 사용할 때 음성 합성 도구가 strong 태그를 만나면 실제 말처럼 거센 억양으로 읽어 강조를 표현해준다
Vs code 실습
1️⃣ CLASS TEST라는 폴더를 만들어서 VS Code에서 해당 폴더를 열어준다
2️⃣ index.html이라는 새 파일을 하나 만들어준다
3️⃣ 느낌표(!)를 입력하고 Tab 키를 누르면 HTML 기본 구조가 자동으로 생성된다
4️⃣ 파일에서 오른쪽 마우스를 클릭한 후 ‘Open with Live Server’를 선택하면 웹 화면이 나타난다
⏺️ VS Code에서 작성한 코드들이 웹 화면에서 어떻게 표시되는지 직접 확인할 수 있다
왼쪽 코드 창에서 작성한 HTML 태그와 내용들이 오른쪽 웹 화면에 실제 디자인과 구조 그대로 출력되는 것을 볼 수 있다
Vs code 실습
✔️ div와 span 태그는 영역을 지정하는 태그다
HTML에서는 각 태그가 용도에 맞는 속성값을 가지고 있는데 대표적으로 블록 요소와 인라인 요소가 있다
▪️ div는 블록 요소에 해당한다
▶︎ 레이아웃처럼 구역을 나눌 때 많이 사용
블록 요소는 한 줄 전체를 차지하며 div도 마찬가지로 영역이 한 줄 끝까지 확장된다
div는 한 줄 전체를 차지하기 때문에 뒤에 오는 요소가 자동으로 줄바꿈되어 아래에 배치된다
☝️ h1~h6, ul, li 모두 블록 요소다
▪️ span은 인라인 요소에 해당한다
▶︎ 작은 부분을 강조하거나 문장 내 특정 부분을 감쌀 때 사용
필요한 만큼만 공간을 차지하므로 줄바꿈 없이 옆에 있는 요소들과 같은 줄에 나란히 배치된다
인라인 요소는 필요한 만큼의 영역만 차지하며 span도 마찬가지로 글자나 내용만큼만 영역이 생긴다
▶️ div와 span은 각각 블록 요소와 인라인 요소라는 고유한 속성값을 가지고 이러한 특성에 맞게 화면에 표시된다
별표(*)와 슬래시(/)를 조합해 코드에 주석을 달 수 있다
오디오 태그를 사용할 때도 오디오 파일의 경로를 정확히 지정해줘야 한다
images 폴더와 같은 레벨에 assets 폴더를 만들어 오디오 파일을 넣어준다
✔️ audio 태그는 웹페이지에서 오디오 파일을 재생할 수 있게 해준다
▶︎ 'controls' 속성을 반드시 넣어줘야 컨트롤바가 표시됨
✔️ video 태그는 웹페이지에서 동영상을 재생할 수 있게 해준다
▶️ 이미지 태그를 사용하는 것과 같은 형식으로 작성하면 된다
✔️ a 태그는 웹페이지에서 다른 페이지나 사이트로 이동할 수 있는 하이퍼링크를 만들어준다
▪️ a 태그를 사용해 링크를 걸 수 있다
target="_blank"를 쓰지 않으면 같은 탭에서 네이버로 넘어간다❗️
▪️ 타겟을 걸어놓고 이동도 할 수 있다
'타겟으로 이동'을 누르면, target 속성에 적힌 해당 아이디 위치로 이동하라는 뜻이다
✔️ table 태그는 웹페이지에서 표를 만들 때 사용한다
▶︎ tr, th, td 태그로 구성
전체로 감싸주고 그 안에 caption 태그를 입력한다
↪︎ 테이블에 대해서 설명해주는 태그
✔️ th와 td는 표에서 각 셀을 만들 때 사용하는 태그다
▪️ th : 표의 헤더(제목 셀)
▪️ td : 표의 일반 데이터 셀
border-collapse를 사용해야 표의 선이 겹치지 않고 하나로 보인다
스타일은 body가 아닌 head 안에 작성❗️
✏️ 오늘 HTML 같은 내용 다시 실습하기
요즘 다이어트를 하고 있어서 주제를 다이어트로 정했고 내용은 챗GPT에게 부탁해서 작성했다❗️
링크를 누르면 유튜브 영상이 열리도록 바꿨다
표도 챗지피티한테 ㅎㅎ 😁
✏️ 데일리 UI 하기
