분류 전체보기 썸네일형 리스트형 [css]Flexbox 마스터하기: 4. Flexbox를 활용한 반응형 사진 갤러리 예제 안녕하세요! 이번에는 Flexbox를 활용하여 반응형 사진 갤러리를 구현하는 예제에 대해 알아보겠습니다. 이 예제는 다양한 디바이스와 화면 크기에 자동으로 조정되는 유연한 레이아웃을 구현하는 방법을 보여줄 것입니다. HTML 삽입 미리보기할 수 없는 소스 [ 예제 설명 ] 위의 예제에서는 .gallery를 Flex 컨테이너로 설정하고, img 태그를 Flex 아이템으로 배치합니다. 사진 갤러리는 가로로 유연하게 표시되며, 화면의 크기에 따라 자동으로 조정됩니다. 각 이미지는 src 속성을 통해 실제 이미지 파일을 로드하고, alt 속성을 통해 대체 텍스트를 제공합니다. .image 클래스를 적용하여 스타일을 설정하며, flex: 0 0 300px;를 사용하여 이미지의 고정된 너비를 지정합니다. objec.. 더보기 [css]Flexbox 마스터하기: 3.Flex 컨테이너 설정 Flex 아이템은 Flex 컨테이너 내에서 배치되는 개별 요소입니다. 이번에는 Flex 아이템에 대한 설정에 대해 알아보겠습니다. Flex 아이템을 조정하면 유연한 레이아웃을 구성할 수 있습니다. [ Flex 아이템 순서 변경 (order) ] Flex 아이템의 순서를 변경하기 위해 order 속성을 사용할 수 있습니다. order 값은 숫자로 지정하며, 숫자가 작을수록 앞에 위치하게 됩니다. HTML 삽입 미리보기할 수 없는 소스 [ Flex 아이템의 크기 조절 (flex-grow, flex-shrink, flex-basis) ] Flex 아이템의 크기를 조절하기 위해 flex-grow, flex-shrink, flex-basis 속성을 사용할 수 있습니다. 이들은 각각 Flex 아이템의 증가 비율, .. 더보기 [css]Flexbox 마스터하기: 2.Flex 컨테이너 설정 Flexbox를 사용하기 위해서는 우선 컨테이너에 대한 설정이 필요합니다. Flex 컨테이너는 내부의 요소들을 포함하고 있으며, 그들을 유연하게 배치하기 위한 기준을 제공합니다. Flex 컨테이너를 설정하기 위해 다음과 같은 CSS 속성을 사용할 수 있습니다 [ display ] Flex 컨테이너를 생성하기 위해 display 속성을 사용합니다. Flex 컨테이너를 생성하기 위해서는 display 속성에 flex 값을 지정해야 합니다. 예를 들어: .container { display: flex; } 위 코드는 .container 클래스를 가진 요소를 Flex 컨테이너로 설정합니다. [ flex-direction ] flex-direction 속성은 Flex 컨테이너 안에서 아이템들이 배치되는 방향을 설.. 더보기 [css]Flexbox 마스터하기: 1.소개 소개 Flex 컨테이너 설정 Flex 아이템 속성 Flexbox를 활용한 실전 예제 1. 소개 Flexbox는 웹 디자인에서 강력하고 유연한 레이아웃을 구성하는 데에 사용되는 CSS 기술입니다. 이러한 Flexbox를 이해하고 활용하는 것은 현대적이고 반응형인 웹 디자인을 구축하는 데 있어서 핵심적인 역할을 합니다. 이 블로그 컨텐츠에서는 Flexbox에 대해 상세히 알아보고, 실전 예제와 활용법을 함께 살펴보겠습니다. [ Flexbox란 무엇인가? ] Flexbox는 Flexible Box의 줄임말로, 요소들을 유연하게 배치하기 위한 레이아웃 모델입니다. Flexbox를 사용하면 요소들을 가로 또는 세로 축을 기준으로 유연하게 배치할 수 있으며, 강력한 정렬과 공간 배분 기능을 제공합니다. [ Flex.. 더보기 [html5] input type date 와 input type time 25년을 넘게 개발해오고 있는 나지만, 얼마전에 이걸 쓰기 시작했으니, 참. 공부를 했다가도 까먹고 있다가 불연듯 생각나는 경우가 있다. 예전에는 date와 datetime을 입력받기 위해서 열심히 스크립트도 만들고 레이어를 올리거나 하는 방식으로 했었는데... 세상 편한 이걸 두고 참. 간단히 사용법 살펴보자 1. input type="time" 거두 절미하고 codepen에 한 번 써보자 See the Pen html5 input type date and input type datetime by 기꾸 (@kigqzaer-the-lessful) on CodePen. [ 브라우져별 표시 모양 ] 브라우져마다 표시모양이 제각각 [ 값 = YYYY-MM-DD ] 값은 위 모양대로 통일된다. 또는 빈값. [ .. 더보기 ngrok으로 로컬 개발 환경(localhost) https 로 개발테스트 하기 웹개발시에 localhost로 개발중 구글서비스(geolocation, geocoding, 주소검색서비스) 또는 facebook api 등 외부 api 서비스를 연동하거나 oauth token 발급용이라던지, https url이 필요할 때가 많다. 이때 letsencrypt 나 직접 인증서 파일을 만들어서 개발하는 방법도 있겠으나, ngrok를 활용해서 https를 간단하게 만들어서 개발하는 방법을 소개해본다. 1. ngrok 가입 https://ngrok.com/ ngrok - Online in One Line Zero Trust Add SSO, Mutual TLS, IP Policy, and webhook signature verification. ngrok.com [ ngrok 첫화면 ] 위 예시에.. 더보기 초간단 HTML 웹 서버 구축 - Live Server vscode 로컬 호스트로 간단한 정적웹사이트나 테스트 개발 사이트가 필요할때, vs extension중 live server 를 소개하고 간단한 기본사용법을 알아본다. 1. Live Server 설치 vscode로 개발할 때 간단하게 로컬 웹서비스를 만들어서 테스트할 경우가 빈번히 발행하는데, 발생할 때마다 매번 nginx에 올리거나 로컬 웹서버를 구동시켜서 올리는 불편한 경우가 있다. Live Server는 이를 대신해 간단하게 로컬웹서비스를 만들어서 테스트 해볼수 있도록 웹서버를 만들어준다. [ vsode extension 설치 ] vscode 왼쪽 확장 extension 아이콘 클릭 liveserver를 입력해서 검색 Liver Server 선택 우측 설치 선택(이미 저는 설치가 되어있어서 사용안함으로 표시되.. 더보기 HTTP와 HTTPS의 개념 웹의 시작. http와 https 의 개념을 알고, https가 왜 대두가 되었는지 그리고, 웹 개발시에 https를 왜 써야하는지 간략히 정리해본다. 1. http HTTP(Hypertext Transfer Protocol)는 클라이언트와 서버 간 통신을 위한 통신 규칙 세트 또는 프로토콜. 사용자가 웹 사이트를 방문하면 사용자 브라우저가 웹 서버에 HTTP 요청을 전송하고 웹 서버는 HTTP 응답으로 응답 웹 서버와 사용자 브라우저는 데이터를 일반 텍스트로 교환. HTTP 프로토콜은 네트워크 통신을 작동하게 하는 기본 기술 2. http 동작 HTTP는 OSI(Open Systems Interconnection) 네트워크 통신 모델의 애플리케이션 계층 프로토콜. HTTP는 여러 유형의 요청과 응답을 .. 더보기 이전 1 2 3 4 다음
