이전 글에서 float와 clear의 기본적인 사용법을 알아보았습니다. 이번 글에서는 미니 웹사이트에서 실제로 어떻게 적용되는지 알아보겠습니다. 그리고 웹사이트 만드는데 있어서 사용되는 파일이 늘어나면 관리하기가 어려워지므로 폴더를 만들어 서로 비슷한 성격을 가진 파일을 한데 모아서 관리하면 편리하므로 파일관리시 반드시 사용하게 되는 절대주소와 상대주소에 대해서도 알아봅니다. 우선 이번 글에서 사용할 파일을 다운 받습니다. 이 파일에는 아래 이미지처럼 사진이미지가 있고 빈 폴더가 있습니다. 이전까지는 html 파일과 스타일시트 파일만 있어서 간단한 구조이므로 파일관리가 필요하지 않았지만 이미지가 늘어나거나 제이쿼리 파일이 첨부되면 루트폴더가 복잡해집니다. 그래서 같은 종류의 파일은 폴더를 만들어서 이동해..
이전 글에서 본문 영역에서 컨텐트와 사이드바를 좌우로 정렬할때 float: left;와 float: right; 라는 속성과 값을 사용하여 컨텐트 영역은 좌측에 사이드바 영역은 우측에 배치를 했습니다. float라는 말은 영어로 띄운다는 뜻으로 웹페이지상에서 이 속성을 사용하면 해당 요소는 붕 뜨게 되고 포지션에서 절대위치와 같은 효과가 나타납니다. 그래서 어떤 요소에 float를 사용한 경우 다른 요소와 겹치게 되는데 이를 방지하기 위해 뒤따라오는 요소를 clear라는 속성으로 겹치지 않게 합니다. 이번글에서는 이러한 float라는 속성과 clear라는 속성을 이용하여 여러가지 요소에 대해 다양한 레이아웃을 하는 방법을 알아봅니다. float.html파일을 텍스트 에디터에 열면 3개의 id 선택자에 f..
이전 글에서 상대위치(Relative Position)에 대해서 알아보고 제목타이틀에 상대위치를 적용해서 리본만들기를 해보았습니다. 이번 글에서는 포지션의 다른 속성인 절대위치(Absolute Position)를 이용한 포지션 방법과 고정위치(Fixed Position)을 이용해서 html 요소를 화면에 고정시키는 방법을 알아봅니다. 1. 절대위치를 이용한 요소의 포지션 첨부파일을 열어보면 html부분과 CSS부분이 좀 바뀌었습니다. 1은 2부분을 스타일링한 것인데 마우스 스크롤시 화면이 이동되는 것을 보기위한 용도로 삽입한 것입니다. div#third 는 두개의 클래스 div요소를 삽입하고 다시 각각의 요소에 태그로 숫자를 넣었습니다. 우선 이전 글에서 한 내용을 기억을 되살려서 상대위치를 적용해봅니다..
이번 글에서 만들 글제목 부분의 스타일입니다. 예전 글에서 CSS3에서 가능한 그림자효과를 주는 방법을 알아보았습니다 . 또한 글제목에 해당하는 태그에 대해서 배경을 검정색으로 하고 글자색을 흰색으로 하면 위와같이 나오게 됩니다. 그런데 문제는 양쪽 사이드에 있는 삼각형 모양입니다. 이러한 CSS를 이용한 모양을 리본이라고 합니다. 제경우는 제목부분과 그림자를 포토샵으로 만드는게 편해서 그냥 포토샵 이미지를 만들어 붙였는데 여기서는 CSS만을 이용해서 삼각형을 만들어 붙여보도록 하겠습니다. 1. 제목 타이틀 만들기 html 페이지에 클래스 선택자를 사용해서 div 태그를 하나 만듭니다. 마감태그도 만들고 그 사이에 태그로 제목을 입력합니다. 그 아래에 두개의 div을 더 만듭니다. 클래스 선택자를 사용하..
지금 진행하고 있는 글은 CSS에서 레이아웃에 관한 것이 주된 내용입니다. 지금까지를 정리해보면 우선 처음에 레이아웃에서 가장 기본인 블럭요소에 대해서 말씀 드렸고, 두번째로 이 블럭 요소를 타겟팅하는 방법, 세번째로 타겟팅을 효율적으로 하기 위해서는 외부 스타일 시트를 이용한다는 것, 네번째로 레이아웃에서는 빈상자인 태그를 사용한다는 것, 다섯번째로 이 태그라는 상자의 내용물(컨텐트)과 상자와 상자 간의 간격을 맞추기 위해서는 마진(Margin)과 패딩(Padding)을 사용한다는 것, 여섯번째로 마진과 패딩, 보더(Border)의 설정법이었습니다. CSS는 레이아웃에 관한 기술(Technology)입니다. 지금도 일부 웹사이트에서 사용하고 있는 레이아웃인 테이블 방식은 아주 비효율적이며 이방식을 사용..
이전 글에서 마진과 패딩을 적용하는 방법을 간략하게 알아봤는데 이번 글에서는 마진, 패딩, 보더를 적용하는 자세한 방법을 알아보고 미니 웹사이트 작업을 계속 진행합니다. 마진과 패딩은 적용법이 간단하지만 보더의 경우는 장식을 위해서 사용하기 때문에 다양한 스타일이 있고 컬러도 적용할 수 있으므로 내용이 많습니다. 1. 마진과 패딩 적용하는 방법 기본적인 적용법은 마진의 상, 우, 하, 좌의 4면의 속성을 각각 설정하고 값을 입력하는 방법입니다. 패딩도 같은 방법이니 아래에서 margin을 padding으로 교체하면 됩니다. 단위는 주로 px(픽셀)을 사용하지만 pt(포인트;글자크기의 단위), em(마진이 설정되는 곳의 폰트 크기를 기준으로 하는 단위), %를 사용할 수 있습니다. margin-top:10..
CSS에서 마진과 패딩은 태그 만큼이나 많이 사용하는 스타일시트 속성입니다. 이들의 주된 역할은 태그와 같은 블럭요소를 이용한 레이아웃에서 블럭의 경계선에 해당하는 border(테두리)와 컨텐트의 간격을 설정하거나 인근의 블럭요소와 의 간격을 설정해서 보기 좋은 레이아웃을 만드는데 있습니다. 블럭요소의 내부에 있는 컨텐트와 border와의 간격을 패딩이라고 하고 블럭요소간의 간격을 마진이라고 합니다. 우선 이들의 세부적인 내용을 알아보기 전에 이전 글에서 작업한 것을 보면 배경색도 이상하고 블럭요소간에 구분하기 위해서 설정한 테두리 색깔도 보기 좋지 않으므로 다 제거하고 CSS3에서 새롭게 나온 속성인 그림자(Shadow)효과와 박스의 모서리를 둥글게 할 수 있는 효과인 border-radius에 대해 ..
HTML로 코딩하면서 가장 흔하고 많이 쓰이는 것이 태그입니다. 영어로 Division을 의미하는데 이것은 이전 글 에서 알아봤듯이 대표적인 블럭요소중에 하나입니다. 블럭요소란 웹페이지에서 좌우공간을 다 차지하여 이 요소 외에 다른 요소가 옆에 오면 아래로 내려버리는 성질이 있습니다. 그래서 CSS로 스타일을 적용하지 않은 웹페이지를 보면 글자의 나열과 이미지만 나오고 위에서 아래로 HTML 코드 순서대로 나타납니다. 우리나라에서 가장 많이 쓰이는 인터넷 익스플로러에서 네이버 포털사이트의 초기화면을 스타일을 적용안하고 본 화면입니다. HTML의 블럭요소는 이런 성질 때문에 보기좋게 레이아웃하기 위해서 초기 디자이너들은 태그를 사용하여 레이아웃을 했습니다. 테이블형태의 레이아웃은 스타일시트와 관계가 없기 ..
HTML페이지에 스타일시트를 적용하는 방법은 크게 3가지로 사용합니다. 특수하게 적용하는 방법도 있지만 기초부분에서는 제외합니다. 3가지중 가장 많이 쓰이는 방법이 웹표준에 의한 스타일시트 적용법인 외부 스타일시트(External Style Sheet) 입니다. 그리고 인라인(In-line Style Sheet)방식과 임베디드(Embedded Style Sheet )방식이 있습니다. 우선 3가지 방식에 대해서 알아보기 전에 미니 웹사이트를 만들어봅니다. 왜냐하면 외부 스타일시트 방식의 효율성을 증명하기 위해서죠. 이전 글에서는 W3C School의 실험용 페이지를 이용해서 몇가지 코드만 입력해도 가능했는데 이번에는 실제로 웹페이지를 하나하나 코드를 입력해서 만들어보고 사용되는 태그에 대해서도 설명을 드립..
CSS의 문법 구조는 프로그래밍 언어라고 할 수 없을 정도로 아주 단순합니다. 우선 제일 먼저 나오는 것이 선택자입니다. 선택자에 대해서는 이전 글 에서 잠깐 타입 선택자(Type Selector)에 대해서 알아봤는데 타입선택자와 함께 가장 많이 쓰이는 것이 아이디 선택자와 클래스 선택자입니다. 선택자 다음에 나오는 것이 중괄호의 시작입니다. 그 다음이 속성, 콜론, 값, 단위, 세미콜론, 중괄호끝으로 모든 구문이 완료됩니다. 하나의 속성과 값이 끝나고 다른 속성과 값을 추가하려면 세미콜론 다음에 다시 시작하면 됩니다. 모든 속성과 값은 중괄호 안에 들어가야합니다. 아주 간단하죠. 그러면 위 사진에서 중요한 것이 선택자와 속성, 값이 있는데 속성과 값은 아주 다양하기 때문에 별도의 내용없이 나오는대로 설..
웹페이지는 HTML(Hyper Text Markup Language)이라는 언어와 CSS(Cascading Style Sheet)라는 두가지 웹프로그래밍 언어로 주로 만들어집니다. HTML은 컨텐트(Content)를 담당하고 CSS는 프리젠테이션(Presentation)을 담당합니다. 뭔가 발표할때 프리젠테이션을 하게 되는데 적당히 글씨만 쳐서 올리면 보는 사람이 즐겁게 보지 않기 때문에 색상도 넣고 배경색도 넣고, 테두리도 만들게 됩니다. 이러한 작업을 웹페이지에서는 CSS가 담당합니다. 웹페이지에서는 태그를 사용하여 컨텐트의 특성을 정합니다. 제목은 ~태그를 사용하고 문장은 태그를 사용하죠. 아주 많이 쓰는 태그입니다. html에서는 이러한 태그를 요소(Element)라고 합니다. 요소에는 블럭요소와..
웹디자인에서 사용되는 레이아웃 언어인 CSS가 만들어진 것은 1996년이었지만 아직도 웹표준을 적용하지 않고 웹페이지가 만들어지고 있는 것은 그동안 CSS가 모든 웹브라우저에서 일관된 표현이 되지 않았기 때문입니다. 그당시 웹브라우저로 많이 사용된 것이 인터넷 익스플로러였고 윈도우 OS에 끼워팔았기 때문에 웹브라우저 점유율이 세계적으로 95%나 됐었습니다. 현재의 OS 점유율을 보면 윈도우버전이 아직도 80%를 차지하고 반강제적으로 인터넷 익스플로러를 사용하게 되는데 특히 XP의 사용자가 38.5%로 많은 수를 차지합니다. 왜 XP가 문제인가 하면 이 OS에 끼워져있던 인터넷 익스플로러가 버전 6인데 CSS적용이 잘 안되고 말썽 많은 웹브라우저이기 때문입니다. 그나마 버전업이 돼서 다른 버전을 사용할 수..
웹디자인시 반드시 사용하게 되는 스타일시트 작업에서 알아두면 편리한 팁을 소개합니다. 1. CSS 폰트 스타일 정의 단축형(Shorthand) 폰트에 대하여 정의할때 여러가지 속성과 값을 별도로 정의하게 됩니다. font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 1em; line-height: 1.5em; font-family: verdana,sans-serif; 위와 같이 여러개의 속성과 값을 정의할 수도 있지만 다음과 같이 한줄로 단축형을 사용할 수 있습니다. font: bold italic small-caps 1em/1.5em verdana,sans-serif 즉 다음과 같은 Syntax로 적용을 해야합니다. fo..
제이쿼리를 이용한 떠다니는 아이콘이나 배너는 글을 읽으면서 스크롤하다보면 계속 움직이기 때문에 글을 읽는데 방해가 되므로 광고나 소셜네트워크 아이콘 등 블로그 관리자의 필요에 의한 것은 가급적 달지 않으려고 하지만 방문자의 편의를 위한 아이콘이나 배너는 달아볼만 한 것 같습니다. 방문자의 편의를 위한 것이라면 메뉴바나 글의 위치를 이동할 수 있는 아이콘이 있을 수 있습니다. 물론 관리자의 취향에 따라서 글읽는데 방해가 되지 않는다 생각되면 소셜네트워크 아이콘이나 광고 배너를 설치하는데 사용할 수도 있습니다. 이번글에서는 간단한 제이쿼리 플러그인을 이용해서 웹페이지를 스크롤함에 따라서 아이콘이나 배너가 애니메이션 되는 효과를 만드는 방법을 알아봅니다. 제 블로그의 화면 좌측 끝에 배치되어 있는 뷰온버튼은 ..
제이쿼리 이미지 슬라이더 배너를 자동으로 만들어주는 무료프로그램을 소개합니다. 개인용으로 무료이고 이미지 하단에 제작자의 로고가 첨부되지만 상당히 좋은 프로그램입니다. 12개의 템플릿과 12개의 슬라이더 배너를 선택할 수 있으며 CSS를 조정하면 이미지도 자유롭게 원하는 크기로 설정할 수 있습니다. 이만한 프로그램이 개인용으로나마 무료라는게 믿어지지 않을 정도로 상당히 좋습니다. 제 블로그에 오랫만에 배너를 바꾸려고 작업했는데 제이쿼리가 많이 설치돼서 그런지 버벅거리더군요. 특히 인터넷 익스플로러에서는 상당히 버벅거립니다. 그래서 제거했습니다. 이곳 을 클릭하면 해당 사이트로 이동합니다. 12종류의 데모를 확인해보시고 하단에 Free Download버튼을 클릭합니다. 윈도우버전과 맥버전이 가능하며 유료인..
Your browser does not support iframes. 제이쿼리 플러그인을 이용한 모자이크 애니메이션 배너입니다. 우측에 어도비 터치앱 배너을 만들어서 사이드바에 넣었는데 4대 브라우저에서는 잘 나오지만 IE에서만 그냥 이미지로만 나옵니다. 어떤 부분이 잘못됐는지는 나중에 알게 되면 첨부해드리고 우선 상당히 좋은 효과이기 때문에 소개합니다. 위배너는 유료 플러그인에 비해 좀 못하지만 이런 모자이크형태의 배너는 거의가 유료입니다. 이곳 을 클릭하면 원본 사이트로 이동합니다. 소스를 다운 받으면 제이쿼리 파일과 CSS파일만 있어서 시험해보기가 어렵죠. 그래서 html파일과 이미지를 별도로 다운 받아 편집해서 압축파일로 저장했습니다. 수정하면서 구글의 제이쿼리 라이브러리를 삽입했습니다. coin..