차근차근 배움터

inline의 경우 첫째, 높이와 너비 속성은 적용되지 않아요 즉 이 속성을 사용할 수 없다는 거죠 둘째, 인라인 요소로 수평 패딩과 여백만 지정할 수 있어요 inline-block의 경우 인라인 블록 요소는 블록과 인라인의 조합입니다. 이러한 요소(예: 블록)에 높이, 너비, 전체 패딩을 설정할 수 있습니다. 이러한 요소는 기본적으로 다른 요소가 새 줄에서 줄 바꿈되지 않는다는 점에서 인라인 요소처럼 작동합니다. 이러한 요소는 요소가 서로 옆에 배치되기를 원하지만 요소가 표시되는 방식(전체 패딩/너비/높이)에 대한 원격 제어를 원할 때 유용합니다. Now, a common misconception is that only the z index property creates new stacking cont..

왜 rem 단위를 사용하는지 그리고 rem - px 변환 방법도 알아본다 body / html 대신 * 를 사용하는 이유 1rem = 루트의 글꼴 사이트 * 1 inherit을 사용하여 sizing 상속시켰다! body 에 inherit을 작성하는 건 줄 알았는데 아니네

모든 css 속성은 반드시 값이 있어야 하고 상속을 강제할 수 있는 키워드와 초기화할 수 있는 키워드가 있다. text와 관련된 속성들은 상속된다 padding과 관련된 속성들은 (당연히) 상속되지 않는다

* padding의 em 값은 해당 요소의 font-size를 기준으로 적용된다 * 왜 이렇게 폰트 사이즈에 적용하는 거지??? 라고 생각했는데 실제로 프로젝트를 만들어 보면 더 이해가 가겠지만, 합리적이고 디자인에 맞게 설계된 것 같다.

재미있는 경우는 :hover 수도 클래스 역시 계산에 포함이 되기 때문에 :hover 기능을 활성화하고 싶다면 레벨을 같게 해주어야 한다.

Cascade란? Cascade는 다른 스타일시트를 결합하고 다른 CSS 규칙과 선언 사이의 충돌을 해결하는 프로세스이다 아주 쉬운 예제를 하나 주셨다 하지만 모든 게 똑같다면 그냥 마지막에 작성 css 가 적용된다 정리하자면 inline-style이 중요한 요소이지만 자주 사용하는 것은 좋은 연습이 아니다 제 3 외부 스타일시트를 사용할 때는 순서가 중요하다

CSS가 뒤에서 어떻게 작동하는 지 간단하게 알아봤다 다음 시간에 자세하게 다룰 예정이다.

섹션 3: How CSS Works: A Look Behind the Scenes 이건 정말 중요하다 CSS로 시작하는 건 사실 아주 쉽지만 뒤에서 무슨 일이 벌어지는지 아는 건 완전히 다르다 시작하는 것만큼 쉽지 않다. 이번 섹션에서는 아주 중요하고 고급 개념을 얘기할 것이다. CSS를 진지하게 생각하고 여러분의 기술을 한 단계 발전시키려면 알아야 할 것들이다.

Linear-gradient 그라데이션 효과 background-image: linear-gradient( to right bottom, rgba(126, 213, 111, 0.8), rgba(40, 180, 133, 0.8) ), url("../img/hero.jpg"); Clip-path 이미지 자르기 clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%); letter-spacing 줄간격 letter-spacing: 35px; position absolute를 이용한 중앙 정렬 backface-visibility 뒷 배경이 보이지 않게 하는 속성 .logo-box:hover .logo { animation: moveInLeft 1s ease-out; backfac..