차근차근 배움터

em과 rem 차이 em과 rem은 CSS에서 길이를 나타내는 단위입니다. 하지만 둘은 서로 다른 방식으로 동작합니다. em은 부모 요소의 폰트 크기를 기준으로 크기가 결정됩니다. 따라서 부모 요소의 폰트 크기가 변경되면 해당 요소의 크기도 변경됩니다. 이는 상속 관계에서 유용하게 사용될 수 있지만, 복잡한 구조에서는 예상치 못한 크기 변화를 초래할 수 있습니다. 반면, rem은 루트 요소의 폰트 크기를 기준으로 크기가 결정됩니다. 루트 요소는 보통 HTML 문서의 'html' 요소를 의미합니다. 이는 페이지 전체에서 일관된 크기를 유지할 수 있도록 도와줍니다. 따라서 em은 부모 요소의 폰트 크기에, rem은 루트 요소의 폰트 크기에 영향을 받는다는 것이 가장 큰 차이점입니다. 예를 들어, 다음과 같은..

자식 특정 요소 제외하고 CSS not 선택자를 사용하여 특정 자식 요소를 제외하고 선택할 수 있습니다. 예를 들어, .inner:not(:first-child)를 사용하면 .inner 클래스를 가진 요소 중 첫 번째 자식 요소를 제외한 모든 요소를 선택할 수 있습니다. 이 경우 display: none 속성을 사용하여 선택된 요소를 숨길 수 있습니다. .inner:not(:first-child) { display: none; }

MBTI 를 간단하게 재미 삼아 만들어보는 중인데 무슨 글을 작성해야 하는지가 제일 어렵다.... 재미삼아 만드는 거니 나는 다른 것들을 참고해보려고 한다 그리고 상태바를 어떻게 만드는가 했더니 박스의 width %를 이용하더라 아래와 같이 간단하게 구현 완료! 나중에 다 적용해보려고 한다

Hello World! 해당 부분을 en에서 ko으로 바꾸어 주면 웹 페이지를 실행했을 때 언어 번역 부분이 나오지 않는다.

버튼을 꾸미기 위해서 boarder: none; 과 같은 코드를 작성해본적이 있지 않은가? 하지만 위의 코드와 다르게 all: unset 코드로 간단하게 정리할 수 있다. 버튼의 기본 속성을 없애기 위해서 사용하는 코드로 아주 간단하게 사용 가능하며, 주의해야할 점으로는 css 코드는 위에서 아래로 순차적으로 읽기 때문에 만약 unset 보다 먼저 오는 속성이 있을 경우 해당 속성은 unset에 의해 초기화 된다는 점만 유의하면 된다

늘 헷갈리는 부분이다........ css란....... 아주 간단하게 다시 테스트 한 부분 기본 틀을 저렇게 잡으면 될 듯 와중에 margin 같은 부분으로 뜨지 않게 해야 한다. Hello, I am CSS helfhlkehfd

position: absolute; bottom: 0px; left: 50%; transform: translate(-50%, 0); position: absolute 후에 left 50%을 주면 당연히 중앙정렬이 안됀다 왜냐면 50% 즉 화면 너비의 50% 만큼 이동했기 때문이다. 그래서 중앙정렬을 주려면 다시 -50%만큼 x축으로 이동하면 중앙정렬 완성 수평정렬 역시 마찬가지다

텍스트를 마우스로 드래그하는 것을 방지하는 CSS. 마우스로 드래그 안 될 겁니다. div.stop-dragging { -ms-user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; } 간단하게 복붙 고~

웹사이트 따라만들기, 반응형 헤더편 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript 기존에 아는 지식들을 점검하고자 따라했으나, 생각보다 모르는 새로운 것들이 많더라 완성 코드 HTML YU WORLD Home Gallery Wedding FAQ Bookings CSS :root { --text-color: #f0f4f5; --background-color: #263343; --accent-color: rgb(87, 170, 166) } body { margin : 0; font-family: 'Source Sans Pro'; } a { text-decoration: none; color: var(--text-color); } .navbar { display: flex; justif..

transition으로 시간 설정 가능 #idname:hover { transition: 1s ease-out; opacity : 0.3; } css로 마우스를 올릴 때 효과를 천천히 주는 건 알겠는데, 마우스 빠질때도 띡 빠지는 게 아니라 천천히 빠지게 하고 싶다면 #idname:not(:hover) { transition: 1s ease-out; } 이렇게 해제하거나 opacity : 1; 과 같은 반대 속성을 주면 적용이 가능하다.