본문 바로가기
반응형

디자인

 (86)
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..
CSS 기초강좌 15 (display:block display:inline) CSS display:block display:inline CSS에서 Display는 문자그대로 유저에게 "보여주는" 속성입니다. 보여줄때 어떻게 보여주느냐에 따라 몇가지의 값을 갖습니다. block, inline, inline-block, none, table,.. 이죠. 1. none 그냥 보여주지 않는 것이죠. (ex; display:none) 이 속성값은 원래 보여져야할 부분이 차지하고 있던 영역까지 없애버립니다. 이에비해 visibility라는 CSS 속성이 있는데 visibility:hidden 라고 코딩하면 보이지 않게 감춰버린 요소의 자리가 여전히 남아 있는 상태로 보여집니다. 예제1 여기는 첫행입니다 Visibility 로 감춰집니다 바로 위에는 Visibility 속성으로 줄이 없어졌는..
반응형

티스토리툴바