codeStates front-end/Css
-
[css] css 애니메이션codeStates front-end/Css 2023. 3. 17. 13:19
HTML 삽입 미리보기할 수 없는 소스 📌 css 애니메이션 css 애니메이션은 여러 개의 css 스타일을 부드럽게 전화시켜준다. @keyfremes 키워드를 활용하면 시간 순서대로 정밀하게 짜여진 애니메이션을 만들 수 있다. 📍 @keyframes @keyframes를 지정하는 방법 /* '%' 단위로 시간 진행에 따른 상태를 작성해주면 됩니다. */ @keyframes 애니메이션이름 { 0% { /* from 이라고 작성해도 됩니다.*/ CSS속성 : 속성값; } 50% { /* 애니메이션 진행도에 따른 스타일을 설정합니다. */ /* 필요하다면 1부터 99까지도, 소수점까지도 모두 작성해도 됩니다.*/ CSS속성 : 속성값; } 100% { /* to 라고 작성해도 됩니다.*/ CSS속성 : 속성값..
-
[css] 반응형 웹codeStates front-end/Css 2023. 3. 16. 20:08
HTML 삽입 미리보기할 수 없는 소스 📌 반응형 웹 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기에 실시간 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미한다. 📍 리플로우(Reflow)와 리페인트(Repaint 화면을 늘리거나 줄이는 등 크기를 조절하거나, 다른 사이트로 이동을 하는 등 화면에 있던 요소들의 크기가 바뀌게 되는데, 화면에 나타나는 모습을 바꾸기 위해 모든 요소의 위치와 크기를 다시 계산하고, 다시 그려야 한다. 웹 인터렉션으로 인해 렌더링 과정의 레이아웃을 반복해 수행하는 것을 리플로우, 페인트 과정을 반복 수행하는 것을 리페인트라 한다. 🔗 리플로우와 리페인트의 최적화 말 그대로 다시 필하고 다시 플로우를 정해야하는데, 이런 과정은 최소..
-
[css] SelectorcodeStates front-end/Css 2023. 1. 4. 10:04
기본 셀렉터 * { } // 전체 셀렉터 h1 {} div {} section,h1 {} // 택스 셀렉터 (복수 선택 가능) #only {} // id 셀렉터 .widget {} .center {} // class 셀렉터 a[href] { } p[id="only"] { } p[class~="out"] { } p[class|="out"] { } section[id^="sect"] { } div[class$="2"] { } div[class*="w"] { } // attribure 셀렉터 자식/후손/형제 셀렉터 자식 header > p { } 후손 header p {} 형제 section ~ p { } 인접 형제 section + p { } 기타 a:link { } /*사용자가 방문하지 않은 요소를 선택합..
-
[css] 박스를 구성하는 요소codeStates front-end/Css 2023. 1. 4. 10:03
***************************************** 내 기준 상 제일 중요 **************************************** css 박스 모델 border(테두리)를 기준으로 padding(안쪽 여백)과 margin(바깥 여백) border(테두리) p { border: 1px solid red; } margin(바깥 여백) 각각의 값은 top,bottom,left,rigjt로 시계 방향 p { margin: 10px 20px 30px 40px; } // top,bottom,left,rigjt p { margin: 10px 20px; } // 값 2개 -> top,bottom : 10px left,right : 20px p { margin: 10px; } /..
-
[css] 박스 모델codeStates front-end/Css 2023. 1. 4. 10:00
모든 콘텐츠는 고유한 영역이 있다. 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 된다. 코드로 확인해보기 index.html Basic document flow I am a basic block level element. My adjacent block level elements sit on new lines below me. By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height. We are separated by our margins. Beca..
-
[css] css 속성codeStates front-end/Css 2023. 1. 4. 09:57
css 속성 색상(글자의 색상) color 배경 색상 background-color 박스 테두리 색상 border-color 박스 테두리 두께 border-width 박스 테두리 스타일 border-style 글꼴(구글폰트를 사용) font-family 크기 font-size 굵기 font-weight 밑줄,가로줄 text-decoration 자간 letter-spacting 행간 line-height 가로로 정렬 text-align 세로로 정렬 vertical-align(잘 사용 x) 는 잘 사용하지 않는다 절대 단위 : px(글꼴) , pt 상대 단위 : %, em, rem(가장 사용 많음), ch, vw, vh
-
[css] 기본 개요codeStates front-end/Css 2023. 1. 4. 09:54
본 실습은 VS CODE로 작성했습니다. CSS는 독립적으로 사용하지 못한다. 그렇기에 기본 웹사이트를 세팅 후 CSS 알아보기 index.html This is the header. This is the navigation section. Home Mac iPhone iPad This is the main content. ... This is an aside section. ... 개인정보 처리방침 이용 약관 법적 고지 index.css body { margin: 0; padding: 0; background: #fff; color: #4a4a4a; } header, footer { font-size: large; text-align: center; padding: 0.3em 0; background-..