프론트엔드 개발자 되기

회사에서 한번도 해본 적 없는 프론트엔드 개발을 맡게 되었다.
참고로 html, css 모두 간만 본 단계이고 제대로 된 학습을 진행하지 못했다.
기본이 중요하다고 생각하는 스타일이기 때문에 이론 공부부터 차근차근 시작해볼까 한다.

Front-end Load Map

내가 참고한 Front-end load map은 다음과 같다.
해당 포스트에서는 기초를 배워요 부분만 다뤄볼까 한다.
나는 MDN web docs을 토대로 학습을 진행했다.

프론트엔드 로드맵

기초를 배워요

웹 개발 준비하기(환경 갖추기)

컴퓨터 : mac (이나 곧 windows 써야할 듯)
텍스트 편집기 : Visual Studio Code (Atom이 깔려 있어서 쓰려다가 더 좋대서 이걸로)
웹 브라우저 : chrome(회사에선 얘만 타겟팅 한다길래)
이미지 편집기 : photoshop
버전 관리 시스템 : Git
FTP 프로그램 : Git으로 할 듯?
자동화 시스템 : 아직 단계가 아니라 생각, 하지만 Glup, Grunt 등 사용 예정

웹사이트의 외관은 어떻게 할까요?

현재로선 이론 공부가 우선이라 생각.
모바일 개발에서도 많이 했던 과정이기 때문에 필요성을 인지하고 넘어감

파일 다루기

웹사이트의 구조

1.└──  📁web-projects
2.        ├── 📁test-site
3.        │        ├── index.html
4.        │        ├── 📁images
5.        │        │        └── apple.jpg ...
6.        │        ├── 📁sytles
7.        │        │        └── test-css.css ...
8.        │        └── 📁scripts
9.        │                  └── test-js.js ...

index.html : 일반적인 페이지 내용(문자, 이미지 등) 포함.
📁images : 사이트에 사용할 모든 이미지들을 포함
📁styles : 내용을 스타일링(문자, 배경색 지정 등)하기 위한 CSS 코드를 포함
📁scripts : 사이트에 상호작용하는 기능(버튼 클릭 등)을 위한 JavaScript 코드를 포함

파일 경로

파일 경로를 위한 일반적인 규칙들

같은 디렉토리는 파일 명만 언급 : [파일 명].[확장자]
- 예시 : chrome.png
하위 폴더 위치 파일 참조시 [하위 폴더 명]/[파일 명].[확장자]
- 예시 : images/chrome.png
상위 폴더 접근 시 ../사용
- 예시 : ../images/chrome.png

간단한 예제

이미지를 띄우는 간단한 웹페이지 작성해보기

Alt text

images에 사진 저장
- 나 같은 경우엔 images에 chrome.png 사진을 저장함
페이지 내용 index.html 작성
```
1.<!DOCTYPE html>
2.<html>
3.  <head>
4.    <meta charset="utf-8">
5.    <title>My test page</title>
6.  </head>
7.  <body>
8.    <img src="images/chrome.png" alt="My test image">
9.  </body>
10.</html>
```
- 웹페이지 제작을 위해 필수 html와 img하나만 넣은 코드이다. 일단 복붙!
- img src에는 아까 저장한 사진의 경로를 지정
- img alt에는 이미지의 간단한 설명을 쓰면 된다.
  - 자세한 내용은 추후 html을 제대로 다룰 때 작성하겠음
마지막으로 index.html 더블클릭해서 열어주면 위의 웹페이지가 뜬다. (성공)

저작자표시 비영리 변경금지

lmjDev