HTML은 집을 짓기 전 설계도에 따라 구조를 잡듯, 웹 페이지의 구조를 짜는(마크업) 언어이다.
CSS는 스타일을 담당하는 디자인 언어이다.
JavaScript는 구조와 스타일이 완성된 각각의 요소에 생명을 부여하는 역할을 한다.
한마디로 HTML 은 구조를 , CSS 는 스타일을 , javascript는 상호작용을 담당한다.
앞으로의 실습에서 코드 에디터는 Visual Studio Code를 사용할 것이다.
전부터 많이 사용해왔던 툴이라 어려움 없이 사용할 수 있을 거 같다!
HTML 기초
HTML
- 문서의 틀을 만드는 언어, 웹 페이지나 웹 애플리케이션이 전부 HTML로 작성 되어있음.
- 웹 페이지의 틀을 만드는 마크업 언어
- tag들의 집합
Tag: 부등호(<>)로 묶인 HTML의 기본 구성 요소
- 트리구조 : 부모노드 자식노드 컨텐츠가 존재
여는 태그 - 닫는 태크 한 쌍으로 존재 ex) <span> </span>
- self-closing tag
태그 내부에 내용이 없다면 (<tag></tag>와 같이 표현되는 경우) <tag/>와 같이 표현 가능
- 태그에는 src, style등의 속성을 담을 수 있음
자주 사용되는 태그
div vs span
div 태그는 한 줄을 차지하고 , span 태그는 컨텐츠 크기만큼 공간을 차지함.
img: 이미지 삽입
<img src="이미지주소">
a: 링크 삽입 ,눌러서 이동할 수 있음.
<a href="https://frontend-manchoon.tistory.com>내 블로그 </a>ul. li : 리스트
ol은 순서가 있음.
input , textarea : 다양한 입력폼 (라디오 박스 ,텍스트박스)
<input type="text" placeholder ="type here">
라디오 , 체크박스 차이점 : 라디오는 하나만 선택 가능, 체크박스는 다중 선택 가능
radio 만들 때 그룹으로 묶어서 만들어야 함 , 똑같은 이름 주기
<input type="radio" name="choice" value="a"> a
<input type="radio" name="choice" value="b">btextarea는 줄바꿈이 되는 입력폼
button : 제출을 위한 버튼
<실습>
위에서 배웠던 태그들을 사용해 로그인 페이지를 만들어보자 !
<input type="text" placeholder="ID">
<input type="password" placeholder="password">
<button>Login</button>
<label><input type="checkbox">Keep Login</label>크롬창에서 확인해보면 ... !
짜잔! javascript를 사용하지 않았기 때문에 실제 버튼은 동작하지않지만
로그인 페이지 구조는 간단한 태그들을 사용하여 만들 수 있었다.
시맨틱 요소란 ?
시맨틱이란 의미가 있는 ,의미론적인 이라고 해석할 수 있다. 다시 말해 의미를 가진 요소를 사용하는 방식을 추구하기 시작했다. 그 중 <h1> 요소로 예를 들어보면 최상위 제목을 표현할 때 사용하는 요소인 <h1> 요소를 사용할 경우 , 브라우저가 큰 폰트 사이즈를 적용할 뿐 아니라 ,위아래로 간격을 주어 제목처럼 보이도록 한다.
이과 같은 효과는 <div> , <span> 요소에 CSS 속성을 추가하여 <h1> 요소와 똑같이 보이도록 할 수 있다. 하지만 <h1>요소를 사용할 때처럼 의미적 가치는 없다고 할 수 있다.
시맨틱 요소가 사용되기 이전에는 각 영역을 지정하기 위해 <div> 요소를 주로 사용했는데 그러다 보니 웹 페이지 하나에 <div> 요소가 수십개가 중첩되어 <div> 지옥을 경험했었다.
시맨틱 요소를 사용해야 하는 이유 ?
의미 있는 요소를 사용하는 것 보다 <div> 요소를 사용하되 용도에 맞게 스타일을 부여하면 되는데 , 왜 시맨틱 요소를 사용하는 것을 추구할까 ? 그 이유로는
1. 검색 엔진이 시맨틱 요소를 더 좋아함 ( 시맨틱 요소에 담긴 의미에 따라 검색 결과가 상위 노출이 결정될 수 있음)
2. 여러 개발자가 함께 작업할 때 <div> 요소를 탐색하는 것보다 의미있는 코드 블록을 찾는 것이 훨씬 더 편리함 , 요소 안에 채워질 데이터 유형도 예측하기 쉬움
시맨틱 요소의 종류
<article> : 독립적이고 자체 포함된 콘텐츠 지정
<aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소 , 사이드바나 광고창 등 중요하지 않은 부분에 사용
<footer> : 페이지나 해당 파트의 가장 아랫부분에 위치, 사이트의 라이센스 ,주소 ,연락처 등을 넣을 때 사용
<nav> : 내비게이션의 약자로 , 일반적으로 상단바 등 사이트를 안내하는 요소에 사용 , <ul>을 넣어 목록 형태로 사용
<main> : 문서의 주된 콘텐츠를 표시
<section> : 독립적인 구획을 나타냄 , 보통 제목을 포함하지만 항상 그런 것은 아님
https://developer.mozilla.org/ko/docs/Glossary/Semantics#html_%EC%8B%9C%EB%A7%A8%ED%8B%B1
Semantics - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN
프로그래밍에서,시맨틱은 코드 조각의 의미를 나타냅니다 — 예를 들어 ("이게 어떻게 시각적으로 보여질까?" 보다)"이 Javascript 라인을 실행하는 것은 어떤 효과가 있는가?", 혹은 "이 HTML 엘리먼
developer.mozilla.org
<과제> 자기소개 페이지 만들기
내가 작성한 코드
<!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>자기소개 페이지 -배정빈</title>
</head>
<body>
<h2>자기소개 페이지 만들기</h2>
<hr>
<div>
<h3><i>하루하루 성장하는 프론트엔드 개발자 배정빈입니다.</i></h3>
<img src="배정빈.jpg" width="300px" height="300px">
<img src="둥이.jpg" width="300px" height="300px"> <br>
<strong>이름 :</strong>배정빈 <br>
<strong>생년월일 :</strong>1999.08.17 <br>
<strong>HP :</strong>010-****-**** <br>
<strong>E-MAIL :</strong>bjb6478@naver.com <br>
<strong>BLOG :</strong><a href="https://frontend-manchoon.tistory.com/">프론트엔드 개발자가 되기위한 만춘이의 도전</a> <br>
<strong>GitHub :</strong><a href="https://github.com/baejb">baejb</a>
</div>
<div>
<hr>
<h3>나의 목표</h3>
<ol>
<li>자기주도 학습을 통한 공부 습관 기르기 <small>(매일 블로그 작성)</small></li>
<li>1년안에 프론트엔드 개발자로 성공하기</li>
<li>연봉 3600이상 취업</li>
</ol>
</div>
<div>
<hr>
<h3>목표를 이루기 위한 나의 다짐</h3>
<ol>
<li>수업 외의 개인적인 공부 시간 갖기 <small>(3시간 이상, 공부 후 TIL 작성하기)</small></li>
<li>자책하지 않고 남과 비교하지 않고 나만의 페이스로 달려가기</li>
<li>긍정적인 마인드 갖기</li>
<li>규칙적인 생활 습관 갖기 , 안좋은 습관은 버리기 </li>
<li>수업에 빠지지 않으면서 적극적으로 활동하기</li>
</ol>
</div>
<hr>
<footer>
코드스테이츠 프론트엔드 44기 배정빈 <del>이 곳은 푸터입니다.</del>
</footer>
</body>
</html>완성된 결과물 !
오늘 과제는 HTML만을 사용해서 자기소개 페이지를 완성해보았다. HTML만을 사용해서 만들다 보니 심플한 매력(?)이 있지만 !! CSS를 통해 빨리 디자인을 적용하고 싶다는 생각이 들었다 !!
HTML 심화
와이어프레임이란?
와이어로 설계된 모양을 의미하며 단순한 선이나 , 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것이다.
웹 애플리케이션을 개발할 때 , 와이어프레임은 레이아웃의 형태를 잡는 단계를 의미한다.
그럼 이제 HTML로 댓글창을 와이어프레임을 만들어 볼 것이다 !
1. 큰 틀에서 영역 나누기
쓰기 영역(상단) - 읽기 영역(하단)
2. 각 영역을 태그로 표현하기
쓰기 영역의 구성요소 : 1. <div> 2. <input type="text"> 3. <button>
위의 구성요소를 하나의 div로 합쳐야 한다.
읽기 영역의 구성요소 : 1. <li> , <div> 2. <div> 3.<span> , <button>, <img>
같은 레벨에서 구분해야할 단위를 파악하고 감싸줘야 한다 .
한번 구상해본 와이어프레임으로 코드를 작성해보겠다 !
<!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>Document</title>
</head>
<body>
<div>
<h3>댓글</h3>
<input type="text" placeholder="댓글을 입력해주세요">
<button>등록</button>
</div>
<div>
<ul>
<li>
<div>아이디</div>
<div>댓글</div>
<span>날짜</span>
<button>추천</button>
<button>비추천</button>
</li>
<li>
<div>아이디</div>
<div>댓글</div>
<span>날짜</span>
<button>추천</button>
<button>비추천</button>
</li>
</ul>
</div>
</body>
</html>
크롬창을 열어서 확인해보자 !
아직 CSS를 적용하지 않은 상태라 위의 댓글창과는 다른점이 존재하지만 구조를 따져봤을 땐 동일하다 .
이렇게 하나씩 차근차근 웹 페이지를 구성해볼 수 있다
id 및 class 목적에 맞게 사용하기.
id : 고유한 이름을 붙일 때 , # 으로 표현
class : 반복되는 영역을 유형별로 분류할 때 , . 으로 표현
다음 시간에 css를 적용하게 된다면 부여한 id, class로 스타일을 꾸밀 수 있을 것이다.
예 ) <div id="hi"></div>
#hi{
color: green;
}
(물론 직접 HTML내에 style을 추가하는 방법도 있지만 파일을 따로 생성한다면 style.css 파일을 만들어 HTML내 태그로 추가하는 것은 잊으면 안된다 !! )
오늘은 이렇게 HTML의 기초부터 HTML 심화까지 배워보았다.
기존에 이미 알고 있는 내용이었지만 블로그를 작성하면서 한번 더 복습할 수 있어 머릿속에 잘 저장해 둘 수 있을 것 같다 !!
앞으로의 강의가 더욱 기대되었다 !!
오늘의 공부 끝 !!
'코드스테이츠44기 프론트엔드' 카테고리의 다른 글
| [코드스테이츠 44기 프론트엔드 6일차 회고록] javascript 타입과 변수 (0) | 2023.02.20 |
|---|---|
| [코드스테이츠 44기 프론트엔드 5일차 회고록] 계산기 목업 만들기 (0) | 2023.02.17 |
| [코드 스테이츠 44기 프론트엔드 4일차 회고록] Flexbox로 레이아웃 잡기 (0) | 2023.02.16 |
| [코드스테이츠 44기 프론트엔드 3일차 회고록] CSS에 대해 - 1 (0) | 2023.02.15 |
| [코트스테이츠 44기 프론트엔드] SEB_FE_44 합격 그리고 OT (0) | 2023.02.13 |
