CSS12 CSS Animation ⭐ css 애니메이션웹 요소에 애니메이션 추가애니메이션을 시작해 끝내는 동안 원하는 곳 어디서든 스타일을 바꾸며 애니메이션 정의 가능키프레임(keyframe)>> 애니메이션 중간에 스타일이 바뀌는 지점종류 설명@keyframes애니메이션이 바뀌는 지점을 지정합나다.animation-delay애니메이션의 시작 시간을 지정합니다.animation-direction애니메이션을 종료한 뒤 처음부터 시작할지, 역방향으로 진행할지 지정합니다.animation-duration애니메이션의 실행 시간을 지정합니다.animation-iteration-count애니메이션의 반복 회수를 지정합니다.animation-name@keyframes로 설정해 놓은 중간 상태를 지정합니다.animation-timing-funtion키프.. 2024. 8. 29. CSS Transition ⭐ Trasform(변형)특정 요소의 크기나 형태 등 스타일이 바뀌는 것✔️2차원 변형x축과 y축을 사용하여 요소를 변형: 수평이나 수직으로 웹 요소 변형크기나 각도만 지정2차원 좌표 사용종류설명translate(tx, ty)지정한 크기 만큼 x축, y축으로 이동합니다.translateX(tx)지정한 크기만큼 x축으로 이동합니다.traslateY(ty)지정한 크기 맡큼 y축으로 이동합니다.scale(sx, sy)지정한 크기만큼 x축, y축으로 확대/축속합니다.scaleX(sx)지정한 크기만큼 x축으로 확대/축속합니다.scaleY(sy)지정한 크기만큼 y축으로 확대/축속합니다.rorate(각도)지정한 각도만큼 회전합니다.skew(ax, ay)지정한 각도만큼 x축/y축으로 왜곡합니다.skewX(ax)지정한 .. 2024. 8. 29. CSS Display : Flex Flex: 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃⭐ 특징웹 페이지 내의 요소들을 '컨테이너 내'의 아이템들 간의 공간 분배와 정렬을 다양한 화면 크기와 디스플레이 유형에 맞춰 동적으로 조정사용 목적반응형 레이아웃: 화면 크기에 따라 배치 설정을 달리할 때 사용정렬 문제: 여러 아이템을 수직 또는 수평으로 정렬할 경우 사용단순한 수직 스크롤 페이지: 단일 방향으로 요소를 배치하는 경우 사용⭐ 주요 개념Flex 컨테이너(Container)lexbox 레이아웃을 정의할 테두리Flex 컨테이너 내의 모든 직접 자식 요소는 Flex 아이템이 됨 >> 직접적인 자식 요소가 아닌 경우 flex 설정이 불가⭐ display: flex (Flex Container를 만드는 속성)Flex 아이템(Item)F.. 2024. 8. 29. CSS Background 배경색과 배경 범위 지정하기웹 문서의 전체 배경뿐만 아니라 텍스트, 목록 등 특정한 요소에도 배경 지정 가능 ⭐ background-color 속성배경색 지정16진수 혹은 rgb값 또는 색상 이름 사용세밀한 조절: 16진수 / 투명도 조절: rgba기본형태background-color: #000000;background-color: rgb(0, 128, 0);background-color: green;background-color는 상속되지 않는다.글꼴, 글자 크기는 하위 요소에서 스타일을 수정하지 않느 한 상속기본적으로 웹 문서 요소의 배경은 투명>> body스타일로 지정한 문서 배경이그대로 비치는 것>> 웹 요소에 배경색이 상속되지 않는다. ⭐background-clip 속성배경색의 적용 범위 조절박.. 2024. 8. 27. CSS Display ⭐ display 속성배치 방법 결정블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용 가능하다.주로 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치 시이미지를 표 형태로 배치 가능display 속성값block: 인라인 레벨 요소를 블록 레벨 요소로 전환inline: 블록 레벨 요소를 인라인 레벨 요소로 전환inline-block: 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지는 속성 / 마진과 패딩 지정 가능none: 해당 요소를 화면에 표시하지 않는 속성display 예시 ⭐ float 속성왼쪽 혹은 오른쪽으로 배치 태그처럼 문단의 왼쪽이나 오른쪽에 이미지를 나란히 표시해야 할 경우 사용 태그는 블록 레벨 요소이므로 이미지와 나란히 한 줄에 배치가 안된다. → float 속성 .. 2024. 8. 25. CSS margin & padding margin & paddingmargin(마진) : 두 박스 모델 사이의 여백padding(패딩) : 한 박스 모델에서 테두리와 내용 사이의 여백 margin 속성요소 주변의 여백을 설정 요소와 요소 사이의 간격을 조절한다.4가지 방향에 한번에 똑같이 지정한다.OR 특정 방향 지정 : margin 하이픈(-) top, right, bottom, left기본형태 >> margin: | | automargin 속성 : 너빗값이나 높잇값을 px이나 em 같은 단위와 함께 수치로 지정한다. ( margin: 50px ): 박스 모델을 포함한 부모 요소를 기준으로 너빗값이나 높잇값을 퍼센트(%)로 지정한다. ( margin: 0.1% )auto: display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 .. 2024. 8. 23. 이전 1 2 다음
