ABOUT HTML

HTML이란?

Hyper Text Markup Language 의 약자로 하이퍼 텍스트 방식의 마크업 언어

하이퍼 텍스트, 하이퍼 링크란?

단순 텍스트를 넘어서 텍스트나 이미지 등의 형태를 통해 링크로 연결되어 화면 이동을 가능하게 하는 기능을 제공하는 텍스트

마크업 언어란?

태그 등을 이용하여 데이터를 모니터 상에 표기하기 위해 사용하는 언어

언제 HTML을 사용할까?

우리가 흔히 사용하고 접하는 웹페이지를 만들 때 사용

WWW(World Wide Web) VS Internet

WWW

인터넷 상에서 문서와 다른 리소스에 접근할 수 있는 방법을 제공하는 공간 -> 소프트웨어적인 느낌
-> 웹 브라우저를 통해 웹 페이지에 방문하고, 하이퍼링크를 클릭하여 다른 웹 페이지나 리소스에 접근

Internet

전 세계적으로 연결되어있는 거대한 네트워크 (컴퓨터와 컴퓨터를 연결함) -> 하드웨어적인 느낌
해저 케이블을 통해 연결되어 있음
www는 internet이라는 인프라 위에서 돌아가는 하나의 서비스

HTML Tag

태그는 < > 기호를 사용
< > 는 Opening Tag </ > 는 Closing Tag

<p>안녕하세요</p>

태그는 속성(attribute)을 가짐

각 태그가 가지는 고유한 특성, 공통으로 가질 수도 있음

<a href="www.naver.com"> Naver </a>

중첩 사용

태그 안에 태그를 넣을 수 있다. -> 부모 자식 관계

<!-- ul>li*3 -->
<ul>
    <li>Burger</li>
    <li>Pizza</li>
    <li>Chicken</li>
</ul>

폼(Form)과 유효성(Validation)

폼은 사용자의 입력을 받는 태그

<form action="API">  
  <label for="fname">user name:</label><br>  
  <input type="text" id="user-name" name="userName"><br>  
  <label for="lname">user email:</label><br>  
  <input type="email" id="user-email" name="userEmail">  
</form>

위의 예시를 보면 css에서 사용하는 id는 Kebab Case(my-name)을 사용하고
변수명으로 사용되는 부분은 Camel Case(myName)으로 사용해야함
또한 input 태그에 속성을 추가하여 유효성 검사도 해줌
ex) email은 반드시 @가 들어가야함 등

SEO(검색 엔진 최적화)

검색 결과에서 상위에 노출될 수 있도록 내 콘텐츠를 최적화하는 방식
-> 우선순위를 결정할 때 title 테그, h1 테그의 키워드도 고려대상이 되므로 중요한 부분!! 따라서 한페이지에 하나만 넣는 것을 추천함

lighthouse

크롬앱스토어에서 다운 가능
lighthouse를 사용하여 웹페이지 성능 체크할 수 있음

그 외 용어들

CTA(Call to Action) : 뭔가 눌러야될 것처럼 생겨서 클릭을 유도하는 것
lorem : 더미텍스트를 넣을 때 사용! lorem숫자 를 입력하면 숫자 길이만큼의 더미데이터가 생성됨