profile
Front-End 주니어 개발자, 좋은 길로만 가는 "조은길"입니다😁
post-thumbnail

3개의 문 만들어보기

img 태그의 부모 태그인 img-box에 overflow: hidden; 을 줘서, 이미지가 움직일 때, 문의 영역 밖으로 이동하면 안 보이도록 하려고 했다.그런데, 여기서 예상치 못한 문제가 발생했는데 다음과 같다.이렇게 3개의 문을 감싸고 있는 box-contai

2022년 5월 13일
·
0개의 댓글
post-thumbnail

움직이는 캐릭터 클릭으로 없애기

움직이는 캐릭터들을 클릭하면, 사라지게 하는 페이지를 만들어보았다.먼저 DOM을 작성할 때, 전역변수를 최대한 사용하지 말자는 취지에서 익명 함수 안에 모든 script를 작성하기 시작했다.( 함수(){ ... } )(); 이런 식으로 익명함수를 즉시 실행 시키면, 변

2022년 5월 10일
·
0개의 댓글
post-thumbnail

Portfolio 실습 2 : SNS Profile

요구사항 > => 웹 사이즈 레이아웃 > => 모바일 사이즈 레이아웃 Bootstrap을 사용해서 제작하자!! 해설도 Bootstrap으로 진행할 예정입니다. 내가 만든 CSS 파일 사용하는건 제약이 없습니다. 회색 배경색은 #f7f9fc 하늘색은 #6fba

2022년 4월 30일
·
0개의 댓글
post-thumbnail

form & input - Contact Us 섹션 만들기

Contact Us 섹션 만들기 실습

2022년 4월 26일
·
0개의 댓글
post-thumbnail

Portfolio 실습 3 : Admin Page

(▼ PC사이즈)(▼ 모바일 사이즈)▲ 다음과 같은 레이아웃을 만들어봅시다Bootstrap 쓰든 말든 상관없습니다. 저는 귀찮아서 쓸 것임 아이콘 따로 구하기 귀찮으니 Bootstrap에 있는 Icon 또는 Font Awesome을 이용합니다.실력향상을 원하시는 분들은

2022년 4월 21일
·
0개의 댓글
post-thumbnail

transform & animation 숙제 해설 (움직이는 메뉴)

마우스를 올리면 흔들리는 버튼 만들기분석해보면 (1) 좌측 회전 (2) 우측 회전 (3) 좌측 회전 (4) 제자리로 이동합니다.마우스를 올리면 회전하는 + 기호 만들기분석해보면 (1) 좌측 회전 (2) 우측 회전 + 약간 커지기 순으로 동작합니다.이런 메뉴 만들기마우스

2022년 4월 21일
·
0개의 댓글
post-thumbnail

transform & animation 으로 매끄러운 애니메이션 만들기

transform 은 어떤 요소를 독립적으로 움직이게 만들고 싶을 때 사용합니다.본인 원래 위치에서 자유롭게 (다른 요소에 영향 없이) 이동하게 됩니다.rotate는 회전, translate는 좌표이동, scale은 확대축소, skew는 비틀기 입니다. 특히 애니메이션

2022년 4월 21일
·
0개의 댓글
post-thumbnail

Bootstrap - 반응형 레이아웃 숙제 (col,row)

(조건) PC사이즈에서는 사진처럼 4열, 태블릿 사이즈에서는 2열, 모바일에서는 1열로 정렬되게 만들어야한다.(조건) 모바일 사이즈에선 위 사진처럼 보여야합니다. => col, row 구현할 때, 좋은 표현이 될 것같으니 쭉 참고하자!!

2022년 4월 14일
·
0개의 댓글
post-thumbnail

Live Server가 에러 처리법

윈도우에서는 live server가 잘 작동하는데, 맥북에서는 갑자기 작동이 안된다. 원래 안 됐던게 아니라, 잘 쓰던 게 갑자기 안 된다!!일단, 대표적으로 작동이 안 되는 이유는 다음과 같다.

2022년 4월 13일
·
0개의 댓글
post-thumbnail

Portfolio1-Landing Page 숙제

로직 상으로는 제대로된 속성값을 부여한 것같았는데, 속성값들이 안 먹을 때가 꽤있었다. 그럴 때, devtool을 보고 효과가 있는 속성값들을 기준으로 다시 속성값들을 넣어서 고쳤다.CSS를 잘하는 사람일 수록, 코드 반복을 줄여야한다고 하지만 일단은 구현이 최우선인지

2022년 4월 10일
·
0개의 댓글
post-thumbnail

캐시 무효화

Cache-Control를 사용해서 확실하게 캐시 무효화 응답을 내기 위해서는 어떻게 해야 하고, 각각의 의미들에 대해서 정리한 TIL!!

2022년 3월 21일
·
0개의 댓글
post-thumbnail

캐시 관련 헤더들과 프록시 캐시

캐시와 관련된 헤더들과 조건부 요청과 관련된 헤더들 그리고 프록시 캐시의 개념에 관해 정리한 TIL

2022년 3월 21일
·
0개의 댓글
post-thumbnail

검증 헤더와 조건부 요청 - ETag

날짜로 캐시 데이터의 변경 유뮤를 조회하는 데의 문제점을 알아보고, ETag를 사용해서 이 문제를 어떻게 보완할 수 있는지 정리한 TIL!!

2022년 3월 21일
·
0개의 댓글
post-thumbnail

검증 헤더와 조건부 요청 - Last-Modified

검증 헤더와 if-modified-since라는 조건부 요청을 사용해서, 캐시가 만료된 이후에도, 서버에서 해당 데이터에 대한 변경이 일어나지 않았다면, 만료된 캐시 안의 데이터를 재사용할 수있게 하는 원리를 정리한 TIL!!

2022년 3월 21일
·
0개의 댓글
post-thumbnail

캐시의 기본 동작

캐시의 기본 동작에 관해 알아보면서 캐시의 사용이 어떤 이점을 가져오는지 정리한 TIL

2022년 3월 21일
·
0개의 댓글
post-thumbnail

HTTP 쿠키 (Cookie)

서버의 무상태성으로 인한 로그인 문제를 해결하기 위해 등장한 HTTP 쿠키에 대한 TIL!!

2022년 3월 17일
·
0개의 댓글
post-thumbnail

인증

인증과 관련된 헤더에 대해서 정리한 TIL!! 물론, 인증 방법마다 넣어야 될 value값이 달라서 일일히 정리하지는 못했다. 그저, 어떤 인증 방식이 오든, 넣어야 하는 헤더와 종류에 대해서만 정리했다.

2022년 3월 17일
·
0개의 댓글
post-thumbnail

특별한 정보

HTTP 헤더 중에서 특별한 헤더들에 대해서 정리해봤다. 특히, 클라이언트에서 요청 시 반드시 들어가야 하는 HOST 헤더에 대해서 정리한 TIL!!

2022년 3월 17일
·
0개의 댓글
post-thumbnail

일반 정보

HTTP 헤더의 간단하고 쉬운 일반 정보들의 종류과 개념들에 관해 정리한 TIL

2022년 3월 17일
·
0개의 댓글
post-thumbnail

전송 방식

HTTP에서 대표적으로 사용하는 4가지 전송 방식에 대해 정리한 TIL

2022년 3월 17일
·
0개의 댓글