01강 프론트엔드 공부순서
프론트엔드: 개발자가 아니어도 누구나 쉽게 할 수 있는 언어로 잘 알려짐. 세부사항에 따라 공부법이 다르다!
#프론트엔드 공부 순서 로드맵
HTML, CSS, JavaScript
-> TS (JS 위에 TypeScript가 올려진 언어)
*JS는 타입이 동적이어서 안정적이지 않다.
-> React
CSS Architecture (BEN 관련 article 한 번씩 읽어보면 정말 도움될 것!)
Prettier
Module Bundler - Webpack (코드 배포할 때 간편하게 압축해서 사이즈 작게 만드는 framework)
02강 클론코딩 포트폴리오 반응형 웹사이트 따라 만들기
03강 프론트엔드 강의, 프론트엔드 개발자가 되고 싶다면?
04강 코딩을 빨리 배우는 법
온라인 강의 들을 때 팁!
1. 목표를 확실하게 설정한다. : HTML, CSS, JS 배워서 웹 프로젝트 진행하기
2. 자신과의 약속을 한다. : 주 1회 스터디
3. 노트에 직접 작성하며 듣는다. : YES!
4. 직접 정리하고 찾아보면서 배운다. : YES!
5. 퀴즈나 과제는 직접 해보고 결과를 확인한다. : YES!
05강 HTML 기초, React 할 때 꼭 필요한 팁!
- HTML=> 태그들을 이용해서 구조적으로 작성 (mark-up 언어)
<!DOCTYPE html> //DOCUMENT TYPE이 html임을 정의
<html> //html 파일 제일 상위에 있는 태그
<head> //사용자에게 보여지는 UI 요소 전혀 없고, 구글에 나오는 타이틀이나 부가설명, 북마크 추가할 때 나오는 제목이나 아이콘들 정의. CSS 파일을 연결
<meta charset="utf-8"> //글자포맷 utf-8으로 정의
<meta name="viewport" content="width=device-width"> //디바이스 스크린 다 사용
<title>JS Bin</title> //타이틀
</head>
<body> //사용자에게 보여지는 가장 상위의 컨테이너
<h1>Heading</h1>
<h2>Heading</h2>
<button>Click Me!</button>
<randomRandom>Click ME!!!</randomRandom> //이상한 태그: 어느 정도의 에러는 알아서 출력해냄.
</body>
</html>
- 웹사이트 구조=> 작게작게 박스로 나누어 구분하기
06강 HTML 태그 완성, 웹 포트폴리오 만들기 전에 꼭 보세요
웹사이트 구조
- <BOX>: header, footer, nav, aside, main, section, article(section 안에서 반복되는, 재사용 가능한 것들을 묶어놓음), div(아무곳에서나 묶을 때 사용), span, form
- <ITEM>: a, button, input, label, img, video, audio, map, canvas, table
- <Block>: 한 줄에 하나 / <Inline>: 공간이 허용하면 다른 태그 옆에 배치 가능
//Tag&Element
<p>My cat is very grumpy</p> // Opening tag, Content, Closing tag, 이 전체를 Element
//Attributes
<p class="editor-note">My cat is very grumpy</p> // class="" -> Attibutes<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- a --> //주석
<a href="https://google.com" target=_blank>Click</a> //주소 태그
<!-- Block vs Inline-->
<p>안녕하세요. 저는 <b>유진주</b>입니다.</p> //<p>: 문단 정의(block), <b>: 글씨 굵게(inline)
<p>안녕하세요. 저는 <span>유진주</span>입니다.</p> //<span>: inline 태그
<p>안녕하세요. 저는 <div>유진주</div>입니다.</p> //<div>: block 태그
<!-- List (ol, ul, li) -->
<ol> // 순서 자동 지정, ol태그 안에 type="i"-> 1,2,3이 아닌 i,ii,iii으로. <참고> ol>li*3 tab키
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ul> // 순서 X
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!-- Input --> //사용자에게 input 받을 때 사용 (label과 input 모두 인라인 태그)
<label for="input_name">Name: </label> //사용자에게 정확히 어떤 정보를 원하는지 나타내줌.
<input id="input_name" type="text"> //타입 예시: button, checkbox, color, file, password 등..
</body>
</html>'Web > HTML' 카테고리의 다른 글
| 클론코딩 | 미니 홈페이지 레이아웃 #1 with. 빔캠프 CSS (1) | 2023.07.21 |
|---|---|
| 프론트엔드 개발자 되기 입문편! 16~21강 (0) | 2022.05.17 |
| 프론트엔드 개발자 되기 입문편! 13~15강 (0) | 2022.05.10 |
| 프론트엔드 개발자 되기 입문편! 07~12강 (0) | 2022.05.02 |
| 생활코딩 WEB1-HTML 14강~20강 (0) | 2022.03.28 |