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

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

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

내가 원하는 영역만 캡처하고 클립보드에 담아두기. (파일이 따로 생기진 않음) 윈도우키 + 쉬프트 + S 화면 전체 캡처하고 파일로 저장하기 윈도우키 + Print Screen키 내 pc > 사진 > 스크린샷 폴더에 저장됨 나머지는 아래 링크 참고 https://hse30.tistory.com/63

보통 자주 쓰는 툴들은 새로 전원을 켜도 또 키기 마련이다. 부팅하고 일일이 키기 귀찮을 땐 아주 쉬운 방법으로 이걸 해결할 수 있다. "클릭 한 번으로 쓰던 프로그램 그대로 써보세요~!" 광고 문구가 아니다. 정말 클릭 한 번만 하면 된다 ㅋ 그건 바로 맥을 끄기 전에 나오는 알림창에서 여기서 Reopen windows when logging back in 이라고 써있는 체크 박스에 체크만 해주면 된다!! 한국말로 돼있든 위에 캡쳐처럼 영어든 똑같다. 저기에 체크해주면 두고두고 편하게 쓸 수 있음!

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

https://www.invisionapp.com/inside-design/sketch-tutorial-radial-progress-bars/ 이 블로그가 제일 적당한 듯. 1. 원을 그리고2. 라인 보더를 두껍게 주고3. 보더 속성에서 갭을 9999로 입력4. dash 부분을 원 그리는 공식대로. 지름 * 원하는 비율 * 3.14 예를 들어 원 지름이 400 이고 65%만큼 호가 그려지길 원하면 400 * 0.65 * 3.14 를 데쉬 부분에 입력하면 됨5. 원을 원하는 모양으로 회전시킨다. 6. 만약 원을 키우고 싶다면, 마우스로 늘리지 말고 scale 메뉴로 150%, 200% 이런 식으로 조절하면 딱 맞춰서 바뀐다. 마우스 드레그로 늘리면 내가 설정한 비율이 깨져버림.