2. 웹 표준

 

 

1. 웹과 개발 환경

1. 웹과 인터넷

• 웹과 인터넷의 공통점은 연결되어 있다는 점.
• 인터넷은 컴퓨터와 컴퓨터(노드와 노드)를 연결하는 네트워크(물리적인 연결망). 프로토콜이라는 통신 규약을 기반으로 통신함.
• 웹은 콘텐츠나 웹 페이지로 연결됨. 인터넷을 통해 컴퓨터가 사람에게 콘텐츠를 전송해 표시(렌더링)하면 브라우저를 통해서 접근함. 

 

2. 역할과 규칙

1. 서버 & 클라이언트

• 클라이언트(사용자)가 서버(제공자)에게 요청을 하면, 서버 측에서 처리 후 응답을 보냄. 후에 클라이언트의 컴퓨터에서 응답을 웹으로 표현해 서비스를 제공함.

 

2. 동적 & 정적 웹페이지

• 정적 웹페이지는 제공될 내용이 사전에 정해져 있음. 그렇기에 언제 어떻게 요청을 하든 같은 내용을 표시함. 주로 HTML, CSS, Javascript 등을 사용. (HTML - 구조, CSS - 표현, 꾸미기, JS - 동작, 행위)
• 동적 웹페이지는 사용자의 요청에 따라 내용이 달라짐. PHP, JSP, ASP를 사용하지만 정적 웹페이지의 언어도 잘 알아야 함.

 

3. 프론트 & 백엔드 개발

• 프론트엔드는 클라이언트 측에 보이는 부분을 개발함. 웹 디자이너, 퍼블리셔 등과 함께 작업함.
• 백엔드는 서버 측에서 작동하는 부분을 개발함. 데이터베이스 관리자, 서버 엔지니어 등과 함께 작업함.
• Node.js를 통해 프론트엔드와 백엔드를 모두 아우를 수 있는 풀스택 개발자가 Node.js로 많아졌음.

 

 

2. 빌드업

1. 블록 & 인라인 요소

• 블록 요소는 항상 한 줄을 차지함(width: 100%). 새로운 줄에서 시작함. <div>, <p>, <h> 등.
• 인라인 요소는 항상 새로운 줄에서 시작하지 않음. 한 줄에 여러 개를 넣을 수 있음. <span>, <img>, <button> 등.

 

2. 박스 모델

 

박스 모델

• 웹 페이지를 표현할 때 영역이나 범위를 표현하는 모델.
• content: 내용. 표현하고자 하는 요소.
• border: 테두리. 점선, 실선 등으로 표현 가능. 
• padding: 테두리와 내용과의 간격.
• margin: 테두리 너머의 영역. 다른 요소와의 간격 조정 가능.

 

3. 선택자

• 원하는 요소만 선택해서 설정할 수 있게끔 함.
• id 선택자는 딱 하나의 요소만 지정할 수 있음. #이름 형식으로 사용.
• class 선택자는 하나로 많은 요소를 지정할 수 있음. .클래스 형식으로 사용.
• 속성 선택자는 CSS의 속성 이름과 속성값을 사용해서 선택함. [속성 이름 = 속성값] 형식으로 사용.
• 부모 - 자식 관계는 포함하는 개체와 포함되어 있는 태그들의 연관성. 포함되어 있는 자식들의 경우 형제 관계로도 표현.
• 의사 클래스는 어떠한 상태에 있는 요소를 지정함.
• 우선 순위는 태그 선택자, 의사 요소 > 클래스, 속성, 의사 클래스 선택자 > id 선택자 > 인라인 스타일 > * (모두 선택) 

// 속성 선택자
[속성 이름 = 속성값]{ CSS 코드 } // 속성 이름도 일치하고 속성값도 일치하면 선택
[속성]{ CSS 코드} // 속성 이름이 일치하면 모두 선택

// 의사 클래스
개체:상태 { CSS 코드 }

 

https://flukeout.github.io/ (이쪽에서 나름 쉽게 배울 수 있다 추천!)

CSS Diner

 

 

4. 플로팅 & 포지셔닝

• 위치를 지정하고 고정함. 포지셔닝이 플로팅보다 더 섬세한 위치 지정 가능.
• 포지셔닝에는 절대 위치와 상대 위치로 나뉨. 

 

 

 

 

 자바스크립트 이전까지 적혀 있는 내용 중 중요하다 생각되거나 새로 알게 된 부분을 정리해 봤는데 이렇게 쓰는 게 맞나? 싶어요. 이런 식이면 그냥 책 요약본을 인터넷에 올리는 건데 법적으로 문제 되는 게 없나? 싶기도 하고요(물론 생략된 부분 많음). 그래도 일단 적어보긴 했습니다...

 

 이번에 책 내용을 실습하기 위해 설정을 하는데 느낀 점이... 생각보다 환경 설정에 대한 내용이 조금 어렵지 않나? 싶었어요. 물론 여차저차 잘 따라갈 정도지만 그래도 조금 어렵긴 했어요. 그러면서 의문이 들었는데 애초에 이 책이 정말 초보자를 위해 쓰인 게 보이는데, 가장 많이 헤맬 수 있는 설정 부분을 이렇게만 적어둬도 되나? 했습니다. 대체로 많은 초보자 책들에서는 사진들이 많아서 그대로 따라갈 수 있었는데 이 책은 줄글로 간단하게만 설명되어 있어서 조금 헤맸네요. 물론 저만 그럴 수도 있지만...

 

  그리고 다른 강의보다는 확실히 조금 더 최신? 의 정보들을 얻은 것 같아요. 대학 웹 강의에서는 단순히 html, css, js(jquery)로 어떻게 만들 수 있는가 정도만 배웠는데 이곳에서는 실질적으로 활용할 수 있는 내용이 담긴 것 같아요. 솔직히 누가 웹사이트 만드는데 하나하나 html로 설정하고 있어요... 물론 전 그랬음. 그러다가 부트스트랩을 이 책에서 보고 난 후에는 완전 신세계네요. 투두 만들 때 진작에 사용할 걸 싶기도 하고요.