본문 바로가기

TIL71

2024.03.18 19일차 CSS animation & flexbox CSS animation @keyframes 애니메이션 이름과 함께 단계별 상태를 정의 .box:hover { animation: grow-shrink 2s; } /* 애니메이션 정의 */ @keyframes grow-shrink { 0% { width: 100px; background: greenyellow; } 50% { width: 500px; background: orange; } 100%{ width: 300px; background: violet; } animation-name 이름이 일치하는 @keyframes 규칙의 애니메이션을 지정 animation-duration 애니메이션이 한 사이클을 완료하는데 걸리는 시간을 지정 (지속시간, 기본값 0s) animation-timing-functi.. 2024. 3. 18.
2024.03.15 18일차 적응형 웹사이트 CSS로 클론 common.css 준비 작성 리스트 reset css web fonts ( 구글 폰트 ) 아이콘 ( 폰트 어썸 ) 폰트나 아이콘은 embed code를 common.css 파일에 @import로 추가하면 됨 float 속성을 해제하는 clear 관련 클래스도 여기에 작성 화면 정중앙 배치하는 center 클래스도 여기에 작성 * 폰트 어썸 버전6는 메일로 가입 후 라이브러리를 받아야 하므로 다른 편한 곳을 사용해도 무방 ** 항상 라이브러리나 템플릿을 사용할 때는 버전 확인! *** 클론코딩에 참고한 사이트는 하단의 한화솔루션 케미칼 (적응형 : float 사용O, flex 사용X) https://hcc.hanwha.co.kr/ko/ 한화솔루션 케미칼 부문 솔루션,석유화학 제품 업체,PE,PVC,가성소.. 2024. 3. 15.
2024.03.14 17일차 CSS position, transition, transform position position 속성 요소의 위치 지정 방식을 설정 static 은 position 속성을 없앤 상태 (보통은 none이 속성X인 상태) 값 의미 static 지정 방식 없음 (기본값) relative 요소 자신을 기준으로 배치 absolute 부모 요소를 기준으로 배치 fixed 브라우저(뷰포트)를 기준으로 배치 sticky 스크롤 영역을 기준으로 배치 position과 함께 사용하는 속성 position 기준에 맞는 위, 아래쪽 거리를 설정 position 기준에 맞는 왼쪽, 오른쪽 거리를 설정 값 의미 auto 브라우저가 계산 (기본값) 단위 px, em 등 단위로 지정 % - 위치상의 부모요소의 height (top, bottom) 또는 width (left, right) 비율로 .. 2024. 3. 14.
2024.03.13 16일차 CSS font, text, background, float 글꼴 fontfont-size 글자의 높이 = px  font-weight값의미normal기본 글자 두께, 400 (기본값)bold두꺼운 글자, 700bolder부모 요소보다 더 두껍게lighter부모 요소보다 더 얇게숫자100 ~ 900 (폰트 지원 X면 적용X)  *  100 400 700 900 단위로 bolder, lighter 적용  font-stylefont-weigth 처럼 italic, oblique를 폰트에서 지원하지 않으면 적용 안됨  값의미normal스타일 없음 (기본값)italic이탤릭체oblique기울어진 글자 font-familyfont-family: 글꼴후보1, 글꼴후보2, 글꼴후보n, 글꼴계열;font-family: Arial, “Open sans”, “바탕”, dotum, .. 2024. 3. 13.

티스토리툴바