Unit3-[HTML]기초 Chapter3. HTML 심화 개요

📌 HTML 심화 개요 

와이어프레임은 말 그대로 "와이어로 설계된 모양"을 의미하며, 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한것입니다.웹 애플리케이션을 개발할 때, 와이어프레임은 레이아웃의 형태를 잡는 단계를 의미합니다. 이 단계에서는 와이어프레임을 설계하는 방법과, id와 class속성을 목적에 맞게 사용하는 방법을 학습합니다.

 

📌 Chapter3-1. 웹 페이지의 구조잡기 

HTML은 틀과 구조를 만드는 언어이다. 

마크업언어라는 것은 구조를 만드는 언어이다.

이 사진은 N사이트의 댓글창이다. 이 화면을 만드는 과정을 소개하겠다. 결과적으로 이 화면을 만들기위해서는 HTML과 CSS가 필요하다. 어떻게 설계를 할까? 실제로 우리가 작업을 완료하면 이 댓글창이 완벽하게 작동이 되진 않는다. 우리의 목표는 완벽하게 작동되게 만드는게 아니라 목업(껍데기)을 만든다고 생각하자. 

1.큰 틀에서 영역 나누기

위 댓글창은 2가지 영역으로 나눌 수 있다.바로 쓰기(writing)영역과 읽기(reading)영역이다. 현재 읽기영역에는 게시물이 2개가 있는걸 확인하자.

2.각 영역을 태그로 표현하기

쓰기 영역을 3개의 태그로 표현할 수 있다. 하지만 이게 다가 아니고 3개의 태그들을 하나의 영역으로 감싸줘야 한다. 

이번에는 <div> 로 영역을 감싸보자. 의미를 담고 싶다면 <section>,<form> 과같은 태그들을 사용해도 좋다.

위 그림에 표시된 거 처럼 코딩해보자. CodeSandbox를 이용하겠다.

완전히 똑같지 않지만 우리는 아직 css를 배우지 않았기 때문에 괜찮다. 구조를 짜는 연습을 하자.

 

이번엔 읽기(reading)영역을 태그로 표현해보자. 아래 그림과 같은 태그를 사용하면 된다.

얼추 비슷하게 댓글 창의 구조를 따라해보았다. 

📌 Chapter3-2. id와 class를 목적에 맞게 사용하기 

 

id : 고유(unique)한 이름을 붙일 때

class : 반복되는 영역을 유형별로 분류할 때

 

전에 만든 댓글창에 id 와 class 를 용도에 맞게 써보자.

 

화면에 간단히 표현하기 위해 셀렉터로 표현 해보겠다.

보다시피 id를 사용한 이유는 반복되는 영역 없이 고유한 영역이기 때문에 id로 표현하는게 더 적합하다.

 

하지만 읽기(reading)영역은 반복되는 댓글영역이 있기 때문에 class 를 부여 하였다.

ul 부분은 고유한 읽기영역을 표기하기위해 id를 부여하자.

📌  Chapter3-3. 로그인 페이지 만들기2 

 

🖥️  실습

앞서 Chapter2-3에서 진행한 실습에서 간단한 로그인 페이지를 만들어 보았었다. 이번 실습에서는 이 로그인 페이지의 HTML에 id와 class를 추가해보자. 이번에는 VScode가 아닌 CodeSandbox를 사용한다. 

 

✅ 1. 실습 파악하기

우선 index.html을 확인해보면 앞서 진행했던 실습과 동일한 코드가 들어있는 것을 확인할 수 있다.

<input type="text" placeholder="ID">
<input type="password" placeholder="password">
<button>Login</button>
<label> <input type="checkbox">Keep Login </label>

<link rel="stylesheet" href="style.css">

그런데 마지막 줄엔 처음 보는 코드가 있는 것도 보인다. 신경쓰지말자. 나중에 배울거다. 지금은 id와 class 종류에 따라 요소의 디자인을 변경시켜주는 코드라고만 알아두면 충분하다. 콘텐츠를 따라서 id와 class를 적절하게 추가하면 화면의 디자인도 함께 변하게 될 거다.

 

그럼 앞서 공부한 id와 class를 추가하는 방법을 사용해 id와 class를 추가해보자. 각 요소에 추가해줄 id와 class는 다음과 같다.

✅ 2. id 추가하기

첫 번째 태그는 같이 진행해보자. 우선 아이디부터 추가해보자. 아이디를 추가하기 위해서는 여는 태그 안에 id= 를 적고, 뒤에 문자열 형태로 추가할 아이디를 적어주면 된다. 우리가 추가할 아이디명은 id-input이니 id="id-input" 이라고 작성하자.

<input id="id-input" type="text" placeholder="ID">

코드를 저장한 후 미리보기 화면을 확인해보면 id만 작성했을 뿐인데 input창의 모양이 변한 것을 확인할 수 있다.

 

✅ 3. class 추가하기

이번에는 같은 태그에 클래스를 하나 추가해보자. 클래스를 추가하기 위해서는 여는 태그에 class= 를 적고, 뒤에 문자열 형태로 추가할 클래스를 적어주면 된다. 우리가 추가할 클래스명은 input이니까 class="input" 이라고 작성하자.

<input id="id-input" class="input" type="text" placeholder="ID">

작성을 완료했다면 코드를 저장한 후 미리보기 화면을 확인해보자. 이번에도 화면이 변한 것을 볼 수 있다.

첫 번째 태그에 아직 추가할 클래스가 하나 더 남아있다. focus 클래스이다. 하나의 태그에 클래스를 여러개 작성해주고 싶을 땐 하나의 문자열 안에서 띄어쓰기로 구분해주면 된다.

<input id="id-input" class="input focus" type="text" placeholder="ID">

인풋 태그를 클릭했을 때 배경색이 변하는 것을 확인할 수 있다.

표에 맞춰서 각 태그에 맞는 id와 class를 추가해보자. 그리고 하나 씩 추가할 때마다 코드를 저장하며 화면이 변하는 것도 확인해보자.