프로그래밍/CSS
[CSS] 인접 요소 연산자(Adjacent sibling combinator)
[CSS] 인접 요소 연산자(Adjacent sibling combinator)
2022.01.22🎯 인접 요소 연산자(Adjacent sibling combinator) One Two! Three li:first-of-type + li { color: red; } 📌 참고 Adjacent sibling combinator - CSS: Cascading Style Sheets | MDN
[CSS] CSS Box Model - box-sizing
[CSS] CSS Box Model - box-sizing
2022.01.11🎯 CSS Box Model - box-sizing width, height는 디폴트로 content-box의 크기를 정의된다. width : 100px으로 정의 시, content의 크기만 100px이 되며, padding, border의 크기는 100px에 추가된다. content-box의 경우, width값에서는 padding, border의 길이를 포함하지 않는다. border-box : padding, border를 width, height에 포함한다. 보통 이해하기 쉬운 레이아웃을 정의하기 위해 box-sizing:border-box를 선호한다.
[CSS] background 속성 총정리
[CSS] background 속성 총정리
2021.10.30🎯 background 총정리 background의 모든 것을 알아보자! 📝 background 속성 background-color : 배경색 background-image : url("filename.xxx") : 배경 이미지 background-repeat : 배경 이미지 반복 설정 repeat(가로세로 반복), no-repeat(반복 X), repeat-x(가로만 반복), repeat-y(세로만 반복) background-attachment : 배경 이미지를 스크롤과 무관하게 해당 위치에 고정 scroll : 기본값 fixed : 배경 이미지는 고정되고 내용물만 스크롤 background-position : 배경 이미지 상대 위치 설정 background-size : 배경 이미지 크기 조절 cont..
[CSS] position 속성과 사용법 총정리
[CSS] position 속성과 사용법 총정리
2021.10.30🎯 2차원과 3차원을 결정짓는 요소 :: position 1차원은 선의 세계, 2차원은 평면의 세계, 3차원은 공간의 세계 부모 자식 지간에 발생하는 마진 병합 현상 유무 (2차원 O, 3차원 X) top, left, right, bottom 사용할 수 있는지 (2차원 X, 3차원 O) 자식의 높이값이 부모의 높이값에 영향을 주는지 유무 (2차원 O, 3차원 X) 📝 position 속성 position: static : 2차원 영역, 기본값, top, right, bottom, left 속성은 적용되지 않는다. position: relative : 2, 3차원 영역, 상대적인 위치에 배치 위치는 top, right, bottom, left 속성에 의해 지정 position: absolute : 3차원 ..
[CSS] media query 사용법
[CSS] media query 사용법
2021.10.28🎯 media query 사용법 미디어 쿼리는 모바일에 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용하는 css 구문이다. 📝 media query @media () and () { } @media (min-width: 320px) and (max-width: 800px) { } 미디어 쿼리를 사용하면 기존 속성을 교체할 수도, 새로운 속성을 추가할 수도 있다. 📝 viewport viewport는 디지털 기기에 표시되는 화면이다. 모바일이나 태블릿은 미리 설정되어 있는 모바일이나 태블릿은 미리 설정되어 있는 viewport로 인해 미디어 쿼리가 제대로 작동하지 않을 수 있다. 태그의 속성 중 하나인 viewport을 입력해서 디바이스에서 의도한 대로 화면이 출력되도록 하자. 모든 기기의 뷰포트가..
[CSS] animation 속성과 사용법
[CSS] animation 속성과 사용법
2021.10.28🎯 animation 속성과 사용법 말 그대로 애니메이션 효과를 준다. 속성은 트랜지션과 다르지 않다. 📝 animation 속성 animation-name : @keyframes 애니메이션 이름을 지정 animation-duration : 애니메이션이 소요되는 시간 지정(s, ms) animation-timing-function : 애니메이션이 나타나는데 걸리는 시간, transition-timing-function과 동일 animation-delay : 애니메이션 대기 시간 지정(s, ms) animation-iteration-count : 애니메이션 반복 횟수 animation-direction : 애니메이션 진행 방향 설정 alternate: from → to -> from normal : fro..
[CSS] transition 속성과 사용법
[CSS] transition 속성과 사용법
2021.10.28🎯 transition 속성과 사용법 특정 조건 하에서 애니메이션이 동작되는 과정을 보여주고자 할 때 사용 전환이 일어날 요소들을 작성해주는 것! 📝 transition 속성 transition-property : 효과를 적용하고자 하는 css 프로퍼티를 지정. 즉, 과정을 보고 싶은 속성을 지정 기본값 : all 복수의 프로퍼티를 지정하는 경우 쉼표(,)로 구분한다. transition-property: width height; 전환 수치를 다르게 하려면? transition: width 1s, height 2s transition-duration : 효과가 나타나는데 걸리는 시간 기본값 : 0s transition-timing-function : 트랜지션 효과의 속도 기본값 : ease, 느리게 시작..
[CSS] transform 속성과 사용법
[CSS] transform 속성과 사용법
2021.10.28🎯 transform 속성과 사용법 특정 영역을 회전시키거나, 확대/축소시키거나 각도를 변경하여 비틀거나 위치를 변경하는 등의 효과를 적용할 때 사용된다. 📝 transform 속성 rotate(00deg) : 입력한 각도만큼 회전(시계방향), 음수 가능(반시계 방향으로 회전) scale(4, 5) : 확대 축소, widht를 4배 & height를 5배 확대 skew(5deg(x), 10deg(y)) : x축, y축을 기준으로 입력한 각도만큼 비틂 translate(50px(x), 120px(y)) : 현재 위치에서 지정한 값만큼 x축, y축 이동 transform: rotate(30deg); /* 회전 */ transform: translate(12px, 30px); /* 위치 변경 */ transf..
[CSS] Flexbox 총정리
[CSS] Flexbox 총정리
2021.07.10Flexbox란? 서로 다른 크기의 화면과 기기에서도 HTML 요소들이 자동으로 재 정렬되어, 웹 페이지의 레이아웃을 언제나 똑같이 유지할 수 있게 해준다. 요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 플렉스 박스(flex box)는 플렉스 컨테이너(flex container)와 플렉스 요소(flex item)로 구성된다. container에 적용할 수 있는 속성 값 display flex-direction flex-wrap flex-flow justify-content align-items align-content itm에 적용되는 속성 값 order flex-grow flex-shrink flex align-self The flex model main axi..