728x90 프로그래밍 팁/CSS8 CSS Flexbox를 활용한 레이아웃 디자인 방법 CSS Flexbox는 최근에 가장 많이 사용되는 레이아웃 디자인 방법 중 하나입니다. Flexbox를 사용하면 간단하게 유연한 레이아웃을 구성할 수 있습니다. 이번 글에서는 CSS Flexbox를 활용한 레이아웃 디자인 방법에 대해 알아보겠습니다. Flexbox란? CSS Flexbox는 브라우저에서 요소의 크기, 위치 및 순서를 유연하게 제어할 수 있는 레이아웃 모듈입니다. Flexbox는 요소를 가로 또는 세로 방향으로 정렬할 수 있으며, 간격을 조절하거나 중앙 정렬을 할 수도 있습니다. Flex Container와 Flex Item Flexbox 레이아웃은 Flex Container와 Flex Item으로 구성됩니다. Flex Container는 Flexbox 레이아웃을 적용할 요소이며, Flex.. 2023. 3. 13. CSS flexbox 개념 정리 CSS의 flexbox는 웹 페이지의 레이아웃을 관리하는 데 매우 유용한 기능입니다. 이 글에서는 flexbox의 기본 개념과 기능에 대해 설명하겠습니다. Flexbox란? Flexbox는 CSS의 레이아웃 모듈 중 하나로, 요소의 크기와 위치를 조정하는 데 사용됩니다. Flexbox를 사용하면 요소를 수평 또는 수직으로 정렬하고 간격을 조절하는 등의 작업이 가능해집니다. Flexbox는 부모 요소인 flex container와 그 안에 들어가는 자식 요소인 flex item으로 구성됩니다. flex container는 display 속성을 이용하여 선언하며, flex item은 flex container 안에 있는 요소입니다. Flex Container의 속성 Flex container는 다음과 같은 .. 2023. 2. 27. CSS position에 대한 개념 정리 CSS에서 position 속성은 요소의 위치 지정 방법을 정의합니다. position 속성의 값에 따라 요소의 위치가 결정됩니다. 이번에는 position 속성과 그 값을 사용하는 방법에 대해 알아보겠습니다. position 속성 position 속성에는 다음과 같은 값이 있습니다. static relative absolute fixed sticky static static 값은 position 속성의 기본값입니다. 이 값은 요소가 문서 흐름에 따라 배치되는 것을 의미합니다. top, bottom, left, right, z-index 속성이 동작하지 않습니다. position: static; relative relative 값은 요소를 문서 흐름에 따라 배치한 다음, 요소 자신의 위치를 상대적으로 이.. 2023. 2. 27. CSS 다크모드 처리 2가지 방식 다크모드를 처리하는 두 가지 방식에 대해서 설명드립니다. 일반적인 방법은 "@media"태크의 "prefers-color-schem"를 사용하는 방법이며, 또 다른 방법은 ""에 사용하는 파일로딩 방식입니다. 스크립트 방식 시스템에 설정된 light, dark 모드에 따라서 스타일시트가 적용됩니다. 파일로딩 방식 로딩한 파일중에서 시스템에 설정된 모드에 따라서 적용됩니다. JavaScript 다크, 라이트모드 변경 이벤트 처리하기 사용자가 시스템의 화면모드를 라이트 혹은 다크 모드로 변경시 이에 따른 처리를 위해서 자바스크립트로 해당 이벤트를 받아서 처리하는 방법입니다. CSS 다크모드 처리 2가지 방식 다크모드를 ccusean.tistory.com Node.js Prefers-color-scheme 서.. 2022. 7. 23. CSS 햄버거 메뉴에 애니매이션 효과 넣기 흔히 햄버거 메뉴라고 하는 접혔다 펼쳐졌다가 하는 메뉴 버튼입니다. 이 메뉴 버튼에 애니매이션 효과를 주는 방법 입니다. 메뉴가 접혀 있을 때는 햄버거 모양에서 펼쳐지면 X모양으로 자연스럽게 변하는 소스입니다. HTML 삽입 미리보기할 수 없는 소스 클릭해서 확인 해 보세요. CSS .container { display: inline-block; cursor: pointer; } .bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: #333; margin: 6px 0; transition: 0.4s; } .change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); trans.. 2022. 7. 19. CSS 네온사인 효과내기 CSS 스타일 시트를 이용한 네온사인(Neon sign)효과를 내는 소스입니다. 핵심 소스 네온사인 효과를 내는 핵심소스입니다. 원하는 html element에 "" 이와 같이 스타일을 적용하시면 됩니다. .neon { color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff0080, 0 0 30px #ff0080, 0 0 40px #ff0080, 0 0 55px #ff0080, 0 0 75px #ff0080; } HTML 삽입 미리보기할 수 없는 소스 네온사인 효과 예제 예제 소스 위 예제의 전체 소스입니다. css .neon { color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20.. 2022. 7. 18. CSS 아이폰 스위치 버튼(체크박스) CSS를 이용해서 아이폰에서 사용되는 스위치 버튼을 구현하는 방법입니다. 2022. 7. 10. CSS 접근자 css 접근자 정의 및 예시입니다. .class .intro class="intro"인 모든 요소 선택 .class1.class2 .name1.name2 class 속성 내에 name1 과 name2 가 모두 설정된 모든 요소를 선택합니다 . .class1 .class2 .name1 .name2 name1 을 가진 요소의 자손인 name2 를 가진 모든 요소를 선택합니다 . #id #firstname id="firstname"인 요소를 선택합니다. * * 모든 요소 선택 element p 모든 요소를 선택합니다. element.class p.intro class="intro"인 모든 요소를 선택합니다. element,element div, p 모든 요소와 모든 요소를 선택합니다. element eleme.. 2022. 6. 27. 이전 1 다음 728x90
