[항해99 웹개발종합반] 1주차

브라우저는 

• 요청을 보내고,
• 받은 HTML 파일을 그려준다.

client 즉 우리가, 서버에게 ~~~~ 정보가 필요해 정보를 줘!! 라고 요청을 하게 되고, 서버의 경우 response로 HTML 파일을 돌려주게 된다.

브라우저는 HTML을 바탕으로 우리에게 시각적으로 그려준다. 

 

HTML -> 뼈대

CSS -> 꾸미기

 

라고 볼 수 있다.

---

주석의 경우 <!-- 주석 --> 이런식으로 달 수 있다. 

맥북의 경우 command + / 로 주석을 쉽게 표현할 수 있다. 

 

자동정렬의 경우 특정 extension을 설치하게 되면 저장할 때 저절로 정렬이 되는 것 같다.

혹은 

command + a 

command + k + f 

를 통해서도 정렬 시킬 수 있다. 

 

---

개발자 도구를 여는 방법은 오른쪽 클릭 + 검사 (inspection) 을 통해서 확인 가능하다.

p{color: red; padding: 5 px;}

 

인 코드가 있을 때,

p -> 선택자

color, padding -> 속성

red, 5px -> 속성값

 

에 해당한다.

 

태그에 

1) id 

2) class를 통해 

style 요소들을 적용시켜주기도 한다.

 

 

. vs # 

class를 받는 경우	id를 받는 경우
.class{ }	#id{ }

 

---

특정 코드 줄 자체로 옮기고 싶을 때,

맥북의 경우  option + 화살표 로 옮길 수 있다. 

상속의 경우, 부모가 특정 속성을 가지고 있을 때, 자식도 해당 속성을 나타내는 경우 "상속 되었다." 라고 말한다. 

---

html의 경우 레고처럼 박스 형태를 지니는데, 

이를 

1. block

2. inline 으로 구분될 수 있다. 

display: flex;
justify-content: center;
align-items: center;

 

해당 부분이 중요한 부분이라 생각한다.

 

블록의 경우 기본적으로 위에서 아래, 로 할당이 되는데, 

위-> 아래로 할당

 

 

display: flex; 를 할 경우, 왼쪽에서 오른쪽으로 할당이 된다. 

왼쪽 -> 오른쪽 할당

 

justify-content:center를 하게 된다면 위 그림과 같이 바뀌게 되며, justify-center와 align-items를 center로 설정을 하게 되면 다음과 같이 바뀐다.

---

웹 페이지의 구조는

- navbar

- main

- footer

로 생성되게 된다.

 

nav.navbar로 엔터를 하게 되면, navbar를 class로 가지는 <nav> 태그가 생성되게 된다. 

 

---

margin vs. padding

- margin: 요소 바깥 쪽 공간으로 다른 요소와의 거리를 조절함 ( 체두리 밖)

- padding: 요소와 테두리 사이의 거리를 조절

 

---

height:100vh;

에서 vh는 viewpoint height를 의미한다. -> 즉, 화면 높이의 100%를 의미한다.

 

padding: 20px 0;

20 px -> 위 아래

0 -> 좌 우 

---

*{
	/* includes everything!!!*/
   }

 

모든 코드에 해당되는 것을 적용하기 위해서 사용한다.

 

link css -> 를 이용해서 코드를 다른 파일로 분리하여 볼 수 있다. (가독성 better)

---

마지막으로 **부트스트랩**을 통해서 여러 코드들을 불러와, 용이하게 코딩할 수 있다.