지지나

HTML/CSS가 어느 정도 익숙해지고 Emmet을 설치해서 사용하기 시작했습니다. 개인적으로 Emmet을 처음부터 설치해서 쓰기보다는 구조에 적응이 되고 숙지를 한 이후에 설치하는 것이 좋다고 생각합니다. 브라켓을 열고 오른쪽에 확장 기능 관리자를 열어 줍니다. '설치 가능' 메뉴에서 Emmet을 검색해 설치해줍니다. (Reverse Emmet 아닙니다) '설치됨' 메뉴에서 확인할 수 있고, 상단의 메뉴바에 Emmet이 도움말 옆에 생성된 것도 확인할 수 있습니다. 그 동안은 HTML문서 구조를 일일히 적었는데, 이제 아래 두 가지 방법으로 구조를 마법처럼 만들수 있게 되었습니다. ① ! + tab키 ② html:5 + tab키 ※Emmet은 확장자가 html로 선언된 파일에서만 작동합니다. 그리고 아..

집에서는 항상 Atom 에디터를 사용하다가 아무래도 브라켓을 설치하는게 낫겠다 싶어서 설치해보았어요. 브라켓 설치와 단축키 사용법에 대해서 중요한 것만 간단하게 설명하겠습니다. 브라켓 설치는 아래 링크타고 들어가서 다운받고 Next버튼만 누르면 됩니다ㅎㅎ 금방 끝나요. brackets.io/ A modern, open source code editor that understands web design Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it. With new features a..

완전 간단한 css display와 visibility 속성에 대해서 알아보자. display 속성은 크게 none, inline, block, inline-block가 있으며 각각의 의미는 이렇다; display: none → 요소가 완전히 사라짐 display: inline → 인라인 성격으로 바뀜. 크기를 가질 수 없고, 세로로 쌓이지 않고 가로로 나열됨. display: block → 블록 성격으로 바뀜. 아래로 쌓임. display: inline-block → 크기는 가질 수 있지만 세로로 쌓이지 않고 가로로 나열됨. visibility는 화면에 어떻게 보이는지를 설명하며, hidden으로 하게 되면 요소는 보이지 않지만 요소의 자리는 그대로 유지한다. 백문이 불여일견인지라, 직접 해서 눈으로 ..