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에서 엘리멘트를 숨길 때 display: none 과 visibility : hidden를 사용할 수가 있습니다. 그런데 이 둘의 차이점이 뭔지 궁금해서 알아보았습니다. 일단 이런 상자가 있다고 칩시다. 주황, 파랑, 청록색 블럭이 있네요! (결과값쪽을 봐주세요) See the Pen study by Hebom (@hebom2022) on CodePen. 먼저 display : none에 대해 알아봅시다! display속성은 어떻게 엘리먼트가 표시되는지 결정합니다. (inline or block 중) 그리고 flex, grid등과 같은 엘리먼트의 자식들의 레이아웃도 설정합니다. 이때, display를 none와 함께 쓰면 엘리먼트를 보여주지 않습니다. (게다가 그 자식들까지 포함해서) 마치 원래 없..

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: ..

오늘도 클론코딩을 연습합니다. .clearfix::after { content: ""; clear: both; display: table; } 엇? CSS코드에서 가끔 보긴했는데 이 ::after는 뭘까요? 오늘은 가상요소(::)에 대해 알아봅시다! 가상요소(Pseudo-Element)란? 선택자에 추가하는 키워드로 선택한 요소의 지정된 부분에 스타일을 입힐 수 있습니다. 예를 들어, 요소의 내용 앞이나 뒤에 내용을 추가하거나, 요소의 첫글자 혹은 줄 스타일을 지정할 수 있습니다. 가상 요소의 종류 선택자(selector) 예시 설명 ::before p::before 선택한 요소의 바로 앞에 다른 요소를 삽입합니다. ::after p::after 선택한 요소의 바로 뒤에 다른 요소를 삽입합니다. ::fi..

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

코린이는 오늘도 도전한다!! 홈페이지를 만들다가 스크롤을 하니 네비게이션바 위에 텍스트들이 올라와서 흉한 것을 고치고 싶어서 찾아보게 되었다. z-index란 ? 대상과 그 자손이나 하위 아이템들의 z축 순서를 지정한다. z-index 속성 * z-index : auto * z-index : 숫자 - 숫자가 높을수록 상위에 쌓인다 - 음수값도 사용이 가능한데 부모요소 뒤로 사라지게 된다. * 가장 중요한 특징 중 하나는 아무 요소다 다 z-index를 넣는다고 적용되는 것은 아니다. 무슨 얘기인가하면 position : static값에서는 적용되지 않는다. 예시 나는 배우는 입장이기 때문에 모질라 페이지에서 https://developer.mozilla.org/ko/docs..

내가 해결하고 싶은 문제는 이미지 위에 텍스트를 띄우고 싶어서 찾았던 속성이다. Position이란? html문서에서 대상이 배치되는 위치를 지정할 수 있다. 이렇게 사용해요! 대상의 position이 어떤 녀석(속성)인지 정해준다. 그다음에 어디에 배치할지 top, left, bottom, right로 위치를 정해줘야 한다. 속성은 다음과 같아요! position: relative 위에서 얘기한 것처럼 top, left, bottom, right를 같이 값을 입력해주면 얼마나 떨어뜨릴지 정할 수 있게 된다. 대상을 그 자리에서 벗어나게 배치할 수 있게 해준다. 즉, 대상을 원래 위치를 기준으로 상대적(relative)으로 배치해준다고 생각하면 된다. position : absolute 마치 relati..