선택n집중

선택자의 우선순위 지난번의 스타일 우선순위를 알아보았다. 선택자의 우선순위도 같이 본다면 , 이해하기에 도움이 될듯 하다. !important > 인라인스타일 > id 선택자 > 클래스 선택자 > 태그 선택자 > 범용 선택자 일반적인 선택자 우선순위는 계층이 동일한 경우 위에 명시된 순서로 우선 순위가 적용된다. 상속계층간에서의 스타일 적용은 계층이 다를 경우 , 일반적인 선택자 우선순위가 무시되고 , 가장 가깝고 명시적 표현이 우선 적용 된다. important는 특별한 경우 ( 다른 사용자의 스타일 코드를 차용하여 수정이 필요한 경우) 를 제외하고는 사용을 지양할 것. CSS Priority CSS priority settings!! 범용 선택자 스타일 우선 적용!! Complete!! CSS pri..

속성선택자 지정된 속성 또는 value 에 의해 요소를 결정하여 스타일링 적용. 사실 쓰는 것은 자제 하는 것이 좋다. 모든 태그들을 검색해서 진행하기 때문에 로딩속도가 느리다는 단점이 있다. [속성A] /* id 속성을 가진 요소. */ [id] { background-color: bisque; } /* input 태그 중 id 속성을 가진 요소. */ input[id] { font-weight: bold; } /* id 속성이 value 인 요소. */ [id=lg] { /* Emmet 기능 적용시와 동일하게 value 에 문자열 구분자 생략 가능 */ list-style: none; } /* value 가 디폴트로 설정된 값이 있다하더라도 명시적 지정이 되어 있지 않으면 미적용. */ [target..

많은 이미지와 영상등을 사용하다 보면 , 용량이 부담스러울 수 있다. 이를 기반하여 폰트 기반의 아이콘을 제공하는 사이트를 소개한다. 사용 방법을 자세히 알아보겠다. https://fontawesome.com/ 코드가 하나 뜰텐데, 이를 복사하여 head 내의 style 태그 바로 위에 붙여넣기를 하자. 사용할 태그 선택자 내에 content : "복사붙여넣기"; font:var(--fa-font-solid); 를 추가한다면 완성된다. 폰트를 기반으로 하였기 때문에 , 사이즈 조절은 font-size를 이용하면 된다.

가상 클래스 선택자 선택자에 의해 지정된 요소가 특정 상태일때, 스타일링 적용. 가상이라 함은 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 식별자가 ..