Hebom's Dev

가끔 CSS코드를 보다보면 선택자들을 공백없이 붙여서 사용하는 것도 있고 공백을 넣어서 사용할때도 있고 쉼표로 구분하는것도 있어서 무엇인지 헷갈렸던 부분이 있습니다. 마침 칸아카데미에 관련설명이 있어서 강의를 들으면서 정리를 해봤습니다. 여러개 선택자를 한꺼번에 스타일을 적용하고 싶은 경우 이건 쉽습니다, 그냥 쉼표(,)로 구분합니다. h1, h2 { font-family: cursive; } 그런데, 아래의 경우들이 다소 헷갈릴때가 있습니다. 태그선택자와 클래스 선택자를 결합해서 쓰는 경우 p.warning{ border: 5px solid orange; } 위의 예시는 태그(p)와 클래스(.warning) 사이에 공백이 없습니다. 이런 케이스는 클래스 선택자들 중에 태그 안에 들어간 클래스 선택자만 ..

CSS에서 한 요소를 width나 height의 나머지 공간을 채우려면 어떻게 할지 찾아봤습니다. flex-grow라는 녀석이 있더군요. 예를 들어, 주로 홈페이지를 만들때 상단에 navigation bar가 있고 중앙에 main 컨텐츠가 들어가고 하단에 footer로 꾸미고싶다고 가정합시다. 아래와 같이 세 요소의 비중이 동일할때 main으로 나머지(검은부분)을 꽉 채우고 싶어요! 이럴때는 채우고 싶은 요소 즉, 아래에서는 main선택자에 'flex-grow:1'이라는 값을 줘서 나머지를 꽉! 채울 수 있습니다! See the Pen Untitled by Hebom (@hebom2022) on CodePen.

CSS에서 input 태그안의 타입을 선택하려면 어떻게 해야 하나요? 대괄호를 ( [ ] ) 쓰고 이 안에 타입명을 쓰면 됩니다. 구문 input[type=타입명] { /* 스타일 내용 */ } * input에 정의할 수 있는 타입명 : button, password, text등 많습니다. 자세한 input type에 대해 알고 싶으시면 아래를 참고하셔요! https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input 예시 input[type=text] { font-family: Arial, sans-serif; } input[type=text], input[type=password] { width: 100%; padding: 15px; margin: ..

오늘도 클론코딩을 하다가 모르는 명령어가 나와서 부랴부랴 찾아봅니다. :root에 대해서 mdn 사이트를 찾으면 다음과 같이 설명되어 있습니다. CSS :root 의사 클래스는 문서 트리의 루트 요소를 선택합니다. HTML의 루트 요소는 요소이므로, :root의 명시도가 더 높다는 점을 제외하면 html 선택자와 똑같습니다. 번역이 이상한건지 저같은 초보자는 무슨 말인지 잘 이해가 안갑니다. 인터넷에 뒤적거리다보니(디자이너의 기록(https://designer-ej.tistory.com/)발췌) 다음과 같이 설명이 되어 있습니다. :root 는 웹문서 구조에서 가장 상위 요소를 선택할때 사용한다. html에서는 root는 항상 html을 가르킨다. 그러나 html보다 :root 가상클래스의 스타일 적용 ..