전체 글51 HTTP는 무엇일까 ? ? ? ? ? ? ? ? ? ? HTTP는 HyperText Trasfer Protocol ( 하이펄 텍씉 츠렌스펄 프러더컬 ) 의 약자로 컴퓨터들끼리 HTML 파일을 주고받을 수 있도록 하는 소통방식, 또는 약속입니다. HTTP의 두가지 특징 1. Request (요청) / Response (응답)으로 이루어진 통신을 한다 ! 1.1 Request - Start Line, Headers, Body로 구성. 프론트->백엔드로 데이터 처리를 시작하게 하는 메세지야 ! 1.2 Response - Status Line, Headers, Body로 구성. Status Line에는 200대의 성공과 400이상의 실패 코드가 담긴다..shit.. 2. Stateless(무상태) - HTTP의 각각의 통신은 독립적이기에, 과거의 통신을 알지 못하고.. 2022. 6. 3. CSS Image Sprite를 이용한 유령 잡기 게임 ~ ! 안녕 ~! 오늘은 이미지 스프라이트를 이용해서 유령 잡기 게임을 만들었다 ! 이미지 스프라이트란 ? 여러개의 이미지들을 합쳐서 하나의 이미지 파일로 만들어서 관리하는 것입니다 ^^ 예시를 한 번 볼까요 ~? 저기 용맹하게 싸우고 있는 용사는 좌, 우, 정지 시에 보여지는 모습이 다른데, 이것은 놀랍게도 ?!?! 단 한장의 이미지 !!!! 이렇게 붙어있는 이미지를 첨부하는 것입니다 ! 그렇다면 어떻게 하는 것이냐 ? 빈 태그에 이미지를 첨부한 뒤, width와 height를 지정하여, 원하는 모습만 보여주는 아주 음흉한 수법을 취합니다 ! 이렇게 하나의 이미지로 여러 이미지를 보여주면, 로드 시에 끊김이 발생하지 않는다는 사실 ! 하지만 너무 많은 이미지를 담다간 로딩이 길어질 수 있으니 주의하시길 바랍니.. 2022. 6. 2. Git / Terminal 기본 명령어 및 Git Push 과정 Git 명령어 git init : Git 시작 git status : Git 상태확인 git add : 파일 수정 이력 기록 준비 git commit : 파일 수정 이력 기록 git log : Commit 이력 보기 git remote add origin : ㅇ git push origin [url] : git clone : 복제 git branch : git checkout : 브렌치를 이동 git pull : Github 업로드 순서 파일 만들기 -> git init(.git 파일 생성) -> git add -> git commit -m "기록 "-> git push origin 위치 Git Clone 확인하기 git remote add origin (url.git) -> git remote --v .. 2022. 6. 2. [개발자 도구] 네트워크 패널 크롬 개발자 도구 - 구글에서 크롬 브라우저에는 개발자를 도와주기 위한 좋은 개발자 도구가 있다 ! 개발자 도구에는 다양한 패널들이 있다. 그 중의 네트워크 패널을 사용하여 유용한 정보를 알아보자 ! 네트워크 패널 현재 웹사이트에서 통신하는 모든 소스들을 나타낸다. 모든 소스들의 네트워크 측면에서 확인 가능하며, 문제가 있을 시 비교/분석 가능하다 Waterfall : request가 언제, 얼마나 걸려서 도달하는지를 알려준다 네트워크 패널의 용도 - 리소스가 올바르게 업로드 / 다운로드 되었는지 확인할 때 ! - 리소스의 HTTP header, 사이즈 등의 부가적인 metadata를 검사할 때 ! - 느린 속도로 모바일 환경 테스트 가능 DOMContentLoaded : Waterfall에서 파란색 선.. 2022. 5. 27. inline, block, inline-block 이란 뭘까 ? 1. inline span, a, em 등등.. 한 줄 내에 여러 요소가 표시될 수 있다 ~! 인라인은 본인 컨텐츠만큼의 공간만 차지한다. 따라서 높이나 길이를 직접 설정해도 무시한다 margin/padding을 설정해도 좌우간격만 적용되고, 상하 간격은 적용되지 않는다 ! line-height로 글자의 줄 간격을 설정할 수 있지만, 전체의 높이는 설정할 수 없다 줄이 늘어나면 높이도 늘어나기 때문이다 ! 2. block div h1 p 등등... 하나의 요소가 한 줄 전체를 차지하는 것이다 ! 전혀 문제 없이 높이나 길이 마진 패딩을 적용할 수 있다~! 3. inline-block display: inline-block ; 으로 설정해야하고, inline과 block의 특징을 모두 가진 요소이다 내가 .. 2022. 5. 24. position 속성 - relative, absolute, fixed 기본 값 : static -> 문서 흐름에 맞춰 배치 / 조정 불가능~ relative : 원래의 위치부터 계산하여 배치 absolute : 원래 위치와 별개로 부모 요소 기준으로 계산하여 배치 fixed : 부모 요소와 관계 없이, 브라우저 화면의 상대 위치를 기준으로 계산하여 배치 부모요소인 회색 박스 안에서 각각 relative / absolute / fixed를 right : 10px ; bottom : 10px ; 를 하여 나타내보았다 1. relative는 원래 위치인 왼쪽 끝에서 오른쪽과 아래쪽으로 10px씩 밀려서 이동했다 2. absolute는 부모 요소인 회색박스에서 오른쪽과 아래쪽 10px씩 이동한 위치에서 나타났다 ( 주의 : 부모 position이 relative가 아니라면 부모 .. 2022. 5. 24. 이전 1 ··· 4 5 6 7 8 9 다음 반응형
