Amazing Story

4. Box model(박스모델) - CSS가 HTML문서를 제어할 때 사용하는 기본단위는 Element이며 이때 요소를 네모상자(box)로 취급하여 모든 스타일의 기본 속성(1) 박스모델의 종류1) width, height → content 크기2) padding → 테두리와 콘텐츠와의 여백3) margin → 테두리 바깥쪽 여백4) border → 요소의 테두리5) background (2) 모든 브라우저는 사용자가 스타일을 적용하지 않더라도 기본값(초기값)이 적용된 상태- 여백을 최소화(0으로 셋팅)- margin, padding → 0으로 셋팅- border → 일부요소를 제외하고 테두리값은 없음 (참고1) 크롬(chrome) 브라우저 이용하기- 해당요소에서 마우스 우클릭(또는 F12)하여 검사-..

3. 스타일 겹침과 우선순위(1) 스타일 겹침- 스타일 겹침은 같은 요소로 동일한 선택자로 서로 다른 값이 적용될 경우 가장 마지막에 적용된 값이 우선한다.(2) 스타일 우선순위- 스타일 우선순위는 서로 다른 선택자로 같은 요소에 스타일을 적용할 경우 우선순위에 의해서 스타일이 적용되며 작성순서는 무시된다.1) 인라인 스타일2) 아이디 선택자3) 클래스 선택자4) 요소 선택자(3) 스타일 겹침과 우선순위 무시하고 스타일 적용하기- 스타일 겹침과 우선순위 무시하고 특정 스타일 값을 항상 적용하고자 할 때는 스타일 값 작성 후에 !important 를 써주면 된다.- 작성 방법 : 선택자{속성 : 값 !important;} ■ 예시 123456789101112131415161718192021222324252..

(7) 조합 선택자- 조합 선택자는 기본선택자 2개 이상을 한 번에 사용하는 선택자1) 조합 선택자의 종류- 그룹 선택자- 자식 선택자- 자손(하위) 선택자- 인접 형제 선택자2) 그룹 선택자- 그룹 선택자는 서로 다른 선택자가 같은 스타일을 적용할 경우 개별작성하지않고, 선택자를 콤마(,)로 연결하여 한 번에 스타일을 적용하는 방법 ■ 그룹 선택자 사용시, 선택자와 선택자는 콤마(,)로 연결하여 다음과 같이 작성→ 선택자1, 선택자2, 선택자3{} 12345678910111213141516171819202122조합 선택자 /* 그룹 선택자 */ .a1, .a2{color : #f00;} .a3, .a4, .a5, .a6, .a7{font-size : 20px;} .a1, .a2, .a3, .a4, .a..

(5) 가상클래스- 가상클래스 : 가상클래스는 요소의 이벤트에 대응하기 위하여 미리 만들어 놓은 클래스다1) 가상클래스의 종류- link : 하이퍼링크가 적용된 요소- visited : 링크 요소를 한 번 이상 방문한 요소- hover : 요소에 마우스가 올라간 상태- active : 링크 요소가 활성화된 상태 / 마우스가 누르고 있을 때- focus : 폼요소가 선택된 상태, 입력대기모드 2) 사용법- 선택자로 사용시 요소명 :가상클래스이름과 같이 사용한다.- 선택자로 사용시 요소명 대신에 아이디 또는 클래스 선택자가 올 수 있다.3) 사용 예제 12345678910111213141516171819202122가상클래스 /* 가상 클래스 */ a:link{color: #000;} .visited:visi..

2. 선택자(Selector)- 선택자란 내부, 외부 스타일에서 CSS가 HTML요소를 선택하기 위한 수단 ■ 선택자의 종류 1) 기본 선택자 - 전체 선택자 - 요소 선택자 - id 선택자 - class 선택자 - 가상 클래스 - 가상 요소 2) 조합 선택자 - 그룹 선택자 - 자식 선택자 - 하위(자손) 선택자 - 인접 형제 선택자 (1) 전체 선택자 - 전체 선택자는 문서의 모든 요소를 선택할 때 사용하고 선택자로 *를 사용한다. 123456789101112 (2) 요소 선택자 - 요소 선택자는 문서의 특정요소를 선택자로 요소명을 사용한다. - 요소 선택자 사용시 문서의 지정된 요소는 모두 선택된다. (3) id 선택자- 요소에 id속성, id이름을 생성하고 id이름을 선택자로 사용한다.- id이름..

1. 스타일이란?스타일이란 HTML요소를 디자인하기 위한 개념이며 이때 언어는 CSS를 사용한다.CSS는 HTML요소를 디자인하기 위한 언어. CSS는 레벨1, 레벨2, 레벨3까지 나와있으나 레벨3은 완성이 아님.CSS 레벨2는 현재 모든 브라우저가 정상 지원하며 CSS3는 브라우저마다 지원상태가 다를 수 있다. 브라우저간 CSS값을 화면에 표시할 때 100% 똑같이 표현하지 않으며, 모든 브라우저별로 다르다. 이를 똑같은 결과값을 만들어내는 작업이 크로스 브라우징이라 한다.( 가장 까다로움) 사용자가 스타일을 사용하지 않을 때 모든 브라우저에는 스타일 초기값이 셋팅되어 HTML 요소를 화면에 표시한다. CSS는 독립언어가 아니며 HTML 문서 안에서만 동작하는 의존언어다. (1) HTML요소에서 스타일..