스이디: 스타트업에서 이거저거 하는 디자이너

디자인은 이쁘게 잘 해놨는데 코딩해서 브라우저로 확인한 디자인은 몬가 살짝 안맞고 아쉽다면, 특히나 텍스트 수직 위치가 좀 몬가 위가 더 여백이 많고 아래가 좁다면! 그럴땐 height 와 line-height 콤보를 쓰는게 좋다. 수직 위치가 살짝살짝 안맞는 경우가 종종 있었는데 예전엔 padding 으로 조절하고 그러고 그랬었다. 근데 패딩은 폰트가 뭐냐에 따라서, 브라우저가 뭐냐에 따라서 쪼꿈씩 달라지는 미세한 그런게 있기 땜시롱 이거저거 해본 결과 추천하는 것은! 하이트, 라인하이트 콤보다. 예를 들어 얘는 검색창인데 height:44px;line-height:44px; 요렇게 잡았다. 저 회색 검색창 div 자체에 라인이랑 라인하이트를 같은 수치로 입력해두면 회색창 높이가 44픽셀, 그 안에 라..

스케치로 요로코롬 작업하고 리스트 앞에 네모난 불릿 포인트를 넣어보려고 li:before {width: 4px;height: 4px;background: #C1C1C1;margin-left: -20px;} 요로코롬 넣었더니 결과는 이랬다. 아예 안나오네. 왜지. 위 코드에 content:""; 도 추가해봤다. 그랬더니 앞으로 조금 이동. content 가 뭔가 하긴 했네 이것도 display 랑 연관이 있는가 해서 display: inline-block; 도 추가 오오오오 나온다!! :before 나 :after 같은 가상 선택자 이런거에는 content 랑 display 가 같이 가줘야 나오는구나. width, height 는 당연한거고. 위치를 맞춰주려고 조절을 해본다.려다가 absolute 로 맞추..

css position fixed 를 하는데부모 요소에 relative를 줬는데도 부모에 걸리지 않고 화면 전체에 기준이 잡힌다... 왜 그럴까... fixed 는 브라우저 창을 기준으로 계산한다고 한다. ㅋㅋㅋㅋ여태 몰랐네 제대로 되는 거였군.

css로 사각형은 따로 생각할 것도 없이 width, height 값만 입력하면 되지만 삼각형은 좀 다르게 해야한다. http://uxuiz.cafe24.com/wp/archives/4619 이 글에 나온게 깔끔하게 잘 나온거 같고 핵심만 정리를 해보자면, border-top, border-bottom, border-left, border-right 중에 삼각형 꼭지점이 될 부분을 none 처리하고 밑변이 될 부분은 온전하게 border-방향 : 두께 solid 색 높이가 될 두 부분은 transparent 처리한다는게 포인트다. 예를 들어서 빨간색 삼각형을 만든다고 하면 width: 0px; height: 0px; border-top: 4px solid none; border-bottom: 4px so..

서브라임 텍스트를 비롯한 에디터들은 다양한 단축키나 기능들이 있는데 그 중에 내가 쓰면서도 이건 참 좋다고 느끼는 것들 중에 하나가 바로 다중 선택이다. 예를 들어 이렇게 div 태그를 입력했다고 하자.그런데 이게 여러 줄 필요하다고 하면저길 드래그해서 커맨드 씨, 커맨드 브이 해도 되겠지만 command + shift + d 를 누르면 d 를 누를 때마다 한 줄씩 추가된다. 요렇게. 그럼 이렇게 만들어진 div 안에 클래스를 입력하려면또 한줄씩 입력을 해야하는 귀찮음이 생긴다. 그럴땐 우선, 첫 번째 div 줄에서 v 와 > 사이에 커서를 위치하고 ( 클래스를 추가하려는 그 위치) control + shift + 아래화살표 를 누르면 화살표를 한번 누를 때마다 밑에 한줄씩 추가된다. 요렇게. 4줄을 선..