요청하는 쪽은 클라이언트-> 브라우저라 볼 수 있다.
주는 쪽은 서버
서버에서 HTML & CSS & JS의 파일이 존재하고, 클라이언트가 서버에 요청하면 서버에서 가져와 브라우저가 파일에 맞게 웹사이트를 그려준다.
(파일의 코드를 설명서라 생각하면 알기 쉬울 듯)
HTML- 뼈대 (위치를 설정, 어떤 애셋은 어느 에셋의 옆에 있어야 한다 같은)
CSS- 꾸미기 (이 애셋은 색깔이 이래야 돼, 굵기는 이래야 돼 등등)
JS- 움직임 (이 애셋을 누르니까 색깔이 변한다, 새로운 사이트로 이동한다)
FrontEnd- 눈에 보이는 부분 (앞부분)
BackEnd- 우리 눈에 보이지 않는 부분, 서버에서 일을 해서 우리에게 주는 것
(FrontEnd는 도배 벽지, BackEnd는 시멘트, 콘크리트)
먼저 HTML
head 태그- 사이트 내에서 우리 눈에 안 보이는 것 (이것은 서버가 비슷한 건가)
body 태그- 사이트 내에서 우리 눈에 보이는 것
(미술관에서 모나리자라는 그림은 body, 모나리자에 대한 설명 적어놓은 글을 head)
HTML에서 자주 쓰이는 태그
p 태그: 단락을 만든다. -> 그림 내에 하나의 텍스트 문단을 만든다 생각하면 될 것 같다.
div 태그: 구역을 만든다. -> 그림 내에 한 개의 구역을 설정한다.
style 태그: body 내에 있는 태그들의 style을 각각 설정해 놓기
-> CSS랑 같은 방식
class 태그: 이걸 태그라 표현해야 할 지 모르겠다. p 태그 또는 div 태그 같은 것들의 속성을 적는 것 (명찰이라 생각)
ex. class="ttt"라 했을 때 style 태그에서 ttt라는 속성의 글자를 red로 한다 하면 class가 ttt인 태그는 글자가 red로 바뀐다.
CSS
background-color- 배경색
color- 글자색
text-align- 글자 정렬
배경에 이미지 넣기
-> background-image와 background-position, background-size 이 3개가 함께 나와야 함
div 안의 내용물을 정렬하는 것
display: flex; //유연성있게 보여주기 (그림판의 크기에 따라 유동적으로)
flex-direction: column; //배치되는 축의 방향, column 세로, row 가로
align-items: center; //세로축 기준 정렬
justify-content: center; //가로축 기준 좌우에 대한 정렬
