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

디자인은 이쁘게 잘 해놨는데 코딩해서 브라우저로 확인한 디자인은 몬가 살짝 안맞고 아쉽다면, 특히나 텍스트 수직 위치가 좀 몬가 위가 더 여백이 많고 아래가 좁다면! 그럴땐 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 로 맞추..

우선 캐러셀이란 뭐냐하면 회전목마. 즉 돌고 도는 거다. 우리가 인터넷 쇼핑몰 홈페이지에 가면 상품 배너들이 오른쪽에서 왼쪽으로 움직이면서 돌아가는 걸 본 적이 있을 거다. 우리는 보통 이미지 슬라이드, 롤링 배너 이런 식으로 부르는데 외국에선 캐러셀이라는 이름으로 많이 쓰더라. (슬라이드라고 부르기엔 좀 슬라이드란 표현이 너무 다양한 곳에 쓰여서 그런 걸수도) 아무튼 부트스트랩 캐러셀을 보면 기본 구조인 슬라이드 영역 class="carousel-inner" 과 옵션으로 달 수 있는 인디케이터 (몇 개의 슬라이더가 있고 현재 몇 번째다 를 보여주는거) 컨트롤 .item > img { display: block; max-width: 100%; height: auto; } 그런데 우리는 마치 이미지와 텍스..

어제의 실패는 뒤로 하고 출근 후에 다시 페이지를 열어보았다. 그리고 슬라이더가 왜 안될까... 하면서 움직였더니 뭐야!! 움직이잖아!!! 짜증과 분노가 밀어닥친다.... 어젠 왜 안된거지?? 화면을 모바일 사이즈로 바꿔 보았다. 그랬더니 다시 안돼.......... 뭐 이래 썅... 암튼, 아예 안되는게 아니라는 것은 밝혀졌다!!! 속이 시원해진 느낌!! 화면 스크린에 따라 되던게 안된다는 거는 css 에서 화면 사이즈로 다른 처리가 됐다는거 같아서 뭐가 바뀐지 한번 살펴 보았으나 모르겠다... input 태그에 클래스를 그냥 slider 라고만 해서 어디 다른데 있던거랑 겹친게 있나.. 움직여달라는 마음을 담아.. 클래스 이름을 slider_move 로 바꿔서 다시 업로드! 후후. 이렇게 쉽게 될거란..