⏳ 2023. 5. 1. - 2023. 5. 7. 전환 transition transition: transition-property transition-duration transition-timing-function transition-delay; transition-timing-function 전환 효과의 타이밍(Easing) 함수를 지정 transition-timing-function: ease; -> 느리게-빠르게-느리게 타이밍 함수에 대해 더 자세히 알아보려면? https://easings.net/ Easing Functions Cheat Sheet Easing functions specify the speed of animation to make the movement more natural. ..
⏳ 2023. 5. 1. - 2023. 5. 7. flex flex는 주 축(main-axis)과 교차 축(cross-axis) 중 주 축을 기준으로 요소들을 정렬하기 위한 방법이다. 보통 수평으로 정렬하기 위해 사용된다. flex-direction flex-direction: row; -> 행(좌 => 우) row-reverse : 행(우 => 좌) column : 열(위 => 아래) column-reverse : 열(아래 => 위) flex-wrap flex-wrap: nowrap; -> 줄바꿈 없음 wrap : 여러 줄로 묶음 justify-content 주 축의 정렬 방법 jusify-content: flex-start; align-content 교차 축의 여러 줄 정렬 방법 align-conte..
⏳ 2023. 5. 1. - 2023. 5. 7. 글꼴과 문자 line-height 한 줄의 높이. 행간과 유사하다. line-height: normal; -> 브라우저의 기본값 사용 1.4 : 글꼴 크기의 1.4배 text-indent 문자 첫 줄의 들여쓰기. 음수를 사용한다면 내어쓰기가 된다. 배경 background-image div { width: 300px; height: 300px; background-color: orange; background-image: url("https://heropy.blog/css/images/logo.png"); } background-size div { width: 300px; height: 300px; background-color: orange; backg..
⏳ 2023. 4. 24. - 2023. 4. 30. CSS 속성(Property) 한글로는 같은 속성이지만 html의 속성은 attribute, css와 js에서의 속성은 property를 의미한다. 정말 다양한 css 속성이 있는데, 그 중 몇 가지를 알아보자! width & height width와 height의 기본값은 auto(브라우저가 값을 계산)이다. 인라인 요소와 블록 요소에서의 브라우저의 계산 방법이 다르니 알아두자. padding & margin 요소는 기본적으로 다음과 같은 구조를 가진다. padding은 요소의 내부 여백을 의미하며, 사용하면 콘텐츠의 크기가 커진다. margin은 요소의 외부 여백을 의미하며 특이하게도 음수값을 사용할 수 있다. 개별적으로 값을 주기도 하지만, 단축..
⏳ 2023. 4. 24. - 2023. 4. 30. 상속 스타일을 적용했을 때, 적용된 내용이 하위 요소까지 영향을 미치는 것을 스타일 상속이라고 한다. 자연스럽게 상속되는 css 속성들은 모두 글자/문자 관련 속성들이다.(모든 속성은 아님주의!) 강제 상속 코드의 유지 보수 측면에서, 상위 요소의 값을 변경하면 하위 요소의 값도 그에 따라 자동으로 바뀌는 것이 유리한데, 그때 inherit을 사용할 수 있다. .parent { width: 400px; height: 400px; background-color: red; } .child { width: 300px; height: inherit; background-color: orange; } child 요소는 parent 요소의 height 값을 따른..
⏳ 2023. 4. 24. - 2023. 4. 30. 기본 선택자 우선순위 : 전체 < 태그 < 클래스 < 아이디 전체 선택자 *을 사용하여 모든 요소를 선택 * { color: red; font-size: 100px; } 태그 선택자 태그로 선택 div { color: red; font-size: 100px; } 클래스 선택자 .을 사용하여 선택 .box { background-color: blue; padding: 20px; } 아이디 선택자 #을 사용하여 선택 #box { background-color: blue; padding: 20px; } 복합 선택자 일치 선택자 선택자를 동시에 만족하는 요소를 선택 : 모든 선택자를 공백없이 작성 div.orange { color: orange; } div이..
⏳ 2023. 4. 24. - 2023. 4. 30. 기본 문법 선택자 : { 속성: 값; 속성: 값; } div { color: red; font-size: 100px; } /* 주석은 이렇게 */ 선언 방식 내장 html의 head 태그 안에 style 태그를 사용하여 스타일을 적용하는 방법 하나의 html 파일 안에서 스타일을 관리할 수 있지만.. 유지 보수 측면에서 불리하다. html과 css 파일을 구분하는 것이 권장하는 방법!! 인라인 html의 요소에 직접 스타일을 작성하는 방법 인라인 방식은 스타일의 우선 순위가 너무 높기 때문에 유지 보수가 어렵다. 링크 link 태그를 사용하여 css 문서를 연결하는 방법(병렬) 가장 권장하는 방법! @import css 문서 안에서, 또 다른 css ..