선택n집중

가상 클래스 선택자 선택자에 의해 지정된 요소가 특정 상태일때, 스타일링 적용. 가상이라 함은 HTML 코드가 실제 존재하지 않는 상태에서 지정함을 의미한다. :hover 지정된 요소에 마우스 포인터를 올리면 스타일링 적용. h1:hover { background-color: aqua; } form button:hover { color: red; } form:hover label { font-style: italic; font-weight: bold; } :focus 링크 , 입력상자 , 버튼 등 마우스나 TAB 키로 포커스가 맺혔을 때 스타일링 적용. 손이나 팔이 불편한 사람들을 위해 TAB 키로 포커스를 맞출 수 있는 기능이 제공이 되는데 , 이상태를 규정함으로 사용자들에게 편의를 제공하는 태그. a..

두개 이상의 선택자를 결합하여 특정 요소를 선택하는데 사용된다. 그룹핑(Grouping) 선택자들을 그룹화 하여 공통 스타일을 적용하여 중복된 스타일을 제거함. 같은 속성을 지닌 선택자가 발생했다면 , 그룹핑을 이용해 중복된 스타일을 제거할 수 있다. A , B → A,B 태그에 적용 A , B , D → A,B,D 태그에 적용 인접형제 결합자 부모가 동일한 형제 요소에 대하여 + 결합자 이후 최종 형제 요소에 스타일 적용. 형제 요소의 명칭이나 순서가 일치해야만 적용됨 . ★ 최종 우변 형제 요소에만 스타일 적용 ★ A+B → B 태그에 적용 A+B+C → C 태그에 적용 h2+h3+h3 { color: red; } dt+dd { color: blue; } h1+h2 { color: green; 일반 ..

정의와 특성 - 스타일을 미리 정의하여 호출한다. Style sheet 언어. 코드 유지 보수와 웹페이지 로딩 향상에 도움을 준다. 사용법 head 안쪽에 CSS 파일을 불러올 링크 주소 입력. 연동 됨을 확인 할 수 있다. 링크에 대해서는 herf 를 공부했던 내용을 확인해보자. 선택자란 ? (selector) 크게 태그 선택자 , 클래스 선택자 , id 선택자 3가지를 보도록 하자. 1) 태그 선택자 개별 태그에 대한 속성들을 미리 정의. 형식 : 특정 태그명 { 속성 } 2) 클래스 선택자 하나 이상의 태그에 복수 적용이 가능한 클래스명을 지정함으로 다중 태그를 그룹화하여 해당 태그들의 스타일을 그룹핑하여 적용하는 형식. 특정 태그에 다중 클래스명 지정도 가능하며 , 다중 클래스 선택자 지정도 가능..

인라인 형식의 링크 개별 태그내에 스타일을 지정하는 방식을 말한다. style 속성 내에 내부 속상 값을 : 으로 구분 표기 다른 내부 속성과 구분하기 위해 ; 로 표기 속성해 대한 값은 "" 으로 표기 /* head 내에 스타일 지정 */ Inline Style Sheet 목록 목록 목록 목록 div 폰트사이즈 문단 폰트사이즈 외부링크 CSS HTML 문서 외부에 정의된 CSS 파일 (확장자 : .css) 을 미리 저장해 두고 head 태그 내의 link 태그를 이용하여 css 파일에 정의된 스타일을 호출하여 가져오는 방식. 공통적인 스타일을 그룹화 함으로서 서로 다른 HTML 문서에 동일한 스타일 적용 가능. → 다음 CSS 기초에 대해서 더 자세히 알아보겠다.

select 태그(tag) 콤보 박스나 리스트 박스를 구성하기 위한 태그. option 태그로 구성된다. 콤보박스 - select 태그의 디폴트 값. 리스트 박스 - size 나 multiple 속성 지정시 리시트 박스로 구현. -size : 리스트 박스에 표시될 항목 수 지정. -multple : 목록에 대한 다중 선택 지정. option 태그(tag) select 태그를 구성하는 항목들을 지정 -value : 서버에 전송할 실제 데이터 -selected : 디폴트로 선택되어질 항목 지정. 콤보박스 (디폴트) 이메일 @ 직접입력 daum.net naver.com gmail.com yahoo.com 리스트박스(size 또는 multiple지정시) 선호하는 게임장르 전략시뮬레이션 RPG FPS 슈팅게임 스..

form 태그(tag) 의 정의와 속성 사용자의 의견이나 정보를 알기 위해 입력할 큰 틀을 만들 때 사용. 폼은 입력된 데이터를 한번에 서버로 전송. action : 폼을 전송할 서버 파일 지정. name : 폼을 식별하기 위한 이름, 식별자. 서버에서 식별자는 name 속성만 가능하며, id는 CSS 나 자바스크립트에서 구현 taget : action에서 지정한 파일을 어느 브라우저에 열릴지 지정. method : 폼을 서버에 전송할 http 메소드를 지정 . (get 또는 post, 디폴트 값은 get) (1. get : 소량의 빠른 데이터 전송에 유리하나 보안에 취약 / 2. post : 보안이 필요되는 데이터나 대량의 데이터때 사용) novalidate : form 그룹에 속해 있는 모든 태그 및..

a 태그(tag)의 속성 href : 연결할 주소를 지정한다. taget : 링크 클릭할때에 창을 어떻게 열지 설정한다. title : 해당 링크에 마우스 커서를 올릴 때 도움말 설명을 설정한다. a 태그의 대상은 텍스트 뿐 아니라 브라우저에 허용되는 범위에서 이미지나 문서, 동영상 등 가능. href 의 속성 페이지를 자동 스크롤 할 대상에 id 식별자를 부여하고 링크를 지정할 a 태그의 href 속성 값에 id 선택자 형식으로 지정함으로써 문서의 원하는 위치에 대한 자동 스크롤 가능. ( 자동 스크롤할 위치의 대상 태그에 대하여 id 식별자를 부여하고 링크를 할당할 href 속성의 값에 해당 id 식별자를 id 선택자 형식으로 할당함으로써 링크를 설정한 a 태그의 컨텐트를 클릭했을 때 id 식별자가 ..

table 태그 테이블을 구성하는 최상위 부모태그 tr 태그 하나의 행을 표현 , th,td 태그 등 사용가능 tr의 태그 자식요소는 th td 이외의 태그가 없으나 th, td 이외의 태그가 포함되는것은 무방. td 태그 행을 구성하는 열값을 의미 테이블 테두리선을 임시적으로 지정, CSS에서 더 자세히 공부할 것이다. th 태그 굵고, 가운데 정렬하는 tr태그의 자식태그. 항목값이 아닌 항목을 구분하는 속성명임을 명시함으로 검색 효율을 증대시킴. th 태그의 scope 속성 th 의 속성을 지정함으로서 개별 항목에 대한 또는 열에 대한 방향에 대한 데이터를 대표하는 속성임을 부가적으로 표현함. 행에 대한 방향 데이터를 대표. 열에 대한 방향 데이터를 대표. th, td 의 셀 병합 속성 colspan..

ol 태그 ol 태그는 순번이 있는 글머리 항목. type 와 start 속성 지정이 가능 . 자식으로는 li 태그 , li 이외에 직접 올 수 없으나 li 의 또 자식 태그로 다른 태그 설정가능 li 태그는 기본적으로 들여쓰기가 적용 ul 태그 ul 태그는 순번이 없는 글머리 항목 자식으로는 li, 이외에 직접올 수 없으나 li 의 또다른 자식 태그로 다른 태그 설정 가능 li 태그는 기본적으로 들여쓰기 적용 list으 중첩 , 리스트 하위를 설정하는 경우 li 태그 이외에 다른 태그가 올 수 없음. li 의 자식태그로 다른 태그가 와야함의 주의. dl 태그 용어 또는 주제의 설명 형식으로 주제를 정하고 dd , dt 태그가 자식 태그. 다른 태그는 dd,dt 의 자식 태그로 사용 가능. dd 태그는 ..

-body 문서 내의 각각 영역 세션을 구분하기 위해 사용. 구역들을 나누는 태그. 영역들을 그룹화 하는 목적을 지님. -블럭 레벨 요소 -텍스트에 크기조절 , 좌우간격, 컬러 등 조절에 주로 사용. 영역을 그룹화 하는 목적을 지님. -인라인 레벨 요소 div 의 구체화 ,시멘틱 구조 태그 다수의 동일 div 태그 사용과 중첩으로 인해 코드 가독성이 떨어짐, 이를 보완하기위해 div와 동일한 기능을 하되 영역에 따른 고유한 명칭을 부여함으로 구저적인 가독성과 검색 엔진의 데이터 추출 효율성을 증대시킴. : 페이지나 문서의 상단에 배치하여 주제나 검색, 머리말등을 표시 및 그룹화. : 페이지나 문서의 주요 네비게이션(메뉴) 링크를 그룹화. : 페이지 본문 내용들을 그룹화. : 일반적으로 main 내부나 사..