1. 배울 것
웹개발은 기초, 기본적인 것이기 때문에 대부분 먼저 웹개발을 배우고 난 뒤에 앱 개발자, 데이터분석가, 시스템 엔지니어 등으로 전향한다. 그래서 개발자들 대부분은 웹개발을 다 할 줄 안다. 1주차에는 웹개발이라는 기초를 배우기 위해 개발의 기초인 웹의 동작 원리에 대해 알아보는 시간을 갖는다.
2. 웹 브라우저 원리
1) 브라우저 사용자가 브라우저에게 요청한다. (ex. velog 주소 입력)
2) 브라우저가 서버에게 요청을 한다.
3) 서버는 사용자에게 3가지를 준다. : HTML, CSS, Javascript
- 즉 브라우저는 사용자의 요구를 보여주는 역할을 한다.
3. HTML, CSS, Javascript
HTML : 뼈대
CSS : 꾸미기
Javascript : 움직이기
4. HTML
1) head와 body
html은 head와 body로 구성되어 있다.
- head는 눈에 보이지 않지만 웹페이지에 중요한 것들(구글 등의 검색 엔진이 내 사이트를 퍼 갈 수 있도록 만들어 두는 장치같은 것들, CSS라는 꾸미기, Javascript같은 움직이는 것들 등)을 담당한다.
- body는 눈에 보이는 부분을 담당한다.
2) 태그
태그
- div(구역) : 문단을 나눈다. (가장 자주 쓰이는 태그)
- h1 : 문서의 제목을 나타내준다.
- span : 특정 글자를 감쌀 때 쓴다.
태그는 div 등과 같이 중요한 태그가 아니라면 모두 외우지 않아도 된다. 필요한 것이 있으면 복사하여 자신의 입맛에 맞게 고치는 것이 바로 코딩이다.
5. CSS
CSS의 역할은 꾸미는 것이다. (ex. 웹의 글자 크기, 색 등을 정하기) 꾸미려면 무언가를 지정하고 가르키고 꾸밀 수 있어야 한다.
ex. 짱구의 노란색 바지를 초록색으로 변경해야 한다면, 짱구의 바지라고 부를 수 있는 그 대상의 이름, 명찰이 있어야 한다.
6. 폰트, 주석
1) 폰트
https://fonts.google.com/?subset=korean
2) 주석
주석은 개발자의 눈에는 보이지만 컴퓨터는 보이지 않는다. (사용 예시 : 같이 일하는 사람에게 개발자가 메모를 남기고 싶을 때 메모를 남길 때 사용한다.)
부트스트랩
개발자들은 CSS를 사용할 줄 알아도 예쁘게 꾸밀 수 있는 미적 감각까지 지니고 있는 경우가 없을 수가 있다. 그래서 예쁘게 꾸미기 어려워하는 개발자들을 위해 타인이 만든 CSS 꾸러미를 찾아 사용한다.
부트스트랩은 남이 만들어 둔 것을 쓸 때는 잘 찾아다가 조금씩만 고쳐서 쓰는 것이 좋다.
코드 관리
Github 사이트 : https://github.com/
- Github에 파일을 올리기 위해 반드시 파일 1개, "index.html"이라는 이름이 붙어야 한다.
웹개발 꿀팁
- 정렬하는 방법
- 정렬하고 싶은 부분을 드래그 한다.
- Shift + Alt + F 누르기 한다. (맥북 : Shift + Option + F)
- 주석 입력하는 방법
- 같이 일하는 사람에게 남길 메모를 입력한다. (ex. 폰트 아직 고민 중, 타이틀 아직 고민 중 등)
- 메모를 입력하고 Ctrl + / 누른다.
