본문 바로가기

전체 글41

모바일 지원(viewport) 현재 자신이 작업한 웹 페이지가 모베일에서 어떻게 보이는 확인하기 위해서는 (Chrome에서) F12를 눌러 개발자 도구를 실행시면 각각의 장치마다 해당 웹 페이지가 어떻게 보이는지 화면을 확인 할 수 있다. html의 head 하위에 meta tag로 아래와 같이 viewport를 추가하면 처리 가능 위와 같이 처리하면 각 장치의 화면 크기에 맞추어 웹페이지를 표시하도록 도와 준다. 각각의 페이지 사이즈마다 웹페이지의 구성을 다르게 하는것은 CSS에서 처리해야할 사항. 2016. 9. 17.
유지 보수 규모가 큰 사이트가 되면 유지보수를 효율적으로 해서 프로젝트의 복잡도를 낮추는 것이 정말 중요한 일. 따라서 대규모의 CSS 시스템을 구축할 때 여러가지 테크닉이 필요함. Link와 import 두 방법 모두 같은 방식. 수많은 사이트들의 공통적인 CSS를 하나의 CSS파일로 관리하면 추후 유지보수시 편리함이 있음. : CSS 내부에서 다른 CSS를 호출할 떄 사용 코드 경량화(minify) CSS는 네트워크를 통해서 전송되며 CSS크기가 커지면 생산자와 소비자 모두에게 손해임. 따라서 코드의 크기를 줄이는 것을 통해 이런 문제를 완화해주는 도구가 minify 도구. ( http://adam.id.au/clean-css-online/) Preprocessor CSS에 편리한 기능을 더한 새로운 언어를 만.. 2016. 9. 17.
HTML 기초 스터디 Note 웹 홈페이지를 구성하는 언어. 웹 페이지에서 F12를 누르면 생성되는 개발자모드에서 현재 페이지의 HTML 코드를 확인할수 있다. HTML의 경우 웹프로그래밍의 시작이며 문법이 어렵지않아 쉽게 배울 수 있음. HTML파일을 생성하는 방법메모장에서 HTML로 생성할 수 있으며 HTML파일을 생성하려면이름에 .html확장자를 붙여 준다. (이름.html )모든 확장자를 선택해 준다. (*.*)인코딩은 UTF-8 (인코딩을 UTF-8로 맞추는 정확한 이유는 잘 모르겠지만, 웹페이지 개발시 인코딩이 잘못되어 글씨가 깨지는 경우를 많이 봐 왔기에)위와 같이 생성된 파일을 실행하면 자동으로 인터넷창으로 파일이 열리고 작성된 내용을 확인 할 수 있다. 이후에 수정한 Tag를 확인 하려고 하면, 생성한 Html 파일의.. 2016. 9. 15.
CSS 기초 스터디 Note CSS관련 체험 및 적용된 효과를 보고 배울 수 있는 사이트 (codepen.io) HTML이 정보를 전달하는 것이 목적이라고 하면 CSS는 HTML을 보기좋게 꾸며주는 역할을 하는 언어임. HTML과 CSS는 필연적으로 붙어있어야 하며, HTML이 무엇이고, Tag가 어떻게 사용되는지에 대해서만 알면 배울 수 있는 쉬운 언어임. CSS(Cascading Style Sheet)는 쉽지만 기능성이 떨어짐. 따라서 이를 보완하기 위한 여러 다른 언어들이 존재함.LESSSASSTwitter BootstrapHTML의 Font Tag가 따로 떼어져 나와서 CSS가 되었다라고 생각해도 됨. CSS 적용하기 (style)head Tag 하위에 위치해 있으며 Tag명과 속성값들로 해당 Tag에 디자인을 적용함. 또는.. 2016. 9. 15.

티스토리툴바