CSS

그룹 선택자는 하나의 선언블럭으로 여러개의 선택자을 한꺼번에 지정하는 방법입니다. 가령 10명의 친구들이 있다고 하겠습니다. 그 중에서 길동이와 꺽정이에게만 사과를 주고 싶습니다. "얘들아 사과 먹어" 라고 하면 10명이 다 먹겠다고 올 것입니다. "길동아, 꺽정아 사과 먹어"라고 얘기 할 것입니다. 그래야 길동이와 꺽정이만 사과를 먹으로 올 것입니다. css로 대입해 생각해 보면 2개의 요소(길동, 꺽정)을 선택자로 생각할 수 있습니다. 그리고 "사과 먹어"는 선언으로 생각할 수 있습니다. 즉 2가지 이상의 선택자가 같은 속성을 가지기 때문입니다. 이문열 삼국지 책 소개 젊은 세대를 위해 내용을 손보고, 한자어 독음을 달아 읽기 쉬운 『삼국지』 1권 도원(桃園)에 피는 의(義) 서사(序辭) 창천(蒼天)..

이번 강좌에서는 자식, 자손, 형제 요소란 말이 계속 나오게 됩니다. 만약 용어가 어렵게 생각되신다면 html 기본강좌에서 부모요소, 자식요소, 형제요소, 조상요소, 자손요소 그리고 상속 강좌를 꼭 읽어보시뒤에 진행하시길 바랍니다. 지금까지의 선택자만을 가지고도 다소 불편함은 있게지만 html 요소의 선택은 어느정도 가능합니다. 대신 css에서 선언해야 하는 코드가 많이 길어지고 html 문서에서는 id나 class 마크업이 엄청나게 늘어날 것입니다. css 결합자는 그런 코딩의 양을 획기적으로 줄이고 html 문서는 단순화 할 수 있으며 css의 선택자를 시각적으로도 명확하게 만들수 있게 합니다. 결합이라는 말이 두가지 이상을 합치다라는 의미가 있습니다. 즉 결합자란 최소한 두가지의 선택자가 필요하게 ..

지난 강좌에서 css 선택자로 html 요소를 선택하는 방법에 대해 알아보았습니다. 이어서 이번 강좌에서는 css의 가장 큰 장점 중에 하나인 다중? 복합? 적용에 대해 알려드리려 합니다. html 한 요소에 여러개의 css 속성을 다중으로 적용하는 방법입니다. @charset "utf-8"; /* CSS Document */ .bg-green { background-color: green; } .txt-white { color: white; } .txt-2em { font-size: 2em; } 위와 같이 일단 3개의 css에 3개의 class를 작성했습니다. 이문열 삼국지 책 소개 젊은 세대를 위해 내용을 손보고, 한자어 독음을 달아 읽기 쉬운 『삼국지』 젊은 세대를 위해 내용을 손보고, 한자어 독음..

지난 강좌에서 html 문서의 태그를 선택자로, class를 선택자로 사용하는 방법에 대해 알아보았습니다. 이번강좌는 좀더 확장에서 선택자를 활용하는 방법에 대해 알아보겠습니다. 종류 css 형태 설명 전체 선택자 * 모든 요소를 선택합니다. 태그 선택자 태그 h1, p, span, table, ul .. 각각의 태그 요소를 선택합니다. 클래스 선택자 .클래스 웹문서에서 class="클래스"로 마크업 한 요소를 선택합니다. 아이디 선택자 #아이디 웹문서에서 id="아이디"로 마크업 한 요소를 선택합니다. 속성 선택자 [속성명="속성값"] 웹문서에서 [속성명="속성값"]을 가진 요소를 선택합니다. 1. 전체 선택자 "*" 해당 요소의 모든 자식, 자손 요소를 선택하는 선택자 입니다. @charset "ut..

css 적용방식은 3가지가 있습니다. 적용 방식을 알아보기 위해 일단 2가지 css 속성을 알려 드리겠습니다. background-color : green; 해당 요소의 배경색을 설정합니다. color : white; 해당 요소의 글자 색을 설정합니다. css 속성과 값에 대해서는 적용 방식을 알아본 후에 차근 차근 설명 드리도록 하겠습니다. 일단은 배경색을 초록색으로 지정하고 글자색은 하얀색으로 지정했다는 것만 알아두시고 아래 내용을 봐주세요 1. 인라인 스타일 적용 방식 인라인 스타일(inline style) 방식은 html 태그 요소에 style 속성을 이용하여 css를 태그 요소의 속성처럼 사용하는 방식입니다. css 적용방법 1. 인라인 스타일 방식 인라인 스타일(inline style) 방식은..

웹문서를 제작하는 단계는 크게 세가지로 구분할 수 있습니다. HTML 삽입 미리보기할 수 없는 소스 이 세가지는 웹문서의 제작의 이해를 위해 알고 있으면 무슨 작업을 해야할지 도움이 되리라 생각됩니다. 가장 먼저 진행하는 작업은 구조입니다. html 태그를 이용해 문서를 만들고 마크업 하는 것이 이것에 해당합니다. 다음 작업은 표현입니다. 마크업된 html 요소에 크기를 정하고 색상을 입혀 꾸미는 작업을 하는 것입니다. 바로 이작업을 css가 담당하게 됩니다. 그리고 최종적으로 동작을 제어하는 작업입니다. 마우스를 요소 위로 올린다건가 클릭한다건가 자동으로 사라지는 애니메이션을 작동 시킨다던가 하는 움직임이 들어가는 작업이 이것에 해당합니다. 이것을 담당하는 것은 자바스크립트입니다. 사실 위 세가지 방식..