HTML 기초 (1) - 태그란?

임베디드 개발자가 웹을 공부해야 하는 이유

Web은 IoT개발자로서 필수 지식 중 하나

• IoT 개발자 필요 기술
  • H/W 기본기
  • OS Level
  • App Level
  • 더 나아가 Web까지

• 백엔드 기준
  • Java
  • Node.js (JavaScript 기반)
  • Python (Flask / Django)

현재 웹 트렌드 : Java, JS

• Back-end : Java(Spring (boot))와 Node.js(JavaScript)
• Front-end : JavaScript
• DB는 MySQL

 

질문 하는 법

• 질문 정리 / 메타 인지가 중요하다
  1. 내가 모르는 것에 대해 5번 정도 생각하기
  2. 해결이 될 방법을 3가지 시도하기
  3. 에러 내용을 파악하고 구글 검색하기
  → 해결이 되었다면 주변 사람들과 공유

 

HTML (Hyper Text Markup Language)

• 태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어

<열린태그 속성="속성값"> 콘텐츠 </닫힌태그>

• 태그 : 입력된 정보의 성격
• 속성 : 그 태그가 가진 역할
• 속성값 : 태그가 수행할 역할을 명령함
• 콘텐츠 : 열린태그와 닫힌태그 사이의 내용물

태그

• <br>
  • 엔터 입력(개행)을 의미
• <h1> ~ <h6>
  • 제목 태그를 나타냄
  • 숫자가 작을수록(↓) 폰트가 커지고(↑), 중요도가 크다!
  • 이 방법 말고 CSS에서 폰트 관련 세부 설정 가능
• <ul>
  • unordered list (순서가 없는 리스트)
  • 다음과 같이 사용할 수 있음

<ul>
        <li>
            <a href=#None>Browse the first website</a>
        </li>
        <li>
            <a href="#None">Browse tge first website using the line-mode browser simulation</a>
        </li>
        <li>
            <a href="#None">Learn about the birth of the web</a>
        </li>
        <li>
            <a href="#None">Learn about CERN _the physics laboratory where the web was born</a>
        </li>
    </ul>

 

• <ol>
  • ordered list (순서가 있는 리스트)
• <a>
  • href 속성 기능

  <a href ="https://lg960214.tistory.com/">나의 Tistory 주소</a>

  
  
  • href에 이동할 주소 기입, 태그 사이에 주소 이름 작성
  • 다른 페이지 이동 or 같은 페이지의 다른 위치 이동 가능
• <p>
  • 문단을 의미
  • <br> 태그를 이용하여 줄바꿈할 수도 있지만, 가독성을 위해 구분

 

• <input> : 사용자의 입력을 받음

  <input type="text" // 해당 input 태그에 대한 타입을 명시; password, button, checkbox, radio, date, ...
  				value=""   // 기본값, default는 빈 값 
  				placeholder="" // 회색으로 미리 보여지는 안내문구
  >
  

  • checkbox / radio : checkbox는 다중 선택 가능, radio는 한 가지만 선택 가능
    
    • name을 활용해 group으로 묶기 가능

      남: <input type="radio" value="java" name="class" checked>
      여: <input type="radio" value="python" name="class">
      

      • submit : 서버에 제출하기 위한 버튼
        • value 미지정 시 “제출”이 기본값으로 표시
        • 클릭 시 새로고침이 일어남 (기본값)

      <input type="submit" value="제출하기">
      

      • button : 버튼으로 활용할 수 있는 태그
        • value에 값을 지정하지 않으면 빈 값이 표시

      <input type="button" value="button 1">

• <form> : 서버로 전송하기 위한 양식 태그
  • 태그를 사용해도 눈에 보이지는 않음
• <select> : option 중에 선택, 전송하기 위한 태그
  • “selected” 사용 시 기본값으로 사용 가능
  • option이 없으면 선택지가 없음

  <select>
      <option value="python">파이썬</option>
      <option value="java" selected>자바</option>
      <option value="c">C</option>
  </select>
  

• <div> : division의 약자; 레이아웃을 구분하기 위해 사용
  • CSS와 함께 쓰인다
  • 줄바꿈이 일어난다
• <span> : 특별한 기능은 없음
  • CSS와 함께 쓰인다
  • 줄바꿈이 일어나지 않는다

• <img> : 이미지를 나타내기 위한 태그

<img src= "이미지 경로" alt="이미지에 대한 텍스트 설명">

alt는 이미지가 표시되지 않는 경우, 해당 메세지를 대신 출력