웹/CSS5 CSS 애니메이션/우선순위/변수 1. Transform / Transition transform 요소의 시각적 모양을 변경하는 데 주로 사용됩니다. 주로 2D 및 3D 변형을 적용하는 데 사용됩니다. - translate: 이동 - rotate: 회전 - scale: 확대, 축소 - skew: 경사, 비틀기 transition CSS 속성 값의 변화에 부드러운 전환(transition) 효과를 제공하는 기술입니다. 이것은 주로 요소의 상태 변화, 마우스 호버 이벤트, 클릭 등과 관련이 있습니다. - property: 요소에 추가할 전환효과를 설정 - timing-function: 전환효과의 값을 설정(linear, ease...) - duration: 전환효과를 나타내는 시간을 설정 - delay: 설정한 시간만큼 대기하다 전환 효과를.. 2023. 10. 16. CSS flex 1. Flex 레이아웃 `display: flex`는 CSS의 속성 중 하나로, 요소의 자식 요소들을 수평 또는 수직으로 정렬하기 위한 레이아웃 방식입니다. 부모 요소에 `display: flex`를 적용하면 그 부모 요소는 "flex 컨테이너"가 되며 그 안의 자식 요소들은 "flex 아이템"이 됩니다. Flexbox 레이아웃은 아이템들을 자동으로 조절하여 화면에 맞게 배치하며, 레이아웃을 보다 쉽게 제어할 수 있게 합니다. 이를 통해 반응형 디자인 및 복잡한 레이아웃을 쉽게 구현할 수 있습니다. flex-wrap: 플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성 nowrap: 기본값. 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여 한 줄에 배치 wrap: 플렉스 요소의 .. 2023. 10. 15. CSS 디스플레이, 포지션 1. CSS display ( : block, inline, inline-block, none) - 웹 페이지의 레이아웃을 결정하는 속성입니다. ✔ visibility: hidden; / visibility: visible; visibility: visible - hidden은 글씨만 나타났다 없어지고 dispaly: block - none은 글씨가 차지하던 자리까지 함께 나타났다 없어짐. 2. CSS position - position은 요소의 위치를 결정하는 방식을 설정합니다. 1. 정적 위치 지정방식 ▶ static Position (기본값) - HTML 요소의 위치를 결정하는 기본적인 방식 - 단순히 웹 페이지의 흐름에 따라 차례대로 요소들이 위치를 결정하는 방식 2. 상대 위치 지정방식 ▶ re.. 2023. 10. 15. CSS 텍스트/배경 1. CSS의 text CSS에서 텍스트를 꾸미는 방법은 아주 다양합니다. letter-spacing: - 텍스트 내에서 글자 사이의 간격을 설정합니다. 예) 안녕하세요. 오늘은 화요일! 안 녕 하 세 요 . 오 늘 은 화 요 일 ! word-spacing: - 텍스트 내에서 단어 사이의 간격을 설정합니다. 예) 안녕하세요. 오늘은 화요일! 안녕하세요. 오늘은 화요일! text-align: (left, right, center, justify) - 텍스트 수평 방향 정렬을 설정합니다. text-decoration: (none, underline, line-throuth, overline) - 텍스트의 효과를 설정하거나 제거하는데 사용합니다. 하이퍼링크 밑줄을 없애거나 리스트의 꾸밈표시를 없앨 수 있습니다.. 2023. 10. 15. CSS(Cascading Style Sheets) 1. CSS 문법 CSS( Cascading Style Sheets)는 웹 페이지의 디자인과 스타일을 정의하는 스타일 시트 언어입니다. HTML이 웹 페이지의 구조를 정의하는 데 사용되는 반면, CSS는 웹 페이지의 시각적인 표현을 조절하는 데 사용됩니다. ✔ HTML 문서 사이에 요소를 사용하여 적용하는 방법 (3) 외부 스타일 - 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 적용하는 방법. 파일 안에는 html 문법은 제외하고 css 언어만 들어가 있어야 한다. ✔ rel 현재 문서와 링크된 문서 사이의 연관 관계를 명시 /* css 파일 예시 ( html 요소인 stlye 태그 없이 작성) */ h2 {font-size: 50px;} ul {list-style: none;} li {.. 2023. 10. 10. 이전 1 다음
