목록프로그래밍언어/Html & Css (14)

Fall in IT.

Flex를 사용하여 웹페이지 레이아웃 잡는 방법

안녕하세요. 오늘은 Flex를 사용하여 웹페이지의 레이아웃 잡는 방법에 대해서 알아보겠습니다. flex란?flex는 웹페이지를 만들때 layout을 쉽게 만들 수 있도록 도와주는 CSS 속성 입니다. 일반적인 웹페이지 구성 모두 div로 나누지 않고, 위에 그림과 같이 시멘틱태그를 사용하는 이유는?시멘틱태그를 사용하면 웹페이지의 태그 구조를 쉽게 파악할 수 있습니다.검색 엔진에 걸릴 확률이 높아 집니다. 시멘틱태그(semantic tag)란?특정한 태그에 의미를 부여한 것.header는 제목, section은 본문 등.. (생활코딩 참조) flex 기본 속성flex를 사용하기 위해서는 display : flex 속성을 부여해야 합니다.flex-direction 을 사용해서 정렬방향을 설정 합니다.flex..
프로그래밍언어/Html & Css 2017. 3. 4. 23:43
웹페이지 간단하게 레이아웃 잡는방법

안녕하세요. 오늘은 웹페이지를 만들때, 기본적으로 시작하는 레이아웃 잡는 방법에 대해서 알아보겠습니다. 웹사이트 레이아웃 잡기상단 header 영역을 잡습니다.중간에 contents 영역을 잡습니다.하단에 footer 영역을 잡습니다.필요하다면 contents 영역을 또 세부적으로 나눕니다. - aside, section 영역이라고 부릅니다. 이렇게 세부적으로 나뉘고, 나뉘고 나뉘면 웹사이트가 완성됩니다. 웹사이트 별거없지요.. ^^ 아래 영상을보고 따라해보세요~ 모두 즐거운 코딩하세요~
프로그래밍언어/Html & Css 2017. 2. 23. 20:32
SASS의 소개와 사용방법

안녕하세요. 오늘은 SASS에 대해 알아보겠습니다. SASS란?CSS를 효율적으로 작성할 수 있도록 도와주는 프로그램이다.기존의 CSS의 유지보수의 불편함 등을 SASS를 사용하면 해결 할 수 있다. 위에서 언급한 CSS의 단점을 보완하기 위한 기술로, SASS 자체를 그대로 사용할수는 없고, SASS의 문법에 맞게 SASS파일을 만들면 컨버터를 이용해서 CSS를 생성한다. 즉, SASS문법에 맞게 CSS를 작성하고, SASS 컴파일러를 사용하여 HTML이 이해 할 수 있는 문법으로 변환합니다. SASS홈페이지http://sass-lang.com/ SASS 설치방법윈도우에서 설치 방법 - http://rubyinstaller.org/에 방문해서 ruby를 설치한다. - 윈도우키+R키를 누르고 cmd를 입..
프로그래밍언어/Html & Css 2016. 10. 22. 14:57
CSS - @media query 사용하기

안녕하세요. 오늘은 반응형 웹페이지 디자인의 핵심 기술인 media query에 대해서 알아보겠습니다. media query란?최근 트렌드인 반응형 웹앱을 만들기 위한 CSS 기능입니다.화면의 종류와 크기에 따라서 디자인을 달리 보여줍니다. 예제소스넓이가 500px 이하일 경우는 body 태그의 배경색을 green으로 설정하는 코드. @media(max-width:500px) { body { background-color: green; } } 넓이가 500px 이상일 경우 body 태그의 배경색을 green으로 설정하는 코드 @media(min-width:500px) { body { background-color: green; } } 예제소스 2 결론엘리먼트들의 크기나 위치를 쉽게 설정할 수 있어, 레이..
프로그래밍언어/Html & Css 2016. 9. 1. 23:15
Prev 1 2 Next