분류 전체보기28 UI/UX디자이너가 알아야 할 디자인 심리 원칙 안녕하세요. 인지심리에 관한 내용의 글을 올립니다. 디자인을 할 때 디자이너들은 주로 미적 감각에 의지해서 요소를 배치하는 것에 익숙하지만, 여기에 조금의 논리가 있다면 디자인을 좀 더 다른 사람에게 쉽고 세련되게 설득시킬 수 있을 것이라 생각합니다. 여기에 나오는 디자인 원칙들은 우리가 무의식적으로 사용하고 있던 것들일 수도 있지만, 인지심리 원칙들로 그 이유를 명확하게 알 수 있게 되어서 흥미롭네요. 이 글은 Thanasis Rigopoulos가 쓴 글을 전문 번역한 글입니다. 틀린 부분이 있으면 말 해주세요 :) 원문 : https://uxplanet.org/the-psychology-principles-every-ui-ux-designer-needs-to-know-24116fd65778 The P.. 2020. 5. 17. SCSS css를 쓰다보면 scss나 sass를 요구하는 곳이 많다는걸 알게된다. SCSS 가 CSS 를 사용하는 것 보다 코드도 줄일 수 있고 다음 코드를 수정하는 사람이 봤을 때 가독성도 좋다. 웬만하면 사용하는 것을 추천한다고 한다. 유지 보수가 훨씬 쉽다. 그 이유는 밑에와 같은 기능을 사용할 수 있기 때문이다. Variable (변수)Math Operators (수학 연산자)Built-in Functions (내장함수)Nesting (중첩)Import (불러오기)Extend (상속)Mixin (믹스인)Function (함수)본인이 사용하는 개발 환경에서 css파일이 없고 scss파일이 자동으로 생성되고, 무슨 말인지 모르겠으면 그냥 SCSS파일 안에 내가 알던 CSS를 사용한다면 아무런 문제가 없다. C.. 2017. 7. 27. Position Position 이것을 잘 다루는 것이 CSS를 자유자제로 사용하는 것의 관건이다. 엘리먼트의 위치를 지정하는 방법은 4가지가 있다. staticrelativeabsolutefixed static우리가 아무런 position을 지정하지 않았을 경우 디폴드 값으로 static이 들어가 있다.static은 reft,right,top,bottom 즉, offset값을 다 무시하고 원래 있어야 하는 곳, 부모의 안에 위치하게 하는 position속성이다. relative하지만 이런 원래 있어야 하는 곳을 기준으로, 부모를 기준으로 위치를 옮기고 싶다면 position을 relative로 설정해 주면 된다. css는 left값과 right 값이 겹칠 경우 left를 우선시하고 top/bottom은 top을 우선시.. 2017. 7. 26. 크롤링 보호되어 있는 글 입니다. 2017. 7. 26. 마진 겹침 현상 마진 겹침 현상 마진 겹치는 것 때문에 해커톤에서 깊은 빡침을 경험하는 경우가 드물지 않음... 진짜진짜 ( 아니!! 나는 마진을 줬는데에 8ㅅ8 왜 적용이 안되냐고...)진짜 몇번 빡침을 경험하다 보니까 무작정 덤비는 것 보다 좀 알고 이게 왜 내 말을 안듣는건지 먼저 아는게 중요하다는 것을 알게 되었다. 1. 두개의 엘리먼트의 마진이 겹칠 경우 더 큰 값이 적용이 된다. 어떤 경우에 어떤게 도움이 될까? 만약에 리스트라는 것이 있고, 리스트의 스타일에 margin을 50px 적용을 한다면 중간 li밑에 나오는 li의 마진이 100이 되는 경우 때문에 이런 속성을 만들어 놨다고 생각 2. 부모 엘리먼트와 자식 엘리먼트가 있고, 두가지의 엘리먼트가 겹칠 경우 부모 엘리먼트가 시각적으로 보이지 않는 상태가.. 2017. 7. 25. box-sizing box-sizing hi hello .hi { width:150px; border 15px;}.hello{ width:150px; border 1px;} 가로 넓이가 같음에도 불구하고 둘의 크기는 달라 보인다.왜냐하면 처음 CSS을 만들 때 width와 hight는 컨텐츠의 크기, 즉 박스를 의미하는 것으로 지정을 해놨기 때문이다.그래서 border값을 상관하지 않고 박스의 크기를 지정하기 때문에 같은 크기의 상자를 만들고 싶을 때 참 난감한 상황이 벌어진다. 그래서 맨 처음 설정하는 것이 *{ box-sizing: border-box;} 전 영역의 컨텐츠에 (*) 박스 사이즈인 width와 hight의 기준은 border로 한다는 것을 말해주는 것이다. 원래는 컨텐츠 사이즈 이기 때문에 디폴트를 이렇게.. 2017. 7. 25. 이전 1 2 3 4 5 다음
