Frontend/CSS12 [CSS] Grid 기본 기능 display: grid; grid-template-columns: repeat(5, 1fr); /* grid-template-columns: 1fr 1fr 1fr; */ /* grid-template-rows: repeat(2, 100px); */ grid-auto-rows: minmax(140px, auto); grid-gap: 10px; grid-template-areas: 'a a a' 'b c c' 'b d g' 'e f g'; .image1 { grid-area: a; } 2023. 2. 18. [CSS] 반응형 디자인 media query 참고 문서 : https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries Using media queries - CSS: Cascading Style Sheets | MDN Media queries allow you to apply CSS styles depending on a device's general type (such as print vs. screen) or other characteristics such as screen resolution or browser viewport width. Media queries are used for the following: developer.mozilla.org 사.. 2023. 1. 25. [CSS] transition을 통한 자연스러운 동적인 효과 주기 transition 변화하는 요소를 급작스럽게가 아닌 원하는대로 자연스러운 효과를 주기 참고 사이트 : https://developer.mozilla.org/en-US/docs/Web/CSS/transition transition - CSS: Cascading Style Sheets | MDN The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. developer.mozilla.org https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timi.. 2023. 1. 17. [CSS] background/background-image를 활용한 반응형 배경 참고 사이트 : 1. background https://developer.mozilla.org/en-US/docs/Web/CSS/background background - CSS: Cascading Style Sheets | MDN The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. developer.mozilla.org 2. background-image https://developer.mozilla.org/en-US/docs/Web/CSS/background-image background-image - .. 2023. 1. 16. [CSS] flex가 아닐 때 가운데 정렬하기 수평 가운데 정렬 block 요소인 경우 margin : auto; inline 요소인 경우 text-align : center; 수평, 수직 가운데 정렬 //첫번째 방법 transform : translate(50%, 50%); //본인 사이즈 기준 50% //부모 요소 크기가 해당 요소 크기의 2배가 아닌경우에는 position: relative, top, left로 위치 조정해줘야함 //두번째 방법 text-align : center; line-height: 부모 요소 높이 만큼; //단, text가 한 줄인 경우만 가능함! 2023. 1. 15. [CSS] CSS를 HTML에서 사용하는 방법 (inline, internal, external) 1. inline 적용 우선 순위가 가장 높은 방법으로 태그 내에 바로 스타일을 적용시켜줌 눈송이 2. internal head 태그 내 style 태그를 지정하여 스타일 적용 별도의 CSS 파일을 관리하지 않아도 되며 브라우저가 따로 요청 보낼 필요가 없음 구조와 스타일이 뒤섞여 유지보수가 어려움 3. external 외부 CSS 파일을 지정하여 HTML 파일에 불러오는 방식 2023. 1. 5. 이전 1 2 다음