2024/01(8)
-
Web/HTML, CSS
2024.01.31
1
[HTML] p 태그 줄바꿈(개행) 적용 안될 때 해결법
태그는 HTML에서 텍스트를 표현하는데 사용되는 기본적인 태그로 여기서 p는 문단을 뜻하는 paragraph의 약자입니다. 하지만 이 태그는 기본적으로는 개행을 처리하지 못해 텍스트들이 기본적으로 일렬로 쭉 나열되는 형태로 표현이 되는데요. 이러면 문단의 가독성이 떨어지겠죠. 이번 포스팅에서 해결방법에 대해 알아보겠습니다. 문제) 태그에서 개행이 표현이 안됨 See the Pen P Tage1 by wjdxo513 (@wjdxo513) on CodePen. 위의 예제를 보시면 태그 안에서 애국가의 1절의 가사가 줄바꿈이 4번 이루어졌음에도 불구하고 줄바꿈이 표현되지 않고 일렬로 쭉 나열된 것을 보실 수 있습니다. 태그는 기본적으로 white-space 속성값이 normal으로 되어 있어 개행이 무시되기에..
-
Web/Web Programming
2024.01.26
2
[Web] HTTP 세션(Session)이란 무엇인가? +(세션 관리 방법)
HTTP 세션이란? HTTP 세션은 웹 서비스에서 사용자의 상태 정보를 유지하기 위한 방법입니다. 기본적으로 HTTP 프로토콜은 상태값을 유지할 수 있는 방법이 없습니다. HTTP 통신은 클라이언트와 서버 간의 통신이 각각의 요청과 응답 간에 독립적으로 이루어지기에 사용자를 특정할 수 있는 방법이 존재하지 않기 때문입니다. 하지만 웹 서비스에서는 사용자의 상태를 계속 유지해야 하는 경우들이 있습니다. 예를 들자면 로그인이나, 장바구니를 예시로 들 수 있겠습니다. 다른 페이지로 이동하더라도 로그인이 유지되고, 장바구니에 담긴 상품들이 유지되는 것처럼 말이죠. HTTP 세션의 동작 원리 로그인을 한다고 가정하고 세션을 통해 어떻게 사용자의 상태값을 유지할 수 있는지 알아보겠습니다. DB를 사용할 수도 있는데..
-
Web/Web Programming
2024.01.23
4
[Web] HTTP 캐싱(Caching), 웹 캐시(Web Cache)란 무엇인가?
HTTP 캐싱(Caching)이란? HTTP 캐싱(Caching)은 한번 가지고 온 첫 요청 시 리소스(이미지, 스타일 시트, 자바스크립트 파일 등)를 미리 저장해 뒀다가 다음번 동일한 HTTP 요청에서 서버에서 리소스를 새로 가지고 오는 것이 아닌 미리 저장해 뒀던 리소스를 활용하는 기법을 말합니다. 이 기법을 통해 반복적으로 요청되는 리소스의 부하를 줄여서 웹 로딩속도 향상과 서버의 과부하를 줄일 수 있습니다. 이 캐싱이라는 용어는 웹에서만 사용되는 용어는 아닙니다. 자원을 미리 저장해 놓고 활용하는 방식은 효율성이 중요한 어떤 곳에서 든 가장 먼저 생각해 볼 수 있는 방식입니다. CPU의 내부에도 캐시메모리라는 방식이 존재하고, 어떻게 보면 일상생활에서 자주 사용되는 포스트잇도 캐싱이라고 할 수 있..
-
Web/Web Programming
2024.01.16
2
[Web] HTTP 쿠키(Cookie)란 무엇인가?
쿠키(Cookie)란? 쿠키는 웹 브라우저와 웹 서버 간의 정보를 교환할 때 사용되는 작은 기록 파일을 말합니다. 쿠키는 사용자가 임의의 웹 사이트를 방문할 때 사용자의 디바이스(PC, 휴대폰, 태블릿)등에 저장되며 쿠키에는 사용자에게 필요한 정보를 저장하여 사용자 경험을 향상시켜 줍니다. 예를 들자면 장바구니에 물건을 추가한다거나 로그인이 풀리지 않도록 처리하는 등에서 쿠키를 활용할 수 있겠습니다. 이후 HTTP 요청을 서버로 보낼 때 웹 브라우저는 쿠키를 같이 전송해 줍니다. 그 쿠키에 있는 데이터를 서버 측에서는 활용할 수 있겠죠. 세션 관리 : 쿠키를 사용하여 사용자의 로그인 상태나 세션을 관리할 수 있습니다. 맞춤형 콘텐츠 제공 : 쿠키를 활용하여 사용자에 입맛에 맞는 콘텐츠를 제공할 수 있습니..
-
Web/Web Programming
2024.01.08
2
[Web] HTTP 헤더(header) 구조와 주요 파라메터 정리
HTTP 헤더란? HTTP 헤더는 웹 브라우저와 서버 간의 통신 방법인 HTTP 통신 메시지에서 메타데이터를 담고 있는 부분을 말합니다. 여기서 메타데이터는 쉽게 말해 다른 데이터를 설명해 주는 데이터를 말하는데요. 그러니까 HTTP 헤더는 HTTP 메시지의 부가적인 정보를 담고 있다고 생각하시면 이해가 편하실 것 같습니다. HTTP 통신은 요청과 응답 시에 모두 HTTP 메시지로 통신을 합니다. 일반적으로 웹 브라우저는 사용자가 요청한 웹 페이지에 대한 정보를 받기 위해 서버에게 HTTP 요청을 보내고, 서버는 해당 요청에 대한 응답으로 HTML, 이미지, 스크립트 등의 데이터를 브라우저에 응답값으로 보내게 되는데 여기서 요청과 응답 시에 공통으로 사용되는 값과 다르게 사용되는 값들이 있습니다. 이번 ..
-
Web
2024.01.07
6
[Web] 저작권 없는 상업용 무료 이미지 다운로드 사이트 총정리(2024년)
프로그램이나 애플리케이션을 만들다 보면 디자인이라는 요소가 분명히 들어가게 되어있는데요. 이 디자인이라는 영역은 시간도 많이 잡아먹는 작업입니다. 또 미술 쪽으로 재능이 없다면 애초에 하지도 못하는 디자인을 배워서 하기보다는 기존에 이미 되어있는 디자이너의 작품이나, 사진, 혹은 그림을 활용하면 디자인에 소요되는 시간을 획기적으로 단축할 수 있습니다. 오늘은 제가 이때까지 디자인을 하면서 참고했었던 여러 가지 사이트들을 소개해드리려 합니다. 디자인할 때 꼭 필요한 저작권 없는 무료 이미지 사이트 정리 픽사베이 (https://pixabay.com/) 별점 : ★★★★★ 아마 무료이미지 사이트 중에 가장 유명하지 않을까 싶습니다. 무려 160만 개의 이미지와 비디오가 저장되어 있다고 합니다. 모두 상업적으..
-
Web
2024.01.07
2
[Web] 저작권 없는 무료 픽토그램 다운로드 사이트 모음(2024년)
픽토그램이란? 픽토그램이란 픽토(picto)와 전보를 뜻하는 텔레그램(telegram)의 합성어로, 무언가 중요한 사항이나 장소를 알리기 위해, 그 어떤 사람이 보더라도 같은 의미로 통할 수 있는 그림으로 된 언어체계입니다. 디자인을 할 때 픽토그램은 굉장히 유용하게 쓰입니다. 디자인 측면에서 특정 기능이 있을 때 그 기능을 글로 표현하는 것보다는 아이콘으로 간결하게 표현하는 것이 좀 더 깔끔하게 보이기 때문이죠. 위와 같이 팔로우 기능이 있다고 예로 들어보겠습니다. 한눈에 봐도 왼쪽부터 차례대로 페이스북, 인스타그램, 트위터라는 것을 알 수 있습니다. 글귀로 페이스북, 인스타그램, 트위터 이렇게 쓰는 것보다 픽토그램을 쓰는 것이 훨씬 깔끔합니다. 이처럼 픽토그램은 아이콘만 봐도 직관적으로 무슨 기능인지..
-
일상/블로그
2024.01.01
26
[블로그] 2023년 블로그 결산 (+새해 계획)
안녕하세요, 코딩팩토리입니다. 오늘은 12월 31일. 2023년의 마지막 날을 맞아 매년 해왔던 블로그 결산을 해보려 합니다. 지난 한 해를 되돌아보며 많은 생각이 듭니다. 별다른 사건이 없었던 2023년을 보내며, 앞으로의 제 삶도 이와 유사하게 흘러갈 것 같아 우울한 감정이 들기도 합니다. 저는 현재 직장을 다니고 있고, 퇴근 후에는 운동을 하며 운동이 끝난 뒤에는 유튜브를 보다가 잠이 듭니다. 지난 1년간 이 패턴의 일상을 반복했습니다. 이제는 제 인생이 특별하지 않다는 것을 알 것 같습니다. 앞으로 제가 일확천금을 벌 수도, 아주 잘 나가는 사람이 되기에도 힘들다는 사실을요. 그럼에도 불구하고 저는 언제나 조금 더 나은 사람이 되고자 노력하는 사람이 되고 싶습니다. 의욕을 잃지 말자고, 그 노력을..
-
Web/HTML, CSS 2024.01.31 1[HTML] p 태그 줄바꿈(개행) 적용 안될 때 해결법 태그는 HTML에서 텍스트를 표현하는데 사용되는 기본적인 태그로 여기서 p는 문단을 뜻하는 paragraph의 약자입니다. 하지만 이 태그는 기본적으로는 개행을 처리하지 못해 텍스트들이 기본적으로 일렬로 쭉 나열되는 형태로 표현이 되는데요. 이러면 문단의 가독성이 떨어지겠죠. 이번 포스팅에서 해결방법에 대해 알아보겠습니다. 문제) 태그에서 개행이 표현이 안됨 See the Pen P Tage1 by wjdxo513 (@wjdxo513) on CodePen. 위의 예제를 보시면 태그 안에서 애국가의 1절의 가사가 줄바꿈이 4번 이루어졌음에도 불구하고 줄바꿈이 표현되지 않고 일렬로 쭉 나열된 것을 보실 수 있습니다. 태그는 기본적으로 white-space 속성값이 normal으로 되어 있어 개행이 무시되기에..
-
Web/Web Programming 2024.01.26 2[Web] HTTP 세션(Session)이란 무엇인가? +(세션 관리 방법) HTTP 세션이란? HTTP 세션은 웹 서비스에서 사용자의 상태 정보를 유지하기 위한 방법입니다. 기본적으로 HTTP 프로토콜은 상태값을 유지할 수 있는 방법이 없습니다. HTTP 통신은 클라이언트와 서버 간의 통신이 각각의 요청과 응답 간에 독립적으로 이루어지기에 사용자를 특정할 수 있는 방법이 존재하지 않기 때문입니다. 하지만 웹 서비스에서는 사용자의 상태를 계속 유지해야 하는 경우들이 있습니다. 예를 들자면 로그인이나, 장바구니를 예시로 들 수 있겠습니다. 다른 페이지로 이동하더라도 로그인이 유지되고, 장바구니에 담긴 상품들이 유지되는 것처럼 말이죠. HTTP 세션의 동작 원리 로그인을 한다고 가정하고 세션을 통해 어떻게 사용자의 상태값을 유지할 수 있는지 알아보겠습니다. DB를 사용할 수도 있는데..
-
Web/Web Programming 2024.01.23 4[Web] HTTP 캐싱(Caching), 웹 캐시(Web Cache)란 무엇인가? HTTP 캐싱(Caching)이란? HTTP 캐싱(Caching)은 한번 가지고 온 첫 요청 시 리소스(이미지, 스타일 시트, 자바스크립트 파일 등)를 미리 저장해 뒀다가 다음번 동일한 HTTP 요청에서 서버에서 리소스를 새로 가지고 오는 것이 아닌 미리 저장해 뒀던 리소스를 활용하는 기법을 말합니다. 이 기법을 통해 반복적으로 요청되는 리소스의 부하를 줄여서 웹 로딩속도 향상과 서버의 과부하를 줄일 수 있습니다. 이 캐싱이라는 용어는 웹에서만 사용되는 용어는 아닙니다. 자원을 미리 저장해 놓고 활용하는 방식은 효율성이 중요한 어떤 곳에서 든 가장 먼저 생각해 볼 수 있는 방식입니다. CPU의 내부에도 캐시메모리라는 방식이 존재하고, 어떻게 보면 일상생활에서 자주 사용되는 포스트잇도 캐싱이라고 할 수 있..
-
Web/Web Programming 2024.01.16 2[Web] HTTP 쿠키(Cookie)란 무엇인가? 쿠키(Cookie)란? 쿠키는 웹 브라우저와 웹 서버 간의 정보를 교환할 때 사용되는 작은 기록 파일을 말합니다. 쿠키는 사용자가 임의의 웹 사이트를 방문할 때 사용자의 디바이스(PC, 휴대폰, 태블릿)등에 저장되며 쿠키에는 사용자에게 필요한 정보를 저장하여 사용자 경험을 향상시켜 줍니다. 예를 들자면 장바구니에 물건을 추가한다거나 로그인이 풀리지 않도록 처리하는 등에서 쿠키를 활용할 수 있겠습니다. 이후 HTTP 요청을 서버로 보낼 때 웹 브라우저는 쿠키를 같이 전송해 줍니다. 그 쿠키에 있는 데이터를 서버 측에서는 활용할 수 있겠죠. 세션 관리 : 쿠키를 사용하여 사용자의 로그인 상태나 세션을 관리할 수 있습니다. 맞춤형 콘텐츠 제공 : 쿠키를 활용하여 사용자에 입맛에 맞는 콘텐츠를 제공할 수 있습니..
-
Web/Web Programming 2024.01.08 2[Web] HTTP 헤더(header) 구조와 주요 파라메터 정리 HTTP 헤더란? HTTP 헤더는 웹 브라우저와 서버 간의 통신 방법인 HTTP 통신 메시지에서 메타데이터를 담고 있는 부분을 말합니다. 여기서 메타데이터는 쉽게 말해 다른 데이터를 설명해 주는 데이터를 말하는데요. 그러니까 HTTP 헤더는 HTTP 메시지의 부가적인 정보를 담고 있다고 생각하시면 이해가 편하실 것 같습니다. HTTP 통신은 요청과 응답 시에 모두 HTTP 메시지로 통신을 합니다. 일반적으로 웹 브라우저는 사용자가 요청한 웹 페이지에 대한 정보를 받기 위해 서버에게 HTTP 요청을 보내고, 서버는 해당 요청에 대한 응답으로 HTML, 이미지, 스크립트 등의 데이터를 브라우저에 응답값으로 보내게 되는데 여기서 요청과 응답 시에 공통으로 사용되는 값과 다르게 사용되는 값들이 있습니다. 이번 ..
-
Web 2024.01.07 6[Web] 저작권 없는 상업용 무료 이미지 다운로드 사이트 총정리(2024년) 프로그램이나 애플리케이션을 만들다 보면 디자인이라는 요소가 분명히 들어가게 되어있는데요. 이 디자인이라는 영역은 시간도 많이 잡아먹는 작업입니다. 또 미술 쪽으로 재능이 없다면 애초에 하지도 못하는 디자인을 배워서 하기보다는 기존에 이미 되어있는 디자이너의 작품이나, 사진, 혹은 그림을 활용하면 디자인에 소요되는 시간을 획기적으로 단축할 수 있습니다. 오늘은 제가 이때까지 디자인을 하면서 참고했었던 여러 가지 사이트들을 소개해드리려 합니다. 디자인할 때 꼭 필요한 저작권 없는 무료 이미지 사이트 정리 픽사베이 (https://pixabay.com/) 별점 : ★★★★★ 아마 무료이미지 사이트 중에 가장 유명하지 않을까 싶습니다. 무려 160만 개의 이미지와 비디오가 저장되어 있다고 합니다. 모두 상업적으..
-
Web 2024.01.07 2[Web] 저작권 없는 무료 픽토그램 다운로드 사이트 모음(2024년) 픽토그램이란? 픽토그램이란 픽토(picto)와 전보를 뜻하는 텔레그램(telegram)의 합성어로, 무언가 중요한 사항이나 장소를 알리기 위해, 그 어떤 사람이 보더라도 같은 의미로 통할 수 있는 그림으로 된 언어체계입니다. 디자인을 할 때 픽토그램은 굉장히 유용하게 쓰입니다. 디자인 측면에서 특정 기능이 있을 때 그 기능을 글로 표현하는 것보다는 아이콘으로 간결하게 표현하는 것이 좀 더 깔끔하게 보이기 때문이죠. 위와 같이 팔로우 기능이 있다고 예로 들어보겠습니다. 한눈에 봐도 왼쪽부터 차례대로 페이스북, 인스타그램, 트위터라는 것을 알 수 있습니다. 글귀로 페이스북, 인스타그램, 트위터 이렇게 쓰는 것보다 픽토그램을 쓰는 것이 훨씬 깔끔합니다. 이처럼 픽토그램은 아이콘만 봐도 직관적으로 무슨 기능인지..
-
일상/블로그 2024.01.01 26[블로그] 2023년 블로그 결산 (+새해 계획) 안녕하세요, 코딩팩토리입니다. 오늘은 12월 31일. 2023년의 마지막 날을 맞아 매년 해왔던 블로그 결산을 해보려 합니다. 지난 한 해를 되돌아보며 많은 생각이 듭니다. 별다른 사건이 없었던 2023년을 보내며, 앞으로의 제 삶도 이와 유사하게 흘러갈 것 같아 우울한 감정이 들기도 합니다. 저는 현재 직장을 다니고 있고, 퇴근 후에는 운동을 하며 운동이 끝난 뒤에는 유튜브를 보다가 잠이 듭니다. 지난 1년간 이 패턴의 일상을 반복했습니다. 이제는 제 인생이 특별하지 않다는 것을 알 것 같습니다. 앞으로 제가 일확천금을 벌 수도, 아주 잘 나가는 사람이 되기에도 힘들다는 사실을요. 그럼에도 불구하고 저는 언제나 조금 더 나은 사람이 되고자 노력하는 사람이 되고 싶습니다. 의욕을 잃지 말자고, 그 노력을..