프로그래밍/CSS21 [CSS 핵심강좌] 1. 소개 CSS (Cascading Style Sheets)은 HTML로 작성된 문서의 외관과 형식을 설명하는 스타일 시트 언어입니다. HTML, XHTML 및 XML로 작성된 웹 페이지와 사용자 인터페이스의 프리젠테이션을 제어하는 데 사용됩니다. CSS를 사용하면 색상, 글꼴, 크기, 레이아웃 등 HTML 요소에 스타일을 적용할 수 있습니다. 이를 통해 웹 페이지의 내용과 프리젠테이션을 분리하여 웹 사이트를 유지 관리하고 업데이트하기 쉬워집니다. HTML 문서에 CSS 스타일을 적용하는 세 가지 방법이 있습니다: 1. 인라인 스타일 스타일은 "style" 속성을 사용하여 HTML 요소에 직접 적용됩니다. This text will be displayed in red. 위의 HTML 코드는 "p" 요소에 직접 적.. 2023. 3. 4. [CSS 핵심강좌] 0. 개요 및 목차 CSS (Cascading Style Sheet)의 핵심 코스 목록입니다: CSS 소개 CSS 선택자 CSS 박스 모델 CSS 레이아웃 CSS Flexbox CSS Grid CSS 전환과 애니메이션 CSS 미디어 쿼리 CSS 전처리기 (Sass, Less) CSS 반응형 디자인 접근성 및 사용성을 위한 CSS 기술 CSS 툴링과 워크플로우 (CSS 프레임워크 및 BEM, OOCSS, SMACSS와 같은 CSS 방법론을 포함) 2023. 3. 4. 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. 이전 1 2 3 4 다음 반응형
