본문 바로가기

반응형

디자인/CSS 강좌

(20)
CSS 기초강좌 (유용한 CSS 강좌사이트 4개 소개) 강좌를 진행하면서 다른 강좌 사이트를 소개하니까 좀 이상하지만 그래도 저보다 훨씬 훌륭하고 쉽게 강좌를 진행하는 사이트가 많이 있어서 이를 소개시켜 드리겠습니다. 대부분 알고 계시리라 생각되지만 그래도 아직 모르시는 분들을 위해서 4개의 사이트를 소개해 드리겠습니다. 1.CSS 레이아웃을 배웁시다. 위 사이트는 CSS초보자들이 레이아웃을 공부하는데 무척 유용한 사이트 입니다. Display, Position, Float, Boxmodel, Framework 등 레이아웃과 관련된 CSS속성들을 아주 쉽게 설명하고 있으며 화면구성도 심플한 것이 보기에 좋습니다. 원문은 영문이었는데 이대엽님이 한국어로 번역하였습니다. 레이아웃은 일단 이곳에서 기초를 다지세요. 사이트 바로가기 2. W3scools.com 말이..
CSS 기초강좌 19 (Combinator 결합자) 오늘은 Combinator에 대해서 알아보죠 우리말로는 '결합자'라고 하는데 그래도 말이 어렵네요. 선택하려는 요소를 좀 더 정밀하게 선택하기 위해 요소들을 조합하여 콕 찝어서 선택한다는 말입니다. 예를들어 설명하면, 나의 가족이 번창하여 형제,자식,손자들이 아주 많이 있는데 그중 누구누구를 부르려면 "첫째아들의 자식들중 딸만 와라" : 자식+첫째자식 + 첫째자식의딸 "손자들중에 아들만 와라" : 자식 + 자식의 자식중 아들만 이런식으로 조합해서 선택한다는 말입니다. 이 Combinator 중 많이 사용하는 하는 것은 아래 4가지가 있습니다. 중요한 Combinator 4가지 1. 공백 : 하위 선택자 (ex: div p {background-color:blue;} ) 2. > : 자식 선택자 (ex: ..
CSS 기초강좌 18 (아이콘 폰트 FontAwesom 이용하기) 본 CSS강좌는 Chrome에서 작성했습니다. CSS3나 간혹 HTML5를 사용하고 있기 때문에 IE9이하 버전이나 오페라,사파리 등에서는 제대로 나오지 않을수 있다는 점을 미리 말씀드립니다. 그리고 오늘 알아볼 FontAwesome은 개인 홈페이지 및 설치형 블로그인 Tistory나 워드프레스 등에서는 잘 되지만 네이버나 다음등의 블로그에서는 사용할 수 없습니다. Home Library Applications Settings Home Library Applications Settings 3. CSS Font Awesome 알아보기 인터넷을 돌아다니다 보면 위와 같은 메뉴나 소제목 타이틀 등을 자주 볼 수 있습니다. 메뉴옆에 그림으로 집이나 책, 연필, 돋보기 등의 아이콘이 보입니다. 대부분 FontAw..
CSS 기초강좌 17 ( Float 의 이해 ) Float 속성은 display 와 position과 같이 웹페이지의 레이아웃을 짤때 많이 사용합니다. 하지만 float는 몇가지 알려진 문제점과 사용상의 불편한 점등 때문에 레이아웃을 짤때는 position을 더 선호하는 것 같습니다. 사실 position의 속성만 가지고도 충분히 레이아웃을 작성할 수 있습니다. 그러나 float 또한 CSS에서 매우 많이 사용하는 속성이므로 한번 알아보기로 하겠습니다. float의 키워드는 "left, right, none, hide, inherit, inside, initial..." 등 많이 있습니다. 이중에서 사용되는 것은 대부분 아래의 2가지 뿐인 것 같습니다. float : left // 요소를 왼쪽으로 붙여서 배치합니다. float : right // 요소..
CSS 기초강좌 16 (Position) [ position 및 relative,absolute,fixed,static 이해하기 ] 우리가 레이아웃을 만들때는 보통 CSS의 세가지 속성을 많이 사용합니다. display, position, float 입니다. 이 세가지는 무척 중요하고 까다롭기도 합니다. 만약 위의 3가지를 정확히 이해하신다면 웹페이지의 Layout을 구성하는 것이 상당히 수월해지지 아닐까 생각합니다. 물론 저는 아직 초보라서 위의 세가지를 정확히 이해하지 못합니다. 다만 제가 아는 범위에서만 포스팅 하려고 합니다. 그럼 이전에 연재했던 display에 이어 position에 대해 알아보기로 하겠습니다. Position 이 속성에는 여러가지 적용값이 있지만 가장 많이 사용하는 4가지만 알아보겠습니다. static, relativ..

반응형