본문 바로가기

CSS11

[CSS] 반응형 웹 반응형 웹 반응형웹이란? 다양한 디바이스에 접속했을 때, 기기의 viewport 규격에 반응하여 레이아웃이 자동으로 변경되는 웹페이지 미디어쿼리란? 뷰포트의 너비에 따라 웹사이트의 스타일 시트를 수정할 수 있다. 뷰포트 너비 외에도 단말기의 종류, 해상도 등을 기준으로 설정할 수 있다. @media 미디어 쿼리 @media screen and (max-width : 500px) { // 스크린의 viewport 너비가 500px 이하일 경우 // 적용시킬 스타일 시트 } breakPoint 반응형 웹 사이트 작업의 기준이 되는 중단점을 말한다. 간단하게 말해서, pc / 태블릿 / 모바일의 기준이 되는 규격 분기! 반응형웹에서 자주 쓰이는 속성 max-width & max-height 해당요소의 최대 너.. 2024. 4. 9.
[CSS] grid레이아웃 grid 레이아웃 CSS 레이아웃의 흐름 : Float > Flex > Grid grid 레이아웃 시스템의 구조 flex는 1차원적 배열 구조 : row, column 방향 택 1 flex를 여러번 중첩시켜서 사용하여 구조를 짠다. grid는 2차원적 배열 구조 : row와 column 레이아웃 동시 설정 가능 grid 속성 요소의 속성을 grid로 변경 grid-line, grid-number grid-template-rows grid의 행의 개수 및 크기를 지정할 수 있다. grid-template-rows : 1fr 2ft 200px grid-template-columns grid의 열의 개수 및 크기를 지정할 수 있다. fr : fraction(분수)의 약자, grid-template에서 사용할 .. 2024. 4. 9.
[CSS] animation animation animation이란? 여러 이미지를 연결해서 자연스럽게 움직이는 것처럼 보이게 만드는 기법 CSS을 이용해서 애니메이션을 만드는 두 가지 방법 transition 속성 활용 animation 속성과 keyframe 활용 transition VS animation transition : 특정한 이벤트를 기점으로 작동함 (hover 등) animation : 시작하기 위한 이벤트가 필요 없음. 시작, 정지, 반복까지 제어할 수 있음 animation 속성은 @keyframes로 애니메이션을 정의하고, 정의한 애니메이션을 불러와서 제어해주어야 한다. animation-name 어떠한 keyframes를 요소에 적용할 것인지 지정 animation-duration 애니메이션을 한 번 재생하는.. 2024. 4. 9.
[CSS] transition과 transform transition transition이란? CSS에서 속성을 이용한 변화의 전, 후 사이에 애니메이션을 추가해서 움직임을 부드럽게 해주는 것 transition-property 어떠한 속성에 transition을 적용할 것인지 지정 transition-property: color, transform transition-duration transition에 걸리는 시간을 지정 transition-timing-function transition의 속도 패턴을 지정한다 [종류] linear : 일정한 속도로 변화한다. ease: 시작할 때는 빨라지다 느려진다. ease-in: 천천히 시작했다가, 속도를 높여 끝난다. ease-out: 빠른 속도로 시작했다가, 천천히 끝난다. ease-in-out: 천천히 시.. 2024. 4. 8.
[CSS] flex 레이아웃 flex레이아웃 CSS 레이아웃 배치에 중점을 두고 고안되었기 때문에 기존의 float 방식보다 훨씬 수월하고 간단하게 레이아웃을 잡을 수 있다. 요소의 속성을 flex로 변경 display : flex flex-direction : row(기본값) | columns justify-content : 중심축 방향 정렬 flex-start(기본값), flex-end, center, space-around, space-between, space-evenly align-items : 중심축 반대 방향 정렬 stretch(기본값), flex-start, flex-end, center ⭐️ align-items는 flex-item이 한 줄 일 때 우선 적용! 두 줄 이상일 때에는 align-content라는 다른 .. 2024. 4. 8.
[CSS] position position이란? HTML요소가 배치되는 방식을 결정하는 속성 positioxn의 속성 5가지 static(기본값), relative, absolute, fixed, sticky top, left, right, bottom : 해당 방향 기준으로 요소의 좌표값을 변경 position: static(기본값) 요소를 문서상 원래 있어야 하는 위치에 배치한다. top, left, right, bottom 적용 불가 position: relative 원래 있던 자리를 기준으로 요소의 위치를 조정할 수 있다. top, left, right, bottom 적용 가능 position: absolute 절대 좌표를 기준으로 요소의 위치를 조정할 수 있다. top, left, right, bottom 적용 가능 * .. 2024. 4. 7.

티스토리툴바