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

html을 작성할 때 이런 기호들은 기본 코드 작성에 필요한 문법에 쓰이기 때문에 이런 애들은 컴퓨터에서 이해할 수 있는 다른 코드로 작성을 해줘야 한다. 이거는 > & 이거로 시작하고 ; 로 닫는 형태다. 자주 쓰이는 건 쓰다보면 자연스럽게 외우게 되지만 가끔씩 쓰는건 찾아보면 된다. https://dev.w3.org/html5/html-author/charref 불러오는 중입니다... 그리고 이 사이트가 완전 잘 돼있다. 이렇게 쭈루루루루룩 총 1448개나 있으니까 웬만한 건 다 있나보다. (사실 잘 모름) 겁내 많다. 다른 사이트 찾아볼 필요가 없을 거 같다. 완전 굿굿! 이 내용이 도움이 되었다면 광고를 오지게 클릭 한번 해주세요! 광고 노출 자체로는 수익이 나지 않는 소..

이렇게 생긴 표를 코딩을 해야되는데 사실 테이블로 하면 쉽긴 하다. 근데 2020년에 tr, td 를 여전히 치고 있는 내 모습이 별로라서 div 코딩을 하는데 사실 그마저도 display: inline-block으로 이쁘게 잘 껴 맞추고 있었다. 근데 이 표는 문제가 무엇이냐하면 이 부분이다. 첫번째 셀을 사실 rowspan 을 써버리면 테이블 코딩으로 금방 해결되겠지만.. 난 div 러버이기 때문에 div 로 코딩을 해보기 위해 어쩔 수 없이 flex 를 써보기로.. flex 방식을 처음 써보는건 아니지만 내가 코딩을 자주 하는 사람이 아니니깐 그리고 난 디자인이 주 업무니깐 어쨌든. 저걸 하기 위해 검색을 좀 해봤다. 자, 두괄식으로 정리를 하자면 flex 에 대해 정말 잘 정리해놓은 사이트가 있었..

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

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

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

[디자이너가 알려주는 코딩, 디알코] 슬라이더가 있는 디자인을 했다... 대충 이렇게 생긴... 내가 한거라 욕할 수도 없고... 슬라이더가 필요해서.. 어쩔 수가 없었다.. 우리 회사엔 따로 프론트 개발자가 없다.. 웬만한건 내가 만들어야 된다... 백앤드 개발자분이 계시지만 백단은 할게 많기 때문에 이런 자질구레(?)한건 내가 해야 한다 ㅋㅋㅋ물론 그분이 css를 잘 못 다루시는 것도 있긴 하지만.. 여튼, 쉽게 해결하고 싶어서 부트스트랩에 슬라이더가 있는지 봤더니 없더라. 흠 굳이 부트스트랩으로 안해도 되는 것인가 하여 html slider 라고 검색해보니 이렇게 떡하니 첫 번째에 친절하게 좋아보이는게 있었다. 떠블유쓰리스쿨즈 여긴 html 이랑 css 찾아보려고 자주 들르는 사이트여서 믿음이 갔다..