HTML5 구조 관련 복습 중, 괜찮은 내용의 블로그를 찾아서 공유합니다. 출처는 아래 명시해 뒀습니다. 웹문서의 본문을 구성하는 요소들중에 SECTION을 구성하는 요소에 대하여 알아봅니다.BODY 요소 요소는 문서의 본문 영역을 표시한다. 본문 영역은 실제 콘텐츠가 표현되는 공간이며, 이 공간에서 사용자와의 상호작용이 실질적으로 이루어진다. 또한 body 요소는 브라우저가 렌더링해야 할 범위를 알려준다.HEADER 요소HTML5에 새롭게 추가된 요소로서, 웹 문서 맨 윗부분에 있으며 웹 사이트 이름, 글로벌 링크(로그인, 회원가입, 사이트맵, 언어 선택등 웹사이트 어느 곳에서든지 이용할 수 있는 링크)등으로 구성된 영역이다.HTML LOGO 검색 사이트 이름(로고), 내비게이션, 헤드라인, 검색 등으..
Bootstrap 반응형 웹 속성 적용시 메타 설정 부분이 있다. cs meta 태그 속성은 대부분 name과 content속성으로 이루어져 있습니다. 그 중에서 viewport는 웹 페이지의 크기를 결정합니다. width=device-width는 웹 페이지의 크기가 모니터가 스마트폰의 실제 액정 크기를 따라가도록 합니다.initial-scale=1는 보여지는 화면의 zoom up 정도를 1배율로 한다는 것입니다. 이 값을 키우면 보여지는 화면이 줌 되어 크게 보입니다. 마치 스마트폰에서 작은 사진을 두 손가락을 이용해 확대시키는 것과 비슷합니다.shrink-to-fit=no는 애플의 safari(사파리) 브라우저에만 영향을 미치는 속성 같습니다. 그 중에서도 사파리 11 이전의 버전과 관련된 것 같습니..
보호되어 있는 글입니다.
[Markdown] 마크다운 문법 - 깃허브 위키
출처 : http://ccl.cckorea.org/syntax/#section [Markdown] 마크다운 문법 - 깃허브 위키 목차목차에서 제외하기제목 h1, h2, h3, h4두꺼운 스타일링크일반 링크새창으로 링크새창으로 버튼 링크자동 링크문단 (p)인용 (blockquote)정렬가운데 .text-center왼쪽 .text-left오른쪽 .text-right각주축약어 (HTML)테이블깃헙 마크다운 도움말 페이지 링크목차0. TOC (순서없는 목록) - 숫자로 시작 {:toc} * TOC (순서 목록) - 목록형으로 시작 {:toc} # 디자인 시안처럼 목록 스타일 없이 직접 제목으로만 목차를 구성하고 싶으면 아래처럼 `no-style` 클래스를 추가합니다. * TOC (목록 스타일 없는 목록) {:t..
HTML/CSS: box-sizing 속성
box-sizing 속성 엘리먼트의 너비와 높이를 지정하는 기존의 CSS box model을 수정하기 위한 CSS 속성이다. `box-sizing`의 값으론, `content-box`, `padding-box`, `border-box`가 있으며,`content-box`가 기본값이다. box-sizing: content-box CSS 표준에 정의되어 있는 기본값이다. width 와 height 속성은 컨텐츠만 포함하며, padding, border, margin 은 포함하지 않는다. box-sizing: padding-box width 와 height 속성이 padding 을 포함한다. border, margin 은 포함하지 않는다. box-sizing: border-box width 와 height 속성..
HTML/CSS 구글 폰트 사용 및 설정
안녕하세요. 오늘은 HTML/CSS 구글 폰트 적용 방법을 알려드리겠습니다. 우선 구글에 google fonts 검색하시거나 아래 주소 링크로 들어갑니다. https://fonts.google.com 에 접속하면 여러가지 무료공개 폰트가 뜨는데요. 사용하고자 하는 폰트를 클릭합니다. 저는 Nosifer 을 사용해 보도록 하겠습니다. 해당 폰트를 클릭하시거나 + 누르시면, 다음과 같은 창이 뜹니다. SELECT THIS FONT 클릭하세요. 클릭하면 다음 과 같은 창이 뜨는데, 해당 링크와 예제를 보고 사용하시면 됩니다. 혹시 모를 초급자를 위해 소스 공개해서 설명드릴게요. Google 폰트 설정.font-family-1{font-family: 'Nosifer', cursive;}폰트 확인용 글자입니다~h..
Favicon & App Icon 파비콘 코딩 방법
Favicon 설정 방법 및 무료 이미지 변환 사이트 소개 파비콘(Favicon) 은 (favicon - Favorites + Icon의 합성어)이란 웹사이트나 웹페이지를 대표하는 아이콘입니다. 위와 같이 사이트를 대표하는 아이콘인데요. 이미지 파비콘 무료 변환 및 HTML 설정 방법을 간단하게 설명해 드리겠습니다. 첫째로, 사용하고자 하는 이미지를 준비합니다. 두번째, 무료 변환 사이트인 https://www.favicon-generator.org/ 을 접속합니다. 세번째, 파일 선택을 누른 후, 준비한 이미지를 선택한후 Create Favicon 을 클릭합니다. 네번째, 아래 그림에서 첫번째 Download the generated favicon 클릭후, 바탕화면 img 파일폴더 생성후 img 폴더에..