1. GET 과 POST의 차이 클라이언트(유저, 브라우저)와 서버간에 정보를 주고받는 과정을 HTTP(The Hyper Transfer Protocol) 가 가능하게 해준다. 이때 클라이언트가 요청한 정보를 보내는 방식(METHOD)에 여러가지가 있는다 가장 대표적인 것 두가지가 GET 이랑 POST 이다. GET GET은 query strin...
DIV vs SPAN
1. DIV 와 SPAN div 태그는 display:block 과 같은 성질을 가진다. 그래서 블럭을 쌓듯이 위로 포개지는 속성을 가지며 width, height 값에 영향을 받는다. 반면 span 태그는 display: inline 과 같은 성질을 가지며 옆으로 또는 위아래로 다닥다닥 붙는 속성을 가지고 있다. 그리고 width, height의...
http://donicaida.com
http://donicaida.com/ 클론 코딩 이번에 클론할 웹은 사실 그렇게 어렵지는 않다. 그러나 나중에 python scapper 웹을 꾸밀때 이런 grid 가 있으면 좋을 것 같아서 포스팅한다. 그리고 여기 content는 li 가 아닌 span에 담았다. <body> <header> <h1>...
https://paint-box.com 2
style.scss @import url("https://fonts.googleapis.com/css?family=Montserrat:400,500&display=swap"); @import url("https://fonts.googleapis.com/css?family=Caladea:400&display=swap"); @import ...
https://paint-box.com 1
https://paint-box.com/ 클론코딩 클론 코딩할때 또 기억해야 하는 것은 글자와 그림 배치를 보고 flex 로 할 건지 grid 로 할 건지 대충 머릿속에 그려놔야하고, 또한 flex로 했을때 direction이 column 인지 row인지도 미리 구상하면 더 명확하게 코딩 할 수 있다. <body> <header...
https://besthorrorscenes.com - html 구조
첫 번째 클론 웹 (https://besthorrorscenes.com/) 이제 부터는 기존의 웹페이지를 최대한 비슷하게 복제해보는 프로젝트이다. 처음 클론할 웹사이트는 위에 링크를 걸은 웹사이트인데 보면 왼쪽 nav 부분이 고정되어있고 오른쪽에는 영상이 나열되어 있는 보기에 간단한 웹페이지 이다. 그럼 뼈대를 만들어 주자. 이때 html 안에 어떤...
SCSS - responsive
1. responsive 이번엔 화면에 크기에 따라 효과가 적용되는 mix을 만들어볼려고 한다. responsive mix은 @content 함수를 통해 함수 내용을 styles.scss에서 설정할 수 있다. 그럼 먼저 html 을 만들어주자. 화면 크기에 따라 HELLO의 색깔이 바뀔것이다. <!DOCTYPE html> <html...
SCSS - extend
1. EXTEND mixin 유연하게 css를 변환하는 반면 extend는 말그대로 그대로 옮겨다가 쓰는 용도이다. html 부터 먼저 만들자. log in 링크와 log out 버튼의 스타일을 같게 만들려고 한다. <!DOCTYPE html> <html lang="en"> <head> <meta c...
SCSS - mixin
1. MIXIN MIXIN를 이번에 배워보자. MIXIN는 함수와 모양과 기능이 비슷하다. 그리고 IF/ELSE 와 같은 조건문도 넣을 수 있다. 역시나 html 을 먼저 만들어주자. 홀수번째 google 은 파란색 짝수번째에 있는 google은 빨간색으로 설정해주려 한다. <!DOCTYPE html> <html lang="en"&...
SCSS 준비하기
1. SCSS 준비하기 sassy(스타일리쉬한) css 라고도 한다. 마치 프로그래밍하듯이 변수도 설정하고 함수와 조건문을 이용해 css 를 구성하는걸 뜻한다. 그럼 compiler가 scss 문법을 css 문법으로 번역하고(이런 과정을 compile 이라고 한다) 그걸 html이 알아들어 화면에 반영한다. 마치 프로그래밍하듯 css를 작성한다는건 ...