Unit4 - [HTML] 기초

예진·2022년 8월 25일

코드스테이츠 <Section 1> TIL

목록 보기

4/14

🔥 웹 개발 이해하기

1. 웹 개발과 HTML & CSS & javascript

HTML : 마크업 언어 & CSS : 스타일 시트 언어 & Javascript : 프로그래밍 언어

// ex

집을 짓기 위해 도면을 그린다 = HTML
벽면의 색과 재질 등에 대한 정보를 적어둔다 = CSS
밤이 되면 자동으로 현관문 앞에 불이 켜지는 전등을 설치한다 = Javascript

2. Visual Studio Code

마이크로소프트에서 개발한 전 세계에서 가장 대중적인 코드 에디터

Visual Studio Code 장점

OS에 상관없이 사용이 가능하다. (macOS, Linux, Windows 환경 모두 지원)
HTML, CSS, javascript 모두 편집 가능하다.
다양한 extention을 제공해 개발자의 취향에 맞게 커스터마이징 가능하다.
디버깅(debugging)이 편리하다.
무료로 사용 가능하다.

🔥 HTML 기초

1. HTML 기본 구조와 문법

HTML = HyperText Markup Language : 웹 페이지의 틀을 만드는 마크업 언어

HTML은 tag들의 집합
Tag : 부등호<>로 묶인 HTML의 기본 구성 요소
HTML은 트리 구조(Tree Structure)
Self-Closing Tag : 닫기 tag를 쓰지 않아도 된다.
=> <img/> <input/> <br/> <hr/> ... 등이 해당된다.

2. 자주 사용하는 HTML요소

<div> : 블록 레벨 요소, Division

<span> : 인라인 요소, Span

<img> : 문서에 이미지 삽입, Image

<a> : href 특성을 통해 다른 URL로 연결할 수 있도록 한다, Link

구글 링크

<ul> : 정렬되지 않은 목록, 불릿으로 표현, Unordered List

하나
둘
셋

<ol> : 정렬된 목록, 숫자나 문자를 사용해 순서 표현, List Item

하나
둘
셋

<input> : 데이터를 받을 수 있는 대화형 컨트롤, Input (Text, Radio, Checkbox)

<textarea> : 멀티라인 일반 텍스트 편집 컨트롤, Mulit-line Text Input

<button> : 클릭 가능한 버튼, Button

버튼

3. 로그인 페이지 만들기1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
</head>
<body>
    <div>
    <input type="text" placeholder="ID">
    <input type="password" placeholder="password">
    <button>Login</button>
    <label><input type="checkbox">Keep Login</label>
    </div>  
</body>
</html>

위 코드 출력 화면

4. 시맨틱 요소

시맨틱 태그 : 브라우저, 검색엔진, 개발자에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.
=> 코드의 가독성을 높이고 유지보수를 쉽게해준다.

시맨틱 요소의 종류

<header> : 사이트의 제목, 선택적으로 상단바나 검색창
<nav> : 내비게이션(navigation)의 약자, 상단바 등 사이트를 안내하는 요소
<aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소, 사이드바 또는 광고창
<section> : 문서의 주된 콘텐츠를 표시
<article> : 독립적이고 자체 포함된 콘텐츠를 지정
<footer> : 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용

🔥 HTML 심화

와이어프레임 : 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것
=> 레이아웃 및 상황의 뼈대를 잡고 수정하는 단계

1. 웹 페이지의 구조잡기

크게 크게 구역을 나눠서 생각한다.

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

id : 고유한 이름을 붙일 때, 단 한 번만 사용되어야 하는 이름이 필요한 경우 사용
- html 작성 : <div id="이름"> </div> / id 선택자 : #이름

class 반복적으로 사용되는 요소를 유형별로 분류할 때 사용
- html 작성 : <div class="이름"> </div> / class 선택자 : .이름

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

태그에 id와 class를 지정해준다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Login</title>
  </head>
  <body>
    <div>
      <input id="id-input" class="input focus" type="text" placeholder="ID" />
      <input
        id="password-input"
        class="input focus"
        type="password"
        placeholder="password"
      />
      <button id="login-button">Login</button>
      <label> <input id="keep-checkbox" type="checkbox" />Keep Login </label>
    </div>