회사 신규개발을 진행하면서 HTML, CSS를 더 익숙하게 핸들링 할 수 있어야 된다는 것을 많이 느꼈다. 또한 팀장님과 이야기하면서 자주 나오는게 UI/UX, 사용자가 편해야한다. 개발자의 마인드가 아니라 사용자가 어떤부분을 불편하게느낄지 어떤걸 사용하게될지 모든 경우의 수를 다양하게 예측해서 불편함이 생기는걸 방지해두어야 한다고 했다. 그래서 찾게된 인터랙티브 UI/UX책. 차근 차근 배워나가야지. 그렇다면 UI/UX는 뭐고 인터랙티브 UI/UX는 무엇인가? UI(User Interface) - 사람과 사물 또는 시스템, 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 할 수 있도록 일시 or 영구적인 접근을 위해 만들어진 물리적, 가상적 매개체를 뜻한다. 즉, 사용자가 특정 콘텐츠를 이용할 때 만나는..

font-size - CSS: Cascading Style Sheets | MDN font-size CSS 속성은 폰트의 크기(대문자 "M"의 크기)를 지정합니다. 폰트 크기를 바꾸면 em 과 ex 단위로 계산된 다른 항목들의 크기를 바꿉니다. developer.mozilla.org 상대배치 절대배치 em px rem pt vh cm vw in % mm 그외 등등 px : 가장 흔히 쓰이는 단위, 다른요소나 원래 폰트 크기 영향을 받지않는 이상 항상 일정한 크기 >> px은 디스플레이나 다른요소 크기에 따라 기기별로 차이가 나 보일 수 있다. >> 반응형 웹사이트엔 추천하지 않음 em 부모 폰트사이즈에 맞추어 비율조정 단점이 이렇게됨 부모항목 글꼴크기 기반이라 목록 중첩시 비율이 점점커지거나 줄어들 수 ..

css사용할 일이 많아졌는데, 팀장님께서 css sort를 하면 프로젝트 관리하기에 좋다고 조언하셨다. 그래서 찾아보니 다양한 css 정렬 익스텐션이 있었는데 그중 사람들이 많이사용하고있는 PostCSS Sorting 익스텐션을 사용하기로 했다. 설치 후 왼쪽 설정을 누르고 Extension Settings 를 들어간다 Edit in settings.json을 클릭 후 컨피그 안에 내용을 원하는대로 적어주면 된다. 나는 아래 참조한 블로그가 있어서 링크를 추가해두었다. 설정파일 공유도 해주고 계시니 꼭 들어가보는걸 추천! 설정이 끝나면 컨트롤 + 쉬프트 + p 를 누른후 PostCssSorting 을 입력 후 저기 검색창 설정을 눌러준다 단축키를 등록하러갈거임 + 버튼을 누르고 원하는 단축키를 입력한다 ..

noindex? 프로젝트를 만들 때 타 사이트의 DB를 크롤링 했다면 배포 후 프로젝트가 검색엔진에 노출될 경우 저작권 관련 문제가 발생 할 수 있기 때문에 noindex를 사용하여 검색결과에서 제외시켜야한다 noindex 태그나 헤더로 검색결과에서 제외시킬 수 있다 robot.txt? 웹크롤러같은 로봇들의 접근을 제어하기 위한 규약. 경로의 최상단에 파일을 넣어주어야한다 구글봇, 네이버예티, 다음 같은 로봇들이 있다. robots.txt 작성 전 검색엔진별 크롤러 이름을 확인해보는 것을 권장 서버의 트래픽이 한정되어있거나 검색엔진노출을 원하지 않는경우 robot.txt에 안내문 형식으로 특정 경로에 대한 크롤링을 자제해줄것을 권고한다. User-agent: * Disallow: / 모든 봇에 모든 파일..

터미널에 명령어 입력하여 CSS로 컴파일 sass --watch input.scss output.css 변수(Variable) 할당 /* CSS */ body { font: 100% Helvetica, sans-serif; color: #333; } /* SCSS */ $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } $를 사용하여 재사용 하려는 속성을 변수로 만들 수 있다. 중첩(Nesting) 구문 /* CSS */ nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inlin..