코드스테이츠/HTML

Unit3-[HTML]기초 Chapter2. HTML 기초

욱둥 2022. 12. 21. 10:20

HTML(HyperText Markup Language)은 JavaScript와 같은 프로그래밍 언어가 아니라 웹 페이지의 뼈대를 구성하는 마크업언어입니다.이번 섹션의 목표는 하나의 완성된 웹 애플리케이션을 만드는 것입니다. 이를 위해 HTML로 구성된 뼈대 위에 JavaScript로 기능을 구현하고, CSS로 스타일을 입히는 과정을 거치게 될 것입니다. 따라서, 이 단계에서 HTML에 대한 기본적인 개념과 사용법을 충분히 익히는 것이 중요합니다.

 

 Chapter2-1. HTML 기본 구조와 문법 

HTML  - 웹 페이지의 틀을 만드는 마크업 언어

 

선언을 빼고 나머지 태그들은 쌍이 있다.<> </> 여는 순서와 닫는 순서가 철저하게 지켜지고있다. 이것을 트리 구조라 한다.

 

왼쪽 = 코드 , 오른쪽 = 왼쪽 코드에 대한 설명

HTML 태그들은 정말 많이 있다. 다 외우기에는 힘들기 때문에 주요 태그들만 기억하자.

HTML 은 '이런 구성으로 되어있다.' '트리구조다.' '여는태그 닫는태그가 있다.' 정도 기억하고 그리고 닫는 순서라던지 이런것들도 철저하게 지켜지고 있다. 예를들어 <div>가 열리고 그 중간에 <span> 이 열렸는데 그 중간에 </div>가 닫히는 경우는 없다. <span>이 열렸으면 </span>이 닫히고 그후에 </div>를 닫아야 한다.

 

간혹가다가 닫는 태그가 없는 태그도 있다. 태그 내부에 내용이 없는 태그들은 셀프-클로징인 경우가 많다.

src는 태그의 속성이다.

 

 

 Chapter2-2. 자주 사용하는 HTML요소 

HTML 에서 가장 많이 쓰이는 태그들이다.

 div 와 span 태그 의 차이점 

div태그는 한 줄을 차지하고 , span 태그는 컨텐츠 크기 만큼의 공간을 차지한다.

img 태그는 셀프 클로징 태그이다.

src는 속성

"https://~~~~"는 속성값이다.

href 속성 - hypertext reference '하이퍼 참조'

target="_blank" 는 새탭에서 링크를 열게 해준다.

ul(ol)과 li가 한쌍

ul(ol)안쪽에 또 ul(ol) 이 들어갈수도 있다.

 

ul(unordered list) - 순서 없는 목록 표시

ol(ordered list) - 순서 있는 목록 표시

 

지금 나오는 것은 정말 웹,앱 에서 필요한 것이다. 

 

 라디오 버튼 과 체크박스의 차이점 

라디오 버튼은 둘중 하나만 선택되고

체크박스는 여러개가 선택가능하다

쉽게 말해서 라디오 버튼은 그룹핑 설정 가능하고, 체크박스는 자유롭게 여러개를 선택할 수 있다.

라디오 버튼을 그룹 설정해야 동시에 선택이 안된다. name 속성을 맞춰주면 된다.

 

textarea는 꼭 여는태그와 닫는태그가 있어야하고

input과 다르게 줄바꿈(multi line)이 된다.

 

무언가를 전송할때 쓰는 버튼(button) 태그 이다.

 

 

 Chapter2-3. 로그인 페이지 만들기 

1. 아이디, 비밀번호 입력 창 만들기

아이디를 입력하는입력폼은 input 태그를 사용한다.

 

VScode에서 내가 만든 파일 login.html 에 input 태그를 넣어보자.

<input>

위 코드를 입력했다면 브라우저가 여러분이 입력한 input태그를 읽어서 입력폼을 보여줍니다. 어떻게 확인할 수 있을까요? 왼쪽 사이드바에서 파일명을 오른쪽 클릭해 보면 나오는 메뉴 중 가장 하단에 Open In Default Browser를 클릭하면 됩니다. (이 메뉴는 VScode를 설치할 때 함께 설치한 Extension인 'open in browser'를 설치했을 경우 나타나는 메뉴입니다.)

브라우저에서 새 창이 열리면서 HTML파일이 열립니다. 브라우저가 여러분이 입력한 input 태그를 읽어서 입력폼을 생성한 것을 확인할 수 있습니다. 현재는 여러분의 로컬 컴퓨터에 있는 HTML파일이 열린 것이기 때문에 만약 여러분이 파일을 수정했다면, 저장하고 새로고침을 해주어야 수정한 내용이 반영됩니다.

 

비밀번호를 입력할 폼도 만들어보자.

<input>
<input>

하지만 아직은 두 입력폼이 똑같다. 아이디 입력폼에는 type속성을 text로, 비밀번호 입력폼에는 type속성을 password로 추가하겠다.

<input type="text">
<input type="password">

placeholder 속성을 사용하면, 입력폼 안에 작성해야 하는 내용에 대한 힌트를 제공할 수 있습니다.

<input type="text" placeholder="ID">
<input type="password" placeholder="password">

codesandbox를 통해 결과물을 확인할 수 있다. ID와 password에 각각 입력해보고 차이점을 확인!

2. 로그인 버튼 만들기

로그인 버튼을 만들기 위해서는 <button> 태그를 사용한다. 여는 태그와 닫는 태그 사이에는 값(value)을 넣을 수 있다.

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

생성된 버튼은 클릭이 가능하지만 아직 버튼은 작동하지 않는다. 현재는 로그인 페이지에 사용되는 태그의 종류를 확인하는 것으로도 충분하다.

3. 로그인 상태 유지 체크박스 만들기

여기에 로그인을 유지하기 위해 체크가 가능하도록 체크박스를 추가하겠습니다.<input>태그를 사용합니다. 단, type을 checkbox로 설정합니다.

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

 Chapter2-4. 시맨틱 요소 

시맨틱 요소란?

HTML의 최신 버전인 HTML5에서는 시맨틱 웹(semantic web)이 중시되면서 여러 시맨틱 요소(semantic element)가 새롭게 만들어졌습니다. 시맨틱이란 ‘의미가 있는, 의미론적인'이라고 해석할 수 있습니다. 다시 말해, 의미를 가진 요소를 사용하는 방식을 추구하기 시작했습니다. 시맨틱 요소 중 하나인 <h1> 요소를 예로 들어 보겠습니다. 최상위 제목(top level heading)을 표현할 때 사용하는 요소인 <h1> 요소를 사용할 경우, 브라우저가 큰 폰트 사이즈를 적용할 뿐 아니라, 위아래로 간격을 주어 제목처럼 보이도록 합니다. 이와 같은 효과는 <div> 요소, <span> 요소에 CSS 속성을 추가하여 <h1> 요소와 똑같이 보이도록 할 수 있습니다. 그러나 <h1> 요소를 사용할 때처럼 의미적 가치는 없다고 할 수 있습니다.

시맨틱 요소가 사용되기 이전에는 각 영역을 지정하기 위해 <div> 요소를 주로 사용했습니다. 그러다 보니 웹 페이지 하나에 <div> 요소 수십 개가 중첩된 이른바 <div> 지옥이 되는 경우가 많았습니다.

 

시맨틱 요소를 사용해야 하는 이유

의미 있는 요소를 사용하는 것보다 <div> 요소를 사용하되 용도에 맞게 스타일을 부여하면 되는데, 왜 시맨틱 요소를 사용하는 것을 추구할까요? 그 이유를 몇 가지 소개해 보겠습니다. 첫째, 검색 엔진이 시맨틱 요소를 더 좋아하기 때문입니다. 네이버, 구글 등은 모두 고유한 검색엔진을 보유하고 있습니다. 여러분이 키워드를 입력하고 검색을 하면 각 웹 페이지를 방문하여 그 키워드를 포함하고 있는지 확인하여 결과를 보여 줍니다. 그런데 검색 엔진이 웹페이지들을 방문할 때, 시맨틱 요소를 중요한 키워드로 고려합니다. 즉, 시맨틱 요소에 담긴 의미에 따라 검색 결과가 상위 노출이 결정될 수 있다는 것입니다. 둘째, 여러 개발자가 함께 작업할 때 <div> 요소를 탐색하는 것보다 의미 있는 코드 블록을 찾는 것이 훨씬 더 편리하기 때문입니다. 뿐만 아니라, 요소 안에 채워질 데이터 유형도 예측하기 쉽습니다.

 

따라서 HTML 요소를 작성할 때, 항상 작성할 데이터를 가장 잘 설명할 수 있는 요소는 무엇일지 고려해야 합니다.

 

시맨틱 요소의 종류

시맨틱 요소의 종류는 굉장히 다양하지만 주로 쓰이는 몇 가지를 알아보겠습니다.

  •  <article>  : 독립적이고 자체 포함된 콘텐츠를 지정합니다.
  •  <aside>  : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다.
  •  <footer>  : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.
  •  <header>  : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.
  •  <nav>  : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에 <ul>을 넣어 목록 형태로 사용합니다.
  •  <main>  : 문서의 주된 콘텐츠를 표시합니다.

다른 HTML 요소와 마찬가지로, 시맨틱 요소와 의미를 모두 암기하고 있을 필요는 없습니다. 필요할 때 검색해서 사용할 수 있을 정도면 충분합니다.