You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🌟 first-child / first-of-type 속성 차이점
first-child 와 first-of-type 차이점 first-child 와 first-of-type은 똑같이 자식 형제 요소 고르는것같은데 무엇이 다를까? 한방에 이해하기 쉽게 간단명료하게 설명하면 이렇다. div > p:first-child 'div 하위의 p 요소 중 첫번째 요소' 로 읽는 게 아니라 'div 하위의 첫번째 자식인 요소가 p 요소' 이면이다. 즉, div의 자손 요소중에 first-child를 고르는데 그게 p이면 스타일을 적용한다. 만일 p가 없다면 스타일을 적용하지 않는다. 'div first-child is p' 라고 영어 문장으로 이해하면 된다. .parent > span:first-child { background: lightgreen; } .parent2 > p:fi..
🌟 @media는 이제 그만 ! 최신 @container 사용법
컨테이너 쿼리 vs 미디어 쿼리 컨테이너 쿼리는 미디어 쿼리와 같이 문서의 스타일을 반응형으로 지정할 수 있다. 이 둘의 작동 방식은 유사하지만, 차이점은 어느 것을 기반으로 동작되냐는 점이다. 예를들어 미디어 쿼리는 디바이스 또는 미디어 유형을 기반으로 뷰포트에 의해 반응하지만, 컨테이너 쿼리는 페이지내의 특정 컴포넌트 요소 기반으로 반응한다. 아래 그림을 보면 이해가 될텐데, 미디어 쿼리는 브라우저 너비를 기준으로 반응하지만, 컨테이너 쿼리는 문서 내 각 요소 의 크기나 모양에 따라 반응형 쿼리를 지정할 수 있다는 점에서 상위 호환이라고 할 수 있다. 컨테이너 쿼리가 없었을 시절에는 자바스크립트의 Resize Observer 기술을 통해 특정 요소의 크기 변화를 관찰하여 스크립트로 스타일링을 해주어야..
🌟 CSS 선택자를 모던하게 :where() / :is() / :has() / :not()
:where() 가상 선택자 :where 의사 클래스 선택자는 css 코딩할때 선택자의 중복을 줄이는 데 도움이 되는 녀석이다. 예를들어 다음과 같이 여러 엘리먼트 안에 있는 anchor 태그에 hover 효과를 주기위해선 각 선택자들을 콤마를 이어 나열하여 표현하여야 했었다. element 1 element 2 element 3 nav > ul a:hover, footer > ol a:hover, aside > p a:hover { color: purple; text-decoration: underline wavy deeppink; } 그런데 코드를 보면 a:hover 부분이 각 선택자마다 중복되는 것을 확인 할 수 있을 것이다. 거기다 적용해야할 요소가 많으면 많을 수록 선택자의 양도 늘어나 나중에 ..
🌟 스크롤 바(Scrollbar) 스타일링 💯 총정리
Custom Scrollbar 스타일링 유튜브 홈페이지를 보면 스크롤바가 일반 브라우저 스크롤바와는 달리 동그랗게 스타일링 되어 있음을 볼 수 있다. 이처럼 스크롤바 역시 다른 요소처럼 CSS 스타일링이 가능하여, 보다 자신의 웹사이트 돋보일 수 있게 하여 방문자에게 조금 더 기억에 남게 만들 수 있다. 다만 스크롤바 요소는 웹 콘텐츠가 아닌 브라우저 내부 인터페이스로 취급되기 때문에 일반적인 css 사용에 있어 기능이 제한적인 것이 많다. 우리가 브라우저의 alert 창을 스타일링 할수 없듯이 말이다. 즉, css를 사용하여 브라우저 스크롤바 색깔이나 두께를 바꿀 수는 있으나 이외의 복잡한 스타일링에는 제한적이라고 보면 된다. 특히 유의해야 할 점은 CSS scrollbar 관련 선택자들은 표준이 아니..
🕹️ CSS 요소 수평/수직 정렬 기법 모음
수평 중앙 정렬 📢 inline / inline-block 요소 정렬 대상 요소(inline)의 부모 요소(block)에 text-align: center;를 지정한다. inline, inline-block, inline-table, inline-flex, 기타 등등에 적용된다. One Two Three Four 자식요소가 block요소이면, 강제로 자식요소를 inline-block요소로 만들어주는 방법도 있다. I'm an element that is block-like with my siblings and we're centered in a row. I'm an element that is block-like with my siblings and we're centered in a row. I h..
🌟 미디어 쿼리 범위 지정 최신 문법 (간편해짐 ❗)
CSS media query 범위 최신 문법 CSS에서 반응형 쿼리를 작성할때 가장 이해가 안되었던 접이 바로 미디어 쿼리의 width, height 범위 지정 문법이다. 왠만한 프로그래밍 언어에선 범위 지정을 기호를 통해 범위지정을 하지만 CSS에서는 미디어 쿼리 범위 지정은 다음과 같이 하였다. 정확히 max-width 가 의미하는 것이 '이상' 인지 '이하' 이었는지 잠깐 문법이 햇깔릴 때도 있었으며, 기본적으로 '같거나 작다' 로 통용되기 때문에 만일 '무조건 작다' 로 설정하려면, 아래와 같이 319.99px 로 지정해야는 우회하는 방법을 써야 했다. /* viewports
🌟 이미지 사이즈 비율 맞추는 3가지 방법 (object-fit / background-size / position)
프론트를 작업할때, 컨테이너의 크기는 고정되어 있는데, 해당 컨테이너 안에 들어갈 이미지의 크기는 다양한 경우가 있다. 예를들어 이미지를 확대/축소 하거나 특정 비율로 나타나게 하기위해, CSS를 이용하여 나 요소같은 오브젝트들을 조정해야 되는데 방법이 결코 녹록치 않다. 이번 시간에는 background-img 혹은 태그로 이미지를 가져와, 내가 원하는 사이즈의 박스 안에 이미지 컨텐츠를 배치하고 비율을 조정해 꾸밀때, 어떤 css 속성을 사용하여 다루는지 3가지 방법에 대해 한방 정리하는 시간을 가져보자. background 속성을 이용해 조절 background-size 속성 먼저 css의 background-img : url() 속성을 통해 이미지를 불러와 사용할때, 사이즈를 조절하는 방법을 알아..
🎨 SVG 다루기 정리 (크기 / 색상 변경)
SVG (Scalabe Vector Graphic) SVG는 확장 가능한 벡터 그래픽(Scalable Vector Graphics)의 줄임말이다. SVG 이미지 파일은 XML 문법을 기본으로 하는 문서이며 로고나 아이콘, 그래프 등 널리 사용된다. 즉, 2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어이라고 봐도 된다. 다른 png과 jpg 이미지 파일에 비해 텍스트 편집기에서 CSS나 JS로 수정이 가능하다는 점이 가장 큰 장점이라 할 수 있다. 가장 큰 특징으로는 확장이 가능하다는 점에서 확대해도 품질이 떨어지지 않는다는 특징이 있다. 예를 들어 파워포인트에서 이미지를 늘리거나 줄일때 화질이 깨지지 않는 것도 바로 이 원리를 이용한 것이다. SVG 이미지는 크기를 줄이거나 늘리더라..
🎨 요소의 기본 디자인 리셋 - all 속성
CSS - all 속성 all 단축 속성은 요소의 unicode-bidi (en-US), direction (en-US), CSS 사용자 지정 속성을 제외한 모든 속성을 초기화 한다. 예를들어 버튼을 생성하면 브라우저마다 기본적으로 적용되어있는 버튼의 기본 스타일 값을 초기화 시켜줄 수 있다. Click Me ! all: unset; 을 해주면 기본 버튼 모양이 초기화되어, 텍스트만 남게된다. button{ all: unset; } 과 의 디자인을 통일하기 위해서 등, 태그의 디폴트 디자인을 없애거나 통일할 경우에 같이 편리하게 쓸 수 있다. button{ all: unset; /* 유의할점은 정의할때 가장 처음에 써줘야 된다. 뒤에다 써주면 그 위의 스타일들도 초기화되게 된다. */ background..
🎨 :before :after 와 ::before ::after 차이점
가상 선택자 (pseudo selector) 가상 선택자(pseudo selector)에는 가상 클래스(pseudo class)와 가상 엘리먼트(pseudo element)가 존재한다. 둘이 비교하자면, 가상 클래스는 엘리먼트 전체나 엘리먼트 상태를 선택하고, 가상 엘리먼트는 엘리먼트의 하위 요소도 더 세분화하여 선택가능하다. 가상 엘리먼트 (Pseudo Elements) ::before , ::after , ::first-letter , ::first-line , ::selection 가상 클래스 (Pseudo Classes) :active , :checked , :disabled , :focus , :hover 등 CSS 2.1에서는 가상클래스, 가상엘리먼트 모두 싱글 콜론을 사용했었다. 하지만 CS..
🎨 position sticky - 위에 헤더를 고정하자
네비게이션 헤더 고정하기 대다수의 사이트가 상단 네비게이션 영역 부분이 스크롤을 내리면 같이 따라 내려오는 페이지 요소를 한번 쯤은 봐왔을 것이다. 이전에는 이러한 기능을 만들려면 자바스크립트로 복잡한 구성을 하여야 했지만 이제는 간단하게 css의 position: sticky 속성으로 구현이 가능하다. 예를들어 아래와 같이 요소 영역 부분을 스크롤을 내려도 상단에 고정시키고 싶다면, Logo Menu1 Menu2 Menu3 내용 ... See the Pen position-sticky-0 by barzz12 (@inpaSkyrim) on CodePen. 아래와 같이 속성을 설정해주면 상단 헤더 고정이 되게 된다. header { ... position: sticky; top: 0; } See the P..
🎨 CSS 변수(--variable) 사용법 & 응용 정리
CSS 변수 기능 복잡한 웹사이트 같은 경우 엄청난 양의 CSS를 가지고 있는데, 유지보수를 하다 보면 여러 곳에서 사용한 임의의 값을 한꺼번에 바꿔야 할 때가 있다. 그 값들을 하나씩 찾아서 일일이 바꾸려면 상당히 피곤할 것이고, 때에 따라 실수도 많을 것이다. 그래서 여타 프로그래밍 언어처럼 변수를 이용하면, 요소 전반에 걸쳐 사용되는 임의의 값을 변수에 저장하고 호출하면 보다 효율적인 프로그래밍이 가능해진다. CSS 변수 선언 및 호출 CSS에서 변수의 이름을 지정할 때는 변수 맨 앞에 -- 를 붙여주어야 한다. 그리고 변수를 호출해 사용할 때는 var(변수명)형식을 사용한다. :root { --main-font-color: #000f22; /* CSS 전역 변수 선언 */ } div { color..
