yebeen blog

grid를 사용하다 보면 아래처럼 element를 감싸는 선이나 element 간의 간격을 두고 싶을 때가 있다. 이때 우리는 흔히 아래 코드의 7~8번째 라인처럼 자식 element(main속 div들) 자체에 border를 주면 되지 않을까?라는 생각을 하게 된다. 하지만 위와 같은 코드 결과는 아래의 사진처럼 header와 column, column과 nav 등의 사이에 border가 겹쳐 border의 두께가 달라진다. 물론 각 element의 border 두께를 다르게 주면되겠지만 그러면 설정해야 하는 border 두께 양이 너무 많아진다!!!! ( 이런 귀찮은 상황이 매우 싫은 편... ) 이럴 경우에는 gap과 padding을 사용하면 된다. gap은 행과 열 사이의 간격을 설정하는 속성으로..

css에서 element를 배치시키는 방법에는 grid와 flexbox가 존재한다. flexbox의 경우 element들을 한 번에 특정 위치로 옮기는 것은 쉬우나 그리드모양으로 배치하긴 쉽지 않아 flexbox대신 grid를 사용한다. [ grid 사용하기 위한 설정 1 - display 변경 ] //부모 element가 자식 element를 배치시키기 위해 부모의 display를 grid로 변경 display:grid [ grid 사용하기 위한 설정 2 - 원하는 grid의 칼럼 수와 행 수, 크기 설정 ] grid-template-columns : 만들고 싶은 칼럼 수에 맞게 너비 지정 grid-template-rows : 만들고 싶은 행 수에 맞게 높이를 지정 : 높이 지정을 안 할 경우 안에 들..

css 코드를 작성하면서 selector를 사용하다 보면 분명 맞게 nth-child를 작성한 것 같은데 적용이 안되거나 엉뚱한 곳에 적용되는 현상이 발생했다. 이를 해결해나가며 얻었던 정보와 공부한 내용들을 써볼까 한다. 첫 번째. :nth-child(n)는 괄호안에 접근하고싶은 요소의 번호(순서상의 위치)를 적어 사용한다. 특히 첫번째 요소의 경우 [ nth-child(1)이나 first-child() ]를 사용할 수 있고 마지막 요소의 경우 [ last-child() ]를 사용하면 접근할 수 있다. 끝에서부터 세려면 [ nth-last-child() ] 를 사용하면 된다. 그렇다면 특정 규칙을 가진 번째 수의 요소들에 접근할 때 하나하나 적어야 할까? 답은 아니다. nth-child()의 괄호 안에..

js로 그림판 만들기를 하는데 현재 펜슬의 색상 보여주기와 색상 선택을 위한 input의 디자인이 너무 별로였다. 단순히 색상만 나타났으면 좋겠는데 불필요한 border이며 background color며..border-radius도 변경이 안되던 ㅠㅠ.. 하지만 구글링해서 안나오는 건 없었고 ♪( 'ω' و(و" 자주 쓸 것 같아서 기록해놓기로 했다. webkit-specific selectors를 사용하여 입력의 색상이 아닌 부분을 대부분 숨기는 것이다. ( 물론 이 문법이 mdn에 따르면 firefox밖에 지원을 안한다고 한다. ) 여기서 겉부분은 회색배경+border를 가진 공간의 디자인이고 안쪽부분은 선택한 색상을 보는부분 + border를 가진 부분이라고 생각하면 된다. /* 겉부분의 디자인 ..

이 전 글을 보면 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-block, flex 등 다양한 속성을 갖는다. 그중 오늘은 저 네 가지의 차이점을 정리해두려 한다. [ block vs inline vs inline-block ] block -> 너비와 높이를 가질 수 있다. inline -> 너비와 높이를 가질 수 없다. -> element의 크기에 따라 유동적인 크기를 가짐 inline-block -> 너비와 높이를 가질 수 있으나 요소사이에 알 수 없는 공간이 생김 간단하게 정리하자면 이렇다. 이렇게 말로만 정리하면 이해가 어려워 예시를 가져왔다. 1 2 3 기본 html 코드이고 css의 경우 div의 display값만 바꿔주었다. [ block ] block의 경우 너비와 높이를 가져 각각 10..