D+5 / [HTML] 기초

김서연·2022년 6월 29일

html

프론트엔드

목록 보기

6/12

* HTML, CSS, JavaScript의 관계

html : 웹페이지의 구조를 담당하는 마크업언어 (구조)
css : 디자인 요소를 시각화 하는 스타일시트언어 (스타일)
js : 단순한 웹페이지를 프로그램으로 만들어 유저와 상호작용할수 있게 해주는 프로그래밍언어 (상호작용)

* HTML 기본 구조와 문법

js와 달리 문서의 틀을 만드는 언어..
html 사용
tag들의 집합으로 되어있다 / tag : 부등호(< >)로 묶인 html의 기본구성요소
html확장자를 사용한다.

html 구조 (트리구조

<!DOCTYPE html>               // 이 문서가 HTML, 문서임을 명시
 <html>                       // html 시작 태그로, 문서 전체의 틀을 구성
  <head>                      // head 태그는 문서의 메타데이터를 선언
    <title>Document</title>   // 문서의 제목, 브라우저의 탭에 보여짐
  </head>                     // </태그이름>은 해당 태그가 끝났음을 의미
  <body>                      // body 태그는 문서의 내용을 담는곳
    <h1>Hello word</h1>       // heading을 의미하며, 크기에 따라 h1부터 h6까지 있음
    <div>Contents here        // content division을 의미하며, 줄바꿈됨
    <span>Here too!</span>    // 줄바꿈이 없는 content 컨테이너
    </div>                    // div태그가 끝났음을 의미
  </body>                     // body 태그가 끝났음을 의미
 </html>                      // html 태그가 끝났음을 의미

* 자주 사용하는 HTML 요소(element)

 - <div> : 한줄 차지
 - <p> : 문단에 사용, 여백있음.
 - <span> : 컨텐츠만큼 공간 차지
 - <img> : 이미지 삽입 (src-source약자), 닫는 태크 없음(self-closing tag)
 - <a> : 링크 삽입 (href)
 - <ul>&<li> /<ol>&<li> : 리스트 / 번호 리스트
 - <forrm> :  화면 전환 액션이 있어 의도하지 않은 결과 나올 수 있음
 - <input> : 입력폼, 내부 type에 따라 입력 모양 달라짐, 닫는 테그 없음. 
   # <input>의 유효성 검사(입력하라고 경고창 뜬다)를 작동시키기 위해서는 <form> 안에 들어가야만 한다! ex) attribute(속성): required maxlength="15" / attribute name:required, maxlength & attribute value : "15"
  <div>
   <input type="radio" name="option1">옵션A
   <input type="radio" name="option1">옵션B  --> name로 하나의 그룹으로 묶어주면 둘중하나만 체크되고, name속성 없애서 그룹으로 묶지 않으면 둘다 체크된다 //여러게 체크할수 잇는건 type="checkbox"
  </div>
 - <textarea> : 줄바꿈이 되는 입력폼이다.
 - <button> :

실습 : 로그인 페이지 만들어 보기1

1. 아이디, 비밀번호 입력 창 만들기
  <input type="text" placeholder="ID" />
  <input type="password" placeholder="password" />
 2. 로그인 버튼 만들기
  <button>Login</button>
 3. 로그인 상태 유지 체크박스 만들기
  <label><input type="checkbox" />Keep Login</label>
   # <label> : 항목의 설명을 나타낸다( 사용자가 입력해야 하는 텍스트가 무엇인지 더 쉽게 이해할 수 있다.)
   ## 위에와 달리 <lavel>안에 <input>을 중첩시키지 않고 쓰려면 <input>에 id속성을 넣고, 같은 값을 <label> for속성에 넣어야 한다.
        <input id="exam" type="checkbox" />
        <label for="exam">Keep Login</label>
   ### 관련 label을 클릭해서 input 자체에 초점을 맞추거나 활성화 시킬수 있음 (input 체크박스와 쓰는 경우 label안에 있는 글씨를 누르면 input 체크박스에 체크가됨!)

* 웹페이지의 구조 잡기

;; 지금은 이미 만들어져 있는 결과물을 따라하지만, 실제로 웹앱을 개발할때는 프로토타이핑(개발 초기에 모형을 만들어 기능의 요구사항을 파악 후 반영하는 개선 방식)과정을 거쳐야 한다.

 1. 큰 틀에서 영역 나누기
    ex) 댓글창 - 쓰기영역, 읽기영역 으로 나눌수 있음
 2. 각 영역(구성요소-component)을 태그로 표현하기 
   - 쓰기 영역
     <div>
      <div>댓글 9M</div>
      <input type="text" placeholder="댓글을 입력해주세요">
      <button>등록</button>
     </div>
   - 읽기 영역
     <ul>
       <li>
         <div>ouo0****</div>
         <div>시각장애인들을 위한 지원이 정말 반갑네요 앞으로도...</div>
         <span>2018-03-22 23:29:22</span>
         <button><i class="fa-solid fa-thumbs-up"></i> 0</button> //왜 아이콘이 안나올까...스크립트도 넣었는데..방법이 바뀐건가..흠
         <button><i class="fa-solid fa-thumbs-down"></i> 0</button>
       </li>
     </ul>

태그에 id와 class를 목적에 맞게 사용하기
-id : 고유(unique)한 이름을 붙일때
-class : 반복되는 영역을 유형별로 분류할때
-표기법

          HTML 문법            /    Selector (프로토타이핑할 때 이용함)
 <div id="writing-section">    /       div#writing-section
    <li class="comment">       /             li.comment

Selector로 id, class추가해보기

- 쓰기영역
  div#writing-section
  div
  input#new-comment-content
  button#register
 - 읽기영역
  ul#comments 
  li.comment
  div.username
  div.content
  span.createdAt
  button.voteUp
  button.voteDown

김서연

프론트엔드 엔지니어로 성장

이전 포스트