::Devlog::

Font Awesome 활용하기!위 sample에서 아래 방향 화살표가 Font-Awesome을 활용한 아이콘이다. >>Font-Awesome 페이지로 이동하기>> 활용하는 방법은 간단하다.위 예제의 코드를 살펴보면 쉽게 이해할 수 있다. i tag를 보면 class가 지정되있는 것을 볼 수 있다.Font-Awesome 페이지에 있는 아이콘들 중 마음에 드는 아이콘을 클릭하면,그 아이콘에 해당하는 class가 나온다.그 클래스를 복사, 붙여넣기 해주면 된다! 물론,여기에 추가적으로 해야할 사항이 한 가지 더 있다.HTML파일을 읽어들일 때, i class = " " 에 해당하는 클래스가 무엇을 가리키는지 알아야 하기 때문에, 태그에 추가로 삽입해야할 코드가 있다. 혹시 뭔가가 잘 되지 않는다면 Font-..

반응형 웹(Responsive Web)이란? 반응형 웹은 사용자의 특정 해상도를 가징하지 않는 것부터 출발한다. 모든 해상도를 커버할 수 있고, 의도에 따라 특정 해상도 범위에 제한적으로 적용할 수 있으며, 적절한 중단점(breakpoint)를 제공한다. 반응형 웹 개념 *모바일 퍼스트 PC보다 모바일 기기를 먼저 생각해서 디자인하고 프로그래밍 하는 기법이다. 모바일의 제약 1) 모바일 기기의 스크린 크기 2) 네트워크 속도 및 품질 3) 사용하는 모드 반응형 웹은 고 사양(고 해상도) 웹이 저 사양(저 해상도) 모바일 기기에서도 불편함없이 구현되는데 초점이 맞춰져 있다. 때문에 일반 웹이 모바일 웹으로 보여질 때 불필요한 요소들을 최소화시켜야 한다. 가장 대표적인 것으로 일반 웹 메뉴를 버튼 하나로 축..

3. Responsive design with bootstrapBootstrap Framework부트스트랩을 사용하는 방법은,이미 부트스트랩에서 지정된 class를 정의하는 방식으로 사용한다. 반응형 이미지class = img-responsive 버튼class = “btn btn-block"btn : 버튼 모양btn-block : 100%로 가득찬 버튼 Grid Font Awesome Font Awesome은 아이콘 라이브러리로, vector 이미지이다. .svg 파일에 저장되어있다. 링크를 추가함으로써, 아이콘을 추가할 수 있다.px을 조절함으로써 크기를 조정할 수 있다.아이콘은 icon이므로 i라는 약자로 element를 표시한다.열고 바로 닫아준다. 좋아요 = fa-thumbs-up 쓰레기통 = f..

각각 갖고 있는 Box Model이 다르다.Block Element / Inline Element Block Element는 독자적인 영역을 차지하고 있다.그렇기 때문에 위에서 아래로 배열된다.ex) h1, h2, h3, ... , div, p, ul, li, form Inline Element는 content area의 영역만 차지하고 있다.그래서 웹 페이지의 영역이 되는데로 좌에서 우로 배열된다.ex) a, img, span, em, input 위 두 가지 속성은 style의 display를 통해서 변환시킬 수 있다.추가적으로 inline-block이라는 속성이 있다.inline 요소는 Box Model 을 통해 제어할 수 있는 margin 값이 적용이 안될 때가 있는데,이 부분을 보완하기 위해서 등..

HTML(Hyper Text Markup Language)“연결된" “문자"를 “markup"하는 “언어" markup이란 요구사항을 위해 주석, 메모를 다는 것을 의미한다. HTML의 핵심은 구조화이다. 이 문서의 title, subtitle, list, table은 무엇인지를 설정 구조화를 제대로 해서 마크업을 해줘야 웹 문서의 의미가 살아난다. 이렇게 의미론적으로 구조가 갖춰져있는 웹을 시맨틱(Semantic) Web이라고 한다. 왜 의미에 맞는 태그를 사용해야 하나요?위에서 말했듯이 HTML 태그에 맞게 작성된 웹을 Semantic Web이라고 한다.div로 템플릿을 설계할 수도 있지만 왜 각 태그를 내용에 맞게 설계해야 하는가? 우선, 단편적으로 검색에 노출될 수 있게 하는 이유가 있다.내용에 ..