천진난만 코딩 스토리

active: 마우스로 버튼을 클릭했을 때 스타일이 변경됨. hover: 마우스 커서가 대상 위에 있을 때 (클릭X) 스타일이 변경됨. focus: 마우스 클릭, 키보드로 선택 등 대상을 선택하였을 때 스타일이 변경됨. visited: 링크에 방문했을 때 스타일이 변경됨. (링크에만 적용가능) focus-within: focused된 자식을 가진 부모 element에 적용됨. 1) active 노란색의 Hello 버튼을 만듬. 클릭하면 색이 변하게 하려면? button:active를 하여 버튼이 클릭되었을 때를 선택하여 스타일을 변경함. 마우스로 버튼을 클릭을 하고 손을 뗄 때까지 변경된 스타일을 유지함. 2) hover button:hover를 하여 마우스 커서가 버튼에 올라가면 스타일이 변경되게 함...

특정 속성의 존재여부 및 값 일치 여부에 따라 선택하는 선택자. 1) form 만들기 tape이 다른 박스를 두 개 만듬. 하나는 password를 입력하기에 required를 해줌. 2) 특정 박스 하나만 선택하여 스타일 변경하기 input: required를 하여서 required태그가 들어간 박스만 선택하여 스타일을 변경함. name 박스에는 required가 없어서 스타일이 변하지 않았고, password 박스에는 required가 있어서 스타일이 변함. input[type="password"]를 하여서 type이 password인 박스만 선택하여 스타일을 변경함. name 박스는 type이 text라서 스타일이 변하지 않음. 3) 특정 여러 가지 박스 선택하기 input[placeholder~=..

4) adjacent sibling selector (인접 형제 선택자) (+) p태그 위아래로 span 태그가 있음. 이 두 개의 span 모두 div 바로 밑에 있는 태그기 때문에 스타일이 적용됨. p태그 밑에 있는 span만을 선택하려면? p+span을 해주어 p 다음에 오는 span만을 선택함. 그렇지만 p태그와 span 태그 사이에 무언가가 생기게 되면 적용이 되지 않음. 즉, 인접되어있는 형제 태그여야지 적용이 됨. 5)general sibling elector (일반 형제 선택자) (~) p와 span 사이에 address가 있어서 p와 span이 서로 인접하지 않음. 인접하지 않아도 선택하려면? p~span을 해주어 p 이후에 오는 모든 span 태그를 선택함. 만약 address 밑에 s..

selectors 사이의 관계를 설명하는 문자 1) 중복되는 태그 div박스 안에 span, p가 있고, p안에 또 다른 span이 있음. 단순히 span의 색을 변경하면 모든 span의 색이 변함. 만약 p태그 안의 span태그만 변경하고 싶을 땐 어떻게 해야 할까? id 혹은 class를 사용하여 변경할 수도 있지만, combinators를 사용하여 변경할 수도 있음. 2) descendant selector (자손 선택자) (space) p와 span 사이를 스페이스로 한 칸 띄워주어 p 안에 있는 span 태그를 불러옴. div p span{ 혹은 body p span{ 으로 적어도 됨. 존재하지 않는 부모를 적거나 잘못 적는다면 작동되지 않음. 3) child selector (자식 선택자) (..

좀 더 세부적으로 element를 선택하게 해주는 것 (가상 선택자) 어떤 box나 콘텐츠의 스타일을 변경하고 싶으면 보통은 div, span 등 태그의 이름을 적거나 #으로 아이디를 적거나 .(온점)으로 class를 적어서 원하는 element를 불러와서 사용. 다른 방식으로 해당 elementfmf 선택 시에는? 예를 들어 많은 div 중에 제일 마지막 div를 선택한다거나 제일 처음의 class를 선택할 시에는? pseudo selector를 사용하여 선택할 수 있음. 1) last-child div:last-child를 해주어 마지막 div를 선택하여 변경함. 그럼 처음 상자를 선택하려면? 2) first-child div:first-child를 해주어 처음 div를 선택하여 변경함. 그렇다면 내..

레이아웃이 박스를 처음 위치하는 곳에 두는 것. element가 처음 위치한 곳을 기준으로 수정되는 것. 요소가 처음 놓인 자리에서 상하좌우로 움직임. 원하는 좌표로 옮김. 가장 가까운 relative 부모를 기준으로 이동시킴. relative한 부모를 못 찾으면 body를 기준으로 옮김. *static: 고정적인, relative: 상대적인, absolute: 절대적인 1) position: static; 모든 태그들은 처음에 position: static; 상태임. 그렇기에 굳이 작성하지 않아도 됨. (작성하여도 변하는 것은 없음.) 2) position: relative; 노란색 박스 안에 하늘색의 박스가 들어가도록 함. 하늘색 박스를 노란색 박스에서 조금 벗어나게 하려면? psition: rela..

레이아웃 보다 위치를 아주 조금 위로 혹은 아주 조금 오른쪽으로 옮기고 싶을 때 사용. 스크롤이 내려가거나 올라가도 박스가 레이아웃 상에서 그 자리에 고정됨. 1) 박스 하나 레이아웃에 고정하기 원하는 요소에 position: fixed;를 하게 되면 페이지의 길이가 아무리 길어도, 스크롤을 아무리 밑으로 내려도 박스의 위치는 변하지 않고 고정됨. 즉, 원하는 콘텐츠를 계속해서 같은 자리에 있게 함. 예를 들어서 스크롤을 내려도 그 자리에 있는 광고가 있음. 2) 여러 개의 박스 중 하나만 고정하기 div 박스를 하나 더 만들고 색상과 크기를 다르게 한 뒤, 두 번째 박스만 fixed하여 스크롤을 내려보면 어떻게 될까? 스크롤을 내릴 때마다 둘의 사이가 벌어짐. 밑의 박스가 고정되어 있으니 처음 고정된 ..

9) flex-wrap flex-wrap-nowrap;을 하여 한 줄에 모든 박스가 위치 할 수 있도록 함. 창 너비에 비해 박스의 너비가 넓더라도 박스의 너비를 줄여 같은 줄에 있도록 함. flex-wrap-wrap;을 하게 되면 창 너비를 벗어나는 박스는 아래로 밀려나서 위치하게 함. 10) 박스 역순으로 배치하기 역순으로 배치하기 전 숫자의 위치만 변경이 되는지, 박스 전체가 변경되는지 확연하게 보이도록 박스의 색을 다 다르게 해주었음. flex-direction: row-reverse;를 하여 수평으로 박스를 놓고 수평으로 놓여있는 블럭을 역순으로 배치함. flex-direction: column-reverse;를 하여 수직으로 박스를 놓고 수직으로 놓여있는 블럭을 역순으로 배치함.

7) 주축과 교차축 변경하기 기본적으로 설정되어있는 기본값으로는 주축이 수평이고 교차축이 수직으로 되어있음. 이 기본값을 변경해보자. flex-direction: column;을 하여 주축과 교차축을 변경함. column은 주축을 수직으로 하고, row는 주축을 수평으로 함. column을 하게 되면 주축이 세로가 되기 때문에 justify-content는 수직으로 움직이게 되고, align-items는 수평으로 움직이게 됨. 8) div에 flex box를 사용하게 된다면? flex-direction: column;는 주축을 수직으로, flex-direction: row; 혹은 작성하지 않으면 기본값인 주축을 수평으로 둠. flex box는 부모 엘리먼트에 작성해야지 자식 엘리먼트가 변경됨. 만약 여기..

4) flex box의 기본 설정 주축(가로축)인 main axis와 교차축(세로축)인 cross axis가 있는데, 기본적으로 설정되어있는 기본값으로는 주축인 main axis가 justify-content이고, 교차축인 cross axis가 align-items이 됨. 5) justify-content justify-content: center;를 사용하여 박스들을 가운데로 정렬함. 주축에서 움직이기 때문에 가로축에서 가운데로 정려되고, 세로축에서 가운데로 정렬이 되지 않음. 6) align-items align-items: center;를 하였지만 body의 높이가 낮기 때문에 세로축에서 가운데에 있더라도 변화가 없다고 느껴짐. height: 100vh;를 하여 부모 엘리먼트의 크기를 키워서 위치 ..