에밋(emmet)은 여러개의 코드를 기호로 연결지어 한 줄로 생성하게 해주는 기능을 말한다. 에밋(Emmet) HTML & CSS 코등 입력을 지원하는 에디터용 확장 기능을 뜻한다. 기존 코드가 생략되어 효율적인 코드 작성이 가능하게 됨. 예) margin-bottom:100px; ⇒mb100; 입력 후 [tab] 을 누르면 자동 완성 되는 것을 볼 수있다. 에밋(Emmet)이 탑재된 에디터 VScode (비주얼 스튜디오 코드) Adobe Dreamweaver(어도비 드림위버) 확장기능으로 에밋(emmet) 추가가 가능한 에디터 Atom(아톰) Brackets(브래킷) Sublime Text(서브라임 텍스트) HTML 에밋(emmet) 사용법 기호는 "div ." 또는 "div >" 와 같이 띄어쓰면 안..
반응형 웹 디자인 디바이스 화면 크기에 따라 웹 페이지가 표현되는 방법이 바뀌는 것을 의미한다. 반응형 짜는법 HTML에 을 입력한다. (요즘엔 기본적으로 다 들어가있음.) viewport 는 화면크기만 디바이스에 맞추는 것 뿐 레이아웃은 최적화 되지 않는다. 따라서 레이아웃도 최적화 시키려면 미디어 쿼리를 사용해야한다. 반응형 작성하기 1.CSS 파일에 작성하는 경우 /*MOBILE SIZE ================================================ */ @media (max-width: 700px) { .title { font-size: 4rem; } } 미디어쿼리는 @media (max-width: 크기) { 코드 } 를 말한다. 2.HTML파일에서 link태그로 적용하..
굴림, 돋움, 고딕 등등 이런 글씨체 말고 여러 다양한 폰트들을 직접 보고 사용하고 싶다거나, 상대방이 원하는 폰트로 적용을 해야 될 때 참고할만한 사이트 들을 소개합니다. 글꼴 폰트 사이트 아래 모든 사이트들은 모두 무료인 곳도 있고, 특정 폰트만 무료로 푼 곳이기 때문에 상업적으로 이용하실 경우 주의해서 사용하셔야 합니다. (이 글에서는 구글폰트를 추천하고 아래에 사용법을 적어놓겠습니다.) 1. 구글 폰트 (★추천) Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 어도비 폰트 Adobe Fonts Adobe Fonts partners with the world’s ..
FullSize의 이미지로 배경을 하는 사이트를 만들 때 간혹 이미지의 가로 폭을 고려하지 않고 만들다가 이미지가 깨져버리는 경우가 발생 할 수 있다. FullSize 이미지 설정방법에 대해 간단하게알아보자 FullSize 배경 이미지 설정방법 1. 가로 폭이 1200~3000px 정도인 이미지를 준비한다. 2. 이미지가 들어갈 영역의 높이를 100vh 로 설정한다. (100vh를 쓰는 이유는 부모 태그의 높이의 관계 없이 일정 높이를 갖기 귀함이다.). Background 속성 풀사이즈 배경을 바탕으로 여러 이미지들을 위치 시키고 싶을 때에는 background-image: url1, url2; background-position: center, center; 와 같이 “, (쉼표)”만으로 구분하여 한..
랜딩페이지가 뭔지, 예로는 무엇이 있는지, 1단 레이아웃은 또 무엇인지 간단하게 알아보도록 하겠습니다. 랜딩페이지(landing page) 세로로 길게 구성된 페이지를 말한다. 스크롤 시 아래의 컨텐츠가 표시되는 싱글페이지 형태의 웹 페이지 위의 사진처럼 스크롤하면 주 메인 내용이 보여지는 페이지들을 "랜딩페이지" 라고 합니다. 랜딩페이지를 사용하는 이유 랜딩페이지를 사용하는 이유는 하나의 목표를 달성하기 위함이다. 주로 자신의 물건을 홍보하는, 마케팅을 주 목적으로 하여 만들어지는 웹 페이지라고 생각하면 된다. 랜딩페이지 이점 [할인], [바로 구매] 등 사용자가 클릭하게끔 유도하는 버튼 등 여러 방식을 사용하여 "신규 회원 할인쿠폰" 등 회원가입을 하게 만들어 홈페이지의 전환율을 올리는 데에도 큰 도..
HTML 작업이 끝나고 며칠 후에 내 코드들을 보면은 너무 복잡하고 지저분하게 되어있어서 뭐가 뭔지 모를 때가 많았다. 그래서 HTML을 어떻게 깔끔하게 짤 수 있을까.. 찾던 도중 나에게 안좋은 습관들이 많았던 것이다. 내가 알아본 것들을 정리해 볼려고 한다. 완전 초보 개발자 수준이니 어느정도 마스터 하신 분들은 눈요기로 봐주시면 감사합니다. 1. 다양한 태그를 사용해라 보통 박스를 구분할 때 태그를 자주 사용했는데, 나중에 수정하려고 보면 어디가 어디 부분인지 헷갈린다. ... ... 3.이벤트는 인라인 방식으로 사용 NoNo onclick 같은 이벤트를 태그 안에다 사용하는 인라인 방식은 사용하지 않는 것이 좋다. 다른 사람들이 나중에 봤을 때 혼동이 올수도 있고 양이 방대해지면 일일이 찾아서 수..
HTML 마크업에 대해 알기 전에 HTML이 뭔지 알아보자 ★ HTML Hypertext Markup Language 의 약자로 프로그래밍 언어는 아니지만, 웹페이지가 어떻게 구조화 되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다. 즉, 웹페이지 만들때 사람으로 치면 '뼈' 라고 생각하시면 됩니다. ★ MarkUp (마크업) 언어 "MarkUp(마크업)"으로 둘러싸인 언어를 말하는데요. 마크업이라고도 하지만 tag(태그) 로 둘러쌓인 언어 라고도 합니다. ★MarkDown (마크다운) 언어 마크업 언어중 하나로 간단히 생각하면 읽고 쓰기가 간편한 언어 라 보시면 됩니다. MarkDown으로 만든 파일의 확장자는 .md 입니다. 예로 들면 README.md 또는 옛날 페이스북의 @이름 ..
