💡 25-06-25 (수)
HTML / CSS / JS
유튜브, 쿠팡, 네이버 같은 웹사이트를 볼 때, "이건 어떻게 만들어졌을까?" 라고 생각해본 적 있나요❓
웹사이트들을 만드는데 꼭 필요한 3가지 기술이 있다
✅ HTML : 웹 페이지의 뼈대/구조
웹사이트는 제목, 버튼, 문장 등으로 구성되어 있는데, 이러한 뼈대는 HTML 코드를 사용해 구조를 만드는 것부터 시작된다
✅ CSS : HTML로 만든 뼈대를 예쁘게 꾸며주는 역할
"사람들에게 어떻게 보여줄까?"를 결정하는 단계로, 디자인, 색상, 글씨 크기, 배치 등을 조절해 웹사이트의 시각적인 스타일을 완성한다
✅ JS : 웹페이지에 움직임과 동작을 더해주는 역할
사용자가 클릭하거나 입력했을 때 웹사이트가 어떻게 반응할지를 결정하는 기능을 담당한다
☝️ 글자를 자동으로 변환 / 버튼을 누르면 창이 뜨거나 움직임
☝️ Google
fn + F12를 눌러 개발자 도구를 열면, 웹사이트에 사용된 HTML, CSS 코드들을 직접 확인할 수 있다
▶︎ 우리가 평소에 보는 웹사이트들도 이러한 코드들로 만들어진 것
개발환경 셋팅
1️⃣ 크롬 브라우저를 설치한다
2️⃣ Visual Studio code 설치한다
💡 https://code.visualstudio.com/docs/?dv=osx
3️⃣ 실습할 프로젝트 폴더를 생성한다
4️⃣ Vs code에 만든 폴더를 열어준다
5️⃣ Vs code에 확장 프로그램들을 설치한다
확장프로그램
▪️ korean language pack for vsco
: Vs code를 한국어로 볼 수 있게 해주는 프로그램
▪️ bracket pair colorizer
▪️ indent-rainbow
▪️ auto rename tag
▪️ css peek
▪️ html to css autocompletion
▪️ live server
▪️ prettier - code formatter
VS Code
✏️ HTML 태그 사용해서 '내가좋아하는 것' 주제로 작성해보기
HTML에서는 자주 사용하는 코드들의 의미와 사용 방법을 아는 것이 핵심이다 ‼️
경로를 정확하게 맞추기 위해 먼저 폴더를 생성한 뒤 그 폴더를 VS Code에서 열어준다
새 파일 아이콘을 클릭하면 입력창 (Input)이 활성화되고 원하는 파일명을 입력한 뒤 확장자를 '.html'로 작성하면 HTML 파일이 생성된다
그다음 !를 입력하고 Tab 키를 누르면 HTML 파일 안에 기본 구조 코드가 자동으로 생성된다
HTML 문서는 head와 body로 구성되어 있다
'en'은 문서가 영어로 작성되었다는 것을 선언하는 뜻이다
▶︎ 'ko'로 치면은 코드 내용이 한국어로 작성
✔️ h1부터 h6까지는 제목을 나타내며, 숫자가 커질수록 제목의 중요도는 낮아지고 기본 크기도 줄어든다
h1은 단순히 글자를 크게 만들기 위해 쓰는 것이 아니라 웹사이트를 제작할 때 해당 글이 제목이라는 의미를 담아 사용하는 것이다
Open with live server 눌러서 웹 화면을 띄워준다
▶︎ 웹 화면에서 해당 코드가 어떻게 표시되는지 확인 가능
코드창에 내용을 입력한 후 cmd + S를 누르면 화면에 작성한 내용이 라이브로 반영되어 나타난다
Document는 크롬에서 보이는 탭의 이름 (타이틀)을 나타낸다
✔️ hr 태그를 입력하면 구분선이 생성된다
▶︎ h1~h6처럼 닫는 태그가 필요한 태그와 달리, 구분선을 만드는 hr 태그는 닫는 태그가 없다
✔️ p 태그는 문단을 뜻한다
▶︎ VS Code에서는 엔터를 쳐서 문단을 줄바꿈했지만, 웹 페이지에서는 단순한 엔터로는 문단이 분리되지 않는다
✔️ br은 줄 바꿈을 위한 태그다 (닫는 태그 ❌)
▶︎ 문장 뒤에 br을 넣어주면 웹 페이지에서 문단이 줄 바꿈되어 표시된다
✔️ 'cmd + /'를 입력하면 주석 태그가 생성된다
▶︎ 주석 태그 안에 내용을 입력하면, 그 내용은 웹 페이지에는 표시되지 않는다
주석 태그는 코드를 공유하는 사람끼리 또는 나만의 메모를 할때 사용한다
✔️ i 태그와 em 태그는 특정 단어를 강조해준다
▶︎ 특정 단어의 앞뒤에 태그를 넣어주면, 해당 단어가 이탤릭체로 변한다
✔️ strong 태그와 b 태그도 특정 단어를 강조해준다
특정 단어의 앞뒤에 태그를 넣어주면, 글씨가 볼드체로 변해 진하게 표시된다
태그를 올바르게 작성해 웹 표준을 지켜야 하는 이유는 시각장애인이나 불편함을 가진 사람들이 스크린 리더기를 사용할 때도 콘텐츠를 정확하게 전달받을 수 있어야 하기 때문❗️
스크린 리더기는 태그 구조에 따라 내용을 읽어주는데 강조 태그가 들어가면 해당 부분을 강조해서 읽어주는 등 사용자에게 올바른 정보를 전달해 준다
따라서 누구에게나 접근성과 이해도가 높은 웹을 만들기 위해 태그를 정확하고 적절하게 작성하는 것이 중요하다 ⭐️
✔️ ol은 순서가 있는 목록을 작성할 때 사용하는 태그다
▶︎ 항목들에 순서가 자동으로 매겨짐
✔️ ul은 순서가 없는 목록을 작성할 때 사용하는 태그다
▶︎ 번호 대신 점(•)으로 표시
▶️ ol과 ul 안에 li 태그를 넣어 작성하면 된다 (규칙에 맞는 세트)
img 태그에서,
▪️ src = 폴더명 / 불러올 이미지의 파일명과 확장자
▪️ alt = 이미지에 대한 설명
▪️ 크기 조정 = width(너비)와 height(높이)
▶️ 시각장애인들이 이미지를 볼 수 없을 때 스크린 리더가 alt에 있는 내용을 읽어줘서 이미지의 의미를 전달하기 때문에 alt를 넣어준다
workspace → class-wed → learning-html.html 파일과 images 폴더가 있고, images 폴더 안에는 -.jpeg 이미지 파일이 들어있다
HTML에서 이미지를 불러올 때는 HTML 파일과 images 폴더가 같은 계층에 있어야만 경로를 정확하게 지정해 이미지를 불러올 수 있다 ‼️
✔️ dl (Definition List)은 정의 목록을 만들 때 사용하는 태그다 (전체를 dl로 묶는거 잊지말기❗️)
▶︎ 어떤 용어를 적고 그에 대한 설명을 덧붙일 때 사용됨
✔️ dt (Definition Term)은 정의 목록에서 용어나 항목의 이름을 나타낼 때 사용하는 태그다
▶︎ dl로 전체 정의 목록을 감싸주고 dt 태그를 사용해 용어나 항목의 이름을 작성
✔️ dd (Definition Description)은 dt에서 작성한 용어나 항목에 대한 설명이나 정의 내용을 적을 때 사용하는 태그다
▶︎ dt 아래에 넣어주며 2개 이상 들어가도 되고 반드시 1개만 들어가야 한다는 규칙은 없다
