6일차
본격적으로 React를 공부할 자세!💪
6일차는 본격적으로 React 공부를 준비하기 위한 시작 단계다. React는 프론트 단에서 사용자 UI를 구축하기 위한 Javascript 라이브러리다. 그래서 React를 사용하기 위해서는 웹을 구성하는 아주 기본적인 HTML, CSS, Javascript에 대해 알고 있어야 하기 때문에 하나하나 공부를 했다.
6일차 깃허브 : https://github.com/leeyulgok/learn-git
웹(Web)
웹이란? HTML(HyperText Markup Language)이라는 언어로 작성된 문서들로 구성되어 있다. 사용자는 HTML로 구성된 웹 브라우저를 통해 서버에 요청하고 응답을 받는다. 이때 HTTP라는 프로토콜(약속)을 통해 이루어진다.
웹을 구성하는 요소는 크게 HTML, CSS, Javascript 이렇게 3가지로 구성되어 있다. 각각의 역할은 HTML은 뼈대, CSS는 뼈대를 스타일링 하고, Javascript는 이 둘을 움직이게 해주는 기능을 만든다.
따라서 웹은 HTML, CSS, Javascript로 이루어져 있는 문서로 사용자는 웹 브라우저를 통해 서버와 요청과 응답이 이루어진다.
HTML
HTML이란? HTML(HyperText Markup Language)은 웹 페이지를 구성하는 데 사용되는 표준 마크업 언어다. 웹 브라우저가 페이지를 해석하여 사용자에게 내용을 표시하고 구조를 제공하는 역할을 한다.
HTML에는 다양한 요소가 있고 요소마다 가지는 특징이 있다. 그래서 요소가 갖는 특징에 맞춰 사용할 필요가 있다.
시맨틱 태그
시맨틱 태그란? HTML5에서 도입된 태그로, 웹 페이지의 구조와 의미를 더 명확하게 표현하기 위해 사용된다. 대표적인 핵심 태그로는
- header : 웹 페이지의 제목이나 소개
- main : 문서의 주요 콘텐츠
- footer : 문서의 바닥
가 있다.
예시
<header>헤더 부분</header>
<main>메인 부분</main>
<footer>푸터 부분</footer>이런 식으로 사용이 가능하다.
결과
이렇게 사용이 가능하다. 아직은 큼직큼직한 것들만 사용해서 결과가 좋지는 않지만, 코드 내에서 명확한 의미를 주기 때문에 적잘할 때 사용해야 된다.
핵심 태그
HTML의 핵심 태그에는 아래와 같은 것들이 있다.
a : 문자에 링크를 삽입할 수 있다.
div : 블록을 구성한다.
form : input 태그와 함께 요청을 주고 받을 수 있다.
HTML 태그는 이것 이외에 엄청 많은 태그가 존재한다. 그렇기 때문에 모든 태그를 외우는 것보다 필요할 때 적절한 태그를 찾아서 사용하면 좋을 것 같다.
예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Basic</title>
<style>
div {
border: 1px solid;
}
</style>
</head>
<body>
<h1>HTML 제목은 <h1>~<h6> 태그로 정의됩니다.</h1>
<div>
<h1>헤드1</h1>
<h2>헤드2</h2>
<h3>헤드3</h3>
</div>
<br />
<h1>2번 p 단락 태그 정의하기</h1>
<div>
<p>첫 번째 p 태그</p>
<p>두 번째 p 태그</p>
</div>
<br />
<h1>3번 a태그 정의</h1>
<div>
<a href="https://www.naver.com">네이버 가기</a>
</div>
<br />
<div>
<h1>4번 이미지</h1>
<img src="./javascript.png" alt="javascript" width="720px" height="480px">
</div>
<br />
<div>
<h1>장바구니 목록</h1>
<ul>
<li>사과</li>
<li>바나나</li>
<li>딸기</li>
</ul>
</div>
<br />
<div>
<table>
<tr>
<th>과일</th>
<th>수량</th>
</tr>
<tr>
<td>사과</td>
<td>10</td>
</tr>
<tr>
<td>바나나</td>
<td>5</td>
</tr>
<tr>
<td>딸기</td>
<td>3</td>
</tr>
</table>
</div>
<br />
<div>
<form>
<label for="name">이름 : </label>
<input id="name" type="text" required><br /><br />
<label for="email">이메일 : </label>
<input id="email" type="email" required><br /><br />
<label for="pw">비밀번호 : </label>
<input id="pw" type="text" required><br /><br />
<button>가입하기</button>
</form>
</div>
</body>
</html>3번 째 실습한 코드를 가져왔다. HTML을 사용하면서 자주 사용되는 코드들을 모음이다. 가장 기본이 되는 태그들이니 어떨 때 사용하는 지를 익혀두어야 된다.
CSS
CSS(Cascading Style Sheets)는 HTML 문서나 XML 기반 문서의 스타일과 레이아웃을 정의하기 위한 스타일 시트 언어다. HTML파일에 head부분에서 style 태그를 추가해서 스타일을 설정이 가능하다. 하지만 주로 css파일을 별도로 생성해서 사용하는 것이 일반적이다.
예시
h1 {
font-size: 24px;
}
.name {
color: blue;
}
#myHeader {
backround-color: red;
}위의 코드처럼 사용이 가능하다. 이 코드는 세 가지로 나눌 수 있는데 설명을 하면 아래와 같이 설명할 수 있다.
- h1 : 은 모든 h1태그에 폰트가 적용이 된다.
- .name : class이 name인 모든 태그에 적용이 된다.
- #myHeader : id가 myHeader인 태그에 적용이 된다.
각 상황에 따라 스타일을 적용해야 하며, .과 # 등의 사용 방법을 잘 파악해두어야 한다.
정리하기
확실한 기본 정리 및 태그 이해하기.📚
세이프홈즈 강사님의 수업으로 React 강의가 시작됐다. 기본 개념부터 얘기해주시고, 어떨 때 사용하는지 등을 상세하게 말씀해주셔서 앞으로의 수업이 기대가 된다. 다만 아쉬웠던 점은 이번 부트캠프가 온라인과 오프라인으로 이루어지는데 아직은 첫 날이라 온라인 환경이 매끄럽지 못한 부분은 아쉬웠다.
오늘 강의를 통해서 알고 있던 것들을 확실하게 복습했다. 기본적으로 알고 있던 개념들이었지만, 각 태그가 정확히 어떤 영역을 차지하는지, 블록인지 인라인인지 등을 배우는 시간이었다. 배웠던 걸 스스로 한 번 해봄으로써 다시 되돌아가 공부할 일이 없게 짚고 넘어가야겠다.
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프
음악을 좋아하는 사람이 음악을 만들 듯, 개발을 좋아하게 될 사람이 쓰는 개발이야기