2022.02.17
인프런 강의 수강하고 복습하면서 정리한 내용
웹 어플리케이션 만드는 순서
- 구상 → 기획/계획 → 디자인 → 개발 → 테스트
- 구상 : 무얼 만들 것인가?
- 기획 : 어떻게, 어떤 기능을 넣을 것인가?
기획
- UI모델링
- UI란? User Interface (사용자가 시스템을 제어하는 조작장치)
- 모델링? 직접 만들기 전에 가상으로 만들어 보는것 즉, 사용자의 입장에서 동작하는 기능을 가상으로 만들어 보기
프로그래밍에 대해서 찾아보고 공부하기 시작하면서 UI에 대해서 여러번 들었지만 뭔지 알 수 없었다. 이번 기회에 조금 개념이 생긴 것 같다.
웹이란?
- 인터넷 = 네트워크 망
- 웹=HTML문서를 주고 받을 수 있게 하는 서비스
- HTTP=통신규약
- 웹브라우저, 웹서버 모두 소프트웨어!!
웹브라우저가 프로그램이라는 것은 익히 알고 있었으나 웹서버도 프로그램이라는 것을 오늘 처음 알게 되었다.
클라이언트와 서버
- 클라이언트란? 서버에 요청하는 웹브라우저가 설치된 컴퓨터
- 서버란? 클라이언트의 요청에 응답하는 웹서버가 설치된 컴퓨터
- 웹서버도 웹브라우저처럼 소프트웨어 였다.
- 웹서버 프로그램은 설치의 편리성이 낮다. 따라서 웹서버 프로그램 설치를 도와 주는 프로그램도 있다.
Bitnami를 이용해서 프로그램 설치하기
- bitnami를 설치하면 여러 프로그램을 한 번에 설치할 수 있다.
- apache2 폴더 안에 htdocs폴더가 있고, 서버는 htdocs안에서 html을 찾아서 웹브라우저로 보낸다.
- 꼭 기억하기! htdocs = documemnt root
HTML
- HTML이란? Hypertext Markup Language 약자
- 하이퍼텍스트 = 문서와 문서가 링크로 연결되어있다.
- 링크와 링크로 이어진 그물망이 웹이 되고, 링크는 HTML의 본질이자 웹의 본질이다.
- TAG(태그) = 시작태그+컨텐츠(내용)+끝태그
- 마크업 랭귀지 = 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다.
태그, 속성
- 속성? 태그에서의 속성은 태그에 추가하는 성질, 메타데이터?
- a태그 = 링크를 나타내는 태그
- href = a태그에서 링크 주소를 알려 주는 속성
- target = 링크를 클릭 시 새탭에서 열릴지 현재탭에서 열릴지 지정하는 속성 (_blank 와 _self)
- 속성과 속성을 구분할 때는 띄어쓰기를 한다.
- 태그들을 또다른 태그가 묶어줄 수 있다.
- li = 리스트 만드는 태그
- ul ,ol= li태그로 만든 리스트를 묶어주는 태그
- ul(unodered list) ol(odered list)
HTML 추가
- 팀버너스리 -> W3C(HTML관리하는 국제기구)
- W3C = HTML표준을 관리
- !DOCTYPE html : 이 문서는 html5의 표준을 따르고 있다는 표시
- Tag Reference = 태그 사전 같은 것
- 강의에서 제공된 참고자료 (http://opentutorials.org/course/1058)
HTMl 실습해보기
- nav = 네비게이션 역할 태그, 화면상에는 표시되지는 않지만 nav태그 안의 내용이 해당 웹사이트의 탐색을 하는 기능을 한다는 것을 알려주는 태그
- header = 컨텐츠가 간판 역할을 한다는 것을 표시 태그
- article = 본문을 나타내는 태그
- 순서
- 대문 페이지 index.html 만들기 (암묵적으로 index.html파일은 대문 역할을 한다.)
- 내비게이션 컨텐츠에 링크를 건다.
- 각 링크에 연결된 html문서도 만든다.
- article태그를 이용해서 각 문서에 맞는 본문을 적는다.
- 가장 큰 제목에 대문페이지 링크 걸기
오늘 html문서 4개를 만들어서 서로 링크로 연결을 시켜보는 데까지 해보았다. 링크를 걸때 주소나 페이지 이름을 정확히 적지 않아 링크연결이 잘 안되서 조금 헤맸지만 강의에서 본 실습까지 따라할 수 있어서 조금 뿌듯했다.
- Client Side Tech : 웹브라우저에서 동작하는 기술들
- Sever Side Tech : 웹서버에서 동작하는 기술들
제가 공부하고 공유하고 싶은 글을 올리고 있습니다.