S1. 웹개발 이해하기, HTML 기초 및 심화

Haizel·2022년 10월 26일
CODESTATESFed
0

Front-End Developer 되기

목록 보기
5/70
post-thumbnail

노션으로 보기

웹 개발 이해하기

HTML : 구조를 만드는 마크업 언어

CSS : 스타일을 담당하는 디자인 언어

JavaScript : 구조와 스타일이 완성된 각각의 요소에 생명을 부여하는 역할(상호작용)

Visual Studio Code

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

  • 장점

    1)macOs, Linux, Window 등 모든 OS에서 사용가능

    2)Javscript, HTML, CSS 모두 편집 가능

    3)다양한 Extension을 제공해 개발자의 취향에 맞게 커스터마이징

    4)디버깅이 편리

    5)무료

  • Extension 설치

HTML 기초

  • HTML은 tag들의 집합
  • Tag : 부등호<> 로 묶인 HTML의 기본구성 요소
  • html 확장자 사용
  • 트리구조로, 여는 구조 + 닫는 구조로 이뤄짐
<!DOCTYPE html>               //이 문서가 HTMl 문서임을 명시 
<html>                        //html 시작태그로, 문서 전체의 틀을 구성
<head>                        //head 태그는 문서의 메타데이터를 선언    
   <title>Document</title>    //문서의 제목, 브라우저의 탭에 보여짐
</head>                       //</태그이름>은 해당 태그가 끝났음을 의미
<body>                        //body태그는 문서의 내용을 담는 곳
   <h1>Hello world</h1>       //heading을 의미하며, 크기에 따라 h1부터 h6까지 있음
   <div>contents here         //content division을 의미하며, 줄바꿈됨
     <span>Here too!</span>   //줄바꿈이 없는 content 컨테이너
   </div>                     //div 태그가 끝났음을 의미
</body>                       //body 태그가 끝났음을 의미
</html>                       //html 태그가 끝났음을 의미

Self-Closing Tag

  • 태그 내부에 내용이 없다면, → /tag와 같이 표현 가능

가장 많이 쓰이는 HTML 태그

태그의미설명
divdision한 줄을 차지. 한 줄에 한 문장만 나열 가능.
spanspan컨텐츠 크기만큼 공간을 차지. 한 줄에 여러 문장를 나열할 수 있다.
imgimage이미지 삽입 , 닫는 태그가 없다 <img src = “이미지 주소”> src = source alt = 대신하는 이미지 > : 기본 이미지가 안나올 시, alt 요소 사용 권장!
alink *anchor(닻 : 배 위치 고정)의 약자링크 삽입 <a href = “ 링크주소”> 네이버 새창에서 열고 싶다면 : <a href = “ 링크주소”_blank> 네이버
ui&liunordered list & list item는 순서가 없는 리스트를 작성할 때 사용 각각의 리스트 앞에 숫자대신 bullet markr가 붙음
olordered list순서가 있는 리스트를 작성할 때 사용
inputinput (Text, Radio, Checkbox)다양한 입력폼 - Radio : n개 중 하나만 선택 가능(*그룹설정 가능) - Checkbox : 다중 선택 가능
textareaMulti-line text input열고 닫는 태그 필수. 줄바꿈 가능
buttonbutton버튼 생성
PParagraph하나의 문단을 표현하기 위해 사용


Radio 그룹 설정하기

name 속성 사용 

<input type = "radio" **name** = "option1"> 옵션A
<input type = "radio" **name** = "option1"> 옵션B
  • 옵션A , 옵션B 중 하나만 선택

로그인페이지 구성

💡 필요 요소
  1. 아이디/이메일주소를 입력할 입력폼
  2. 비밀번호 입력폼
  3. 로그인 버튼
  4. 로그인 상태 유지할 수 있는 체크박스
  5. 회원가입 페이지로 이동할 수 있는 링크

로그인페이지 만들기

1. 아이디, 비밀번호 입력 창 만들기 ⇒ input 태그 사용 
<input type="text" placeholder="ID">
<input type="password" placeholder="password">
  1. text 타입은 입력값이 암호화되지 않음.
  2. password 타입은 입력값이 암호화됨
  3. placeholder 속성 사용 → 입력폼 안에 작성해야하는 내용에 대한 힌트 제공
2. 로그인 버튼 만들기 ⇒ button 태그 사용 
<buutton type="submit">Login</buutton>
3. 로그인 상태 유지 체크박스 만들기 ⇒ checkbox 태그 사용 
<label> <input type="checkbox">keep Login </label>

시맨틱 요소

  • HTML의 최신버전인 HTML에서 시맨틱 웹이 중시 → 여러 시맨틱 요소가 새롭게 만들어짐.

    ⇒ 의미를 가진 요소를 사용하는 방식을 추구하게 됨.

  • 시맨틱 : 의미가 있는, 의미론적인 → 프로그래밍에선 코드 조각을 의미

    ⇒ ex. 이 Javascipt라인을 실행하는 것은 어떤 효과가 있는가

시맨틱 요소의 대표적 종류

  • <h1> : 최상위 제목(top level heading)을 표현할 때 사용
    • 브라우저가 큰 폰트를 적용할 뿐 아니라, 위아래로 간격을 주어 제목처럼 보이도록 한다.
    • <div>요소, <span>요소에 CSS속성을 추가하여 <h1>요소와 똑같이 보이게 할 수 있지만, <h1>요소를 사용할 때처럼의 의미적 가치는 없다.
    • 글자뿐만 아니라 글자 위아래의 ‘마진’까지 포함한다.
  • <article> : 독립적이고 자체 포함된 콘텐츠를 지정함
  • <aside> : 본문의 주요부분을 표시하고 남은 부분을 설명하는 요소.
    • 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용된다.
  • <footer> : 일반적으로 페이지나 해당 파트의 가장 아래부분에 위치한다.
    • 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용한다.
  • <header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하는 요소.
    • 보통 사이트의 제목이 들어가며, 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있다.
  • <nav> : 네비게이션의 약자, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용한다.
    • 보통은 안에 <ul>을 넣어 목록 형태로 사용한다.
  • <main> : 문서의 주된 콘텐츠를 표시한다.

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

  1. 검색엔진이 시맨틱 요소를 더 좋아한다.
    • 시맨틱 요소에 담긴 의미에 따라 검색결과가 상위 노출이 결정될 수 있음.
  2. 여러 개발자가 함께 작업할 때 → <div>요소를 탐색하는 것보다 의미있는 코드블록을 찾는 것이
    • 훨씬 편리.
    • 요소 안에 채워질 데이터 유형 예측도 쉽다.

HTML 심화 : 댓글창 만들기

❓ 와이드프레임

  • 말그대로 와이어로 설계된 모양을 의미

  • 단순한 선이나, 도형으로 웹,앱의 인터페이스를 시각적으로 표시한 것

  • 즉, 웹 애플리케이션을 개발할 때, 와이어프레임 ⇒ 레이아웃의 형태를 잡는 단계를 의미

  • HTML 마크업 언어

❓ 마크업(Markup)언어 : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어

댓글창 만들기

  1. 입력창 영역
  • 큰 <div>요소 대신 <section> 요소와 <form> 요소도 사용 가능
<div>
  <div>댓글 9M</div>
  <input type="text" palceholder="댓글을 입력해주세요">
  <button>등록</button>
</div>

<section> : 보통 제목, 컨텐츠가 포함된 구획을 나눌 때 사용(큰 의미 단위가 될 수 있는 것을 묶어서 하나의 구역으로 구분)

  • 렌더링 div와 크게 다른 점은 없다.

<form> : 사용자가 입력한 값을 제출하는 용도로, 보통 컨트롤(input, button) 등을 포함한다.

  • 하지만 사용 시, 화면을 전환하는 액션이 있어 → 주의가 필요(div보다 좀 더 sementic함)
  1. 읽기 영역

selector 사용하기(id, class)

Id : 고유한 이름을 붙일 때. 중복 불가

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

HTML 태그Selector 기호Selector
div id ="writing-section"div#div#writing-section
li class=”comment’li.li.comment

로그인 페이지 만들기 실습

  • 이전 로그인 페이지
<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"> //css코드로 지금은 무시
  • id, class 사용
<input id="id-input" class="input focus" type="text" placeholder="ID" />
<input id="password-input" class="input focus" type="text" placeholder="password" />
<button id="login-button">Login</button>
<input id="keep=checkbox" type="checkbox">Keep Login</input>

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

HTML의 속성(attribute) 2가지

  1. 속성의 이름(attribute name) → 여기선 class가 속성의 이름
  2. 속성의 값(attribute value)

실시간세션

label : 요소에 라벨(태그)를 달아 설명 가능

<input id="football" type="radio" name="sport">
<label for="football">football</label>

commend + d : 똑같은 요소 한번에 수정 가능


💡 버튼 type 요소

button : 클릭 버튼

submit : 제출버튼, 누르면 화면이 새로고침된다.

reset : 초기화버튼, 누르면 내용이 초기화된다.

<button type="button">클릭</button>
<button type="submit">제출</button>
<button type="reset">리셋</button>

💡 p와 div의 차이

**<p>** : 단락이 나눠진다.

  • 위아래로 마진을 가진다.

**<div>** : 단지 영역을 구분한다.

<input type="text"><br>
<input type="email" palceholder="email@example.com"><br>
<input type="password"><br>
<input type="date"><br>
<input type="time"><br>
<input type="color"><br>
<input type="file"><br>
<input type="number"><br>
<select>
  <option value="select">기수를 선택하세요</option>
  <option value="39th">39기</option>
  <option value="40th">40기</option>
  <option value="41th">41기</option>
  <option value="42th">42기</option>
  <option value="43th">43기</option>
</select>
profile
Haizel
한입 크기로 베어먹는 개발지식 🍰
이전 포스트

S1. 반복문

다음 포스트

S1. 기초

0개의 댓글