[ CSS ] nth-child, nth-of-type 가상선택자 정리 css 코드를 작성하면서 selector를 사용하다 보면 분명 맞게 nth-child를 작성한 것 같은데 적용이 안되거나 엉뚱한 곳에 적용되는 현상이 발생했다. 이를 해결해나가며 얻었던 정보와 공부한 내용들을 써볼까 한다. 첫 번째. :nth-child(n)는 괄호안에 접근하고싶은 요소의 번호(순서상의 위치)를 적어 사용한다. 특히 첫번째 요소의 경우 [ nth-child(1)이나 first-child() ]를 사용할 수 있고 마지막 요소의 경우 [ last-child() ]를 사용하면 접근할 수 있다. 끝에서부터 세려면 [ nth-last-child() ] 를 사용하면 된다. 그렇다면 특정 규칙을 가진 번째 수의 요소들에 접근할 때 하나하나 적어야 할까? 답은 아니다. nth-child()의 괄호 안에.. [ CSS ] input type="color" 디자인 변경하기 js로 그림판 만들기를 하는데 현재 펜슬의 색상 보여주기와 색상 선택을 위한 input의 디자인이 너무 별로였다. 단순히 색상만 나타났으면 좋겠는데 불필요한 border이며 background color며..border-radius도 변경이 안되던 ㅠㅠ.. 하지만 구글링해서 안나오는 건 없었고 ♪( 'ω' و(و" 자주 쓸 것 같아서 기록해놓기로 했다. webkit-specific selectors를 사용하여 입력의 색상이 아닌 부분을 대부분 숨기는 것이다. ( 물론 이 문법이 mdn에 따르면 firefox밖에 지원을 안한다고 한다. ) 여기서 겉부분은 회색배경+border를 가진 공간의 디자인이고 안쪽부분은 선택한 색상을 보는부분 + border를 가진 부분이라고 생각하면 된다. /* 겉부분의 디자인 .. [ CSS ] flex 정리 (위치 조절, 요소간의 순서 변경 및 flex-grow, flex-shrink, flex-basis) 이 전 글을 보면 flex는 위치를 조정하고 싶은 element의 직속 부모로부터 컨트롤하여 위치를 조정한다고 소개했었다. 이번엔 어떠한 방식으로 위치를 다양하게 옮기는지에 대해 정리해보려고 한다. flex는 main axis와 cross axis를 기준으로 위치를 변경한다. main axis는 flex-direction으로 변경이 가능한데 defalut값은 row로 왼쪽 그림에 해당한다. 만약 main-axis를 오른쪽 그림과 같이 가지고 싶다면 [ flex-direction:cloumn; ] 을 해주면 된다. 이제 위치를 변경시켜볼텐데 main axis을 기준으로 값을 변경하고 싶을 때는 justify-content cross axis을 기준으로 값을 변경하고싶을 때는 align-items를 사용하여.. [CSS] display - block, inline, inline-box, flex 차이점 css의 display는 block, inline, inline-block, flex 등 다양한 속성을 갖는다. 그중 오늘은 저 네 가지의 차이점을 정리해두려 한다. [ block vs inline vs inline-block ] block -> 너비와 높이를 가질 수 있다. inline -> 너비와 높이를 가질 수 없다. -> element의 크기에 따라 유동적인 크기를 가짐 inline-block -> 너비와 높이를 가질 수 있으나 요소사이에 알 수 없는 공간이 생김 간단하게 정리하자면 이렇다. 이렇게 말로만 정리하면 이해가 어려워 예시를 가져왔다. 1 2 3 기본 html 코드이고 css의 경우 div의 display값만 바꿔주었다. [ block ] block의 경우 너비와 높이를 가져 각각 10.. 이전 1 2 다음
