노마드 코더 강의 개발일지

flex-box란 > flex-box는 box 옆에 어떠한 상자도 못오에하는 성질을 없에는 기능이다 > 아래 사진과 같이 div들이 옆에 올 수 있다. display: flex;를 움직이고 싶은 상자의 부모(코드에서는 body)에 적어야한다. main axis &

flex-direction은 main axis랑 cross axis를 바꿀 때 쓰는 코드다예를 들면 flex-direction: column;이라는 코드 부모(코드에서는 body)코드 안에 작성을 하면 justify-content는 세로축을 통제하게 되고 align-i

position:fixed;는 한국어로 번역한 그대로다. 위치를 고정시키는 코드다. 우리는 이러한 코드를 많든 웹사이트에서 봐왔다. 대표적으로 메뉴바를 생각하면 된다. 위 사진에 표시된 것과 같이 웹사이트의 메뉴바는 position:fixed;가 되어있어서 우리가 밑으

position: relative;는 화면에 있는 콘텐츠를 다른 방향으로 움직이고 싶을 때 쓴다. position: reative;를 선언하면 그 선언한 콘텐츠를 원하는 방향으로 움직일 수 있게 된다.position: absolute은 지정한 콘텐츠의 position을

pseudo selectors는 CSS에서 요소를 가리키는 방법 중 하나이다. 지금까지 CSS에서 요소를 가르키는 방식은1.Tage를 통해2.id를 통해3.class를 통해 요소를 가리켰다. 그러나 상황에 따라서 앞에 말했던 방식들이 비효율적일 때가 있다. 예를들면 s

pseudo selectors 응용 > 이러한 코드가 있을 때 p 태그안에 span의 스타일을 바꾸기 위해 pseudo selectors를 사용해서 어떻게 스타일을 바꿀까? 답은 pseudo selectors의 문법에 있다. style sheet 안에span p를 적

Pseudo Selectors 응용 part 2 > 위와 같은 코드가 있을 때 span 태그를 CSS로 위치를 정의하기 위해서 p + span은 더 이상 작동이 안된다. 왜냐하면 p + span은 p 라는 태그 바로 밑에 있는 span 태그를 정의하는 것이라서 안된다

active 상태는 버튼을 예시로 들자면 버튼을 누른 상태에서 마우스를 때기 전까지의 상태를 active라고 부른다. 이러한 상태를 응용해서 어떤 요소가 active 상태이면 어떻게 하라고 명령을 내릴 수 있다.밑에 코드 같은 경우는 버튼의 상태가 active면 버튼의