분류 전체보기

[CSS] 가상 클래스 선택자(Psudo-Classes Selectors)

기본선택자에 붙여서 선택하는 개념. 가상 클래스 선택자앞에는 콜론기호(:)가 1개 붙는다! hover : E(기본선택자)에 마우스(포인터)까 올라가 있는 동안에만 E선택 E:hover transition 을 넣어주면 자연스럽게 요소가 바뀌는 애니메이션 효과가 적용된다. active : E를 마우스로 클릭하는동안에만 E선택 E:active focus : E가 포커스 된 동안에만 E 선택 *대화형 콘텐츠에서 사용가능 ex) input, img, tabindex E:focus first-child : E가 형제 요소 중 첫번째 요소라면 선택 E:first-child last-child : E가 형제 요소 중 마지막 요소라면 선택 E:last-child nth-child : E가 형제 요소 중 n번째 요소라면 ..

[CSS] 기본 선택자와 복합선택자

기본 선택자 1. 전체 선택자(Universal Selector) : 모든 요소를 선택 *{ color:red; } 2. 태그 선택자(Type Selector) : 태그이름이 ~~인 요소 선택 li{ color: red; } 3. 클래스 선택자(Class Selector) : HTML 태그의 class 속성의 값이 ~~인 요소 선택 .orange{ color: red; } 4. 아이디 선택자(ID Selector) : HTML id 속성의값이 ~~인 요소 선택 #orange{ color: red; } 복합선택자 1. 일치 선택자(Basic Combinator) : 두 가지 조건을 동시에 만족하는 요소 선택 span.orange{/*일치 선택자, span태그의 orange 클래스*/ color:red; }..

[CSS] 기본 문법

선택자{ 속성: 속성값, 속성: 속성값; } 선택자(Selector)로 속성과 값을 지정할 대상을 검색 속성과 값의 역할 : 검색된 대상에 지정될 CSS 명령 /* 주석 쓰는 방법*/ CSS 선언 방식 인라인(in-line) 방식 : HTML 요소(태그)의 'style'속성에 직접 작성(선택자 필요X) 내장(embedded) 방식 : HTML 안에 작성 링크(link) 방식 : HTML에서 를 이용하여 외부 문서로 CSS를 불러와 적용(강사님이 추천) *병렬방식호출 @import 방식 : CSS에서 @import를 이용하여 외부 문서로 CSS를 불러와 적용 *직렬방식호출이므로 주의(1번 호출이 끝나야 2번 호출이 가능) @import url("./common2.css");

[HTML] 특수기호 출력

가장 많이 쓰이는 특수기호만

[HTML] 전역 속성

전역속성(Global Attributes) 모든 HTML 요소에서 사용가능한 속성 속성 class : 요소의 별칭(여러 개 중복 가능) *CSS/JS에서의 요소선택기 속성 id : 문서에서 고유한 식별자 *CSS/JS에서의 요소선택기 속성 style : 요소에 적용할 CSS 인라인 방식 선언 속성 title : 요소의 설명 지정(마우스 올렸을 때 작게 뜬다) 굉장히 많이 사용된다 속성 lang : 요소의 언어 지정(한 사이트에서 lang 속성은 html에서 하나만 선언하는게 일반적) 속성 data-* : 사용자 정의 데이터 속성 지정. JS에서 이용할 수 있는 데이터를 HTML에 저장하는 용도 스타일 제목2 Google DIV Yujinss 속성 draggable : 요소가 Drag and Drop AP..

[HTML] 양식

입력받은 정보를 웹 서버로 제출 속성 action : 전송받은 정보를 처리할 URL 속성 autocomplete : 이전에 입력된 값으로 자동처리 할지 여부(자동완성기능) 속성 method : 서버로 전송할 HTTP 방식 ex)GET(default)/POST 속성 novalidate : input type form의 유효성검사를 하지 않는다. (특수 상황이나 test 할때 많이 사용) ex) 이메일의 경우 @ . 이 들어가는 양식인지 검사함 속성 name : 브라우저가 인식할 form 이름 속성 target : 서버로부터 응답받을 방식 지정(현재 탭/새로운 탭) 사용자에게 입력받을 양식 속성 autofocus : 페이지가 로드되자마자 자동포커스 속성 autocomplete : 이전에 입력된 값으로 자동처..

[HTML] 표 콘텐츠

표 영역 설정 table row 줄을 먼저만든다 talbe header 머리글 칸을 만든다 속성 abbr :abbreviation(약어)의 약어. 간단한 설명 속성 headers :자신의 상위 header의 id를 명시해서 연결함. 종속관계 설정 속성 colspan : 현재 위치에서 셀 병합 수 (수평) 속성 rowspan : 현재 위치에서 줄 병합 수 (수직) 속성 scope : 누구의 머리글인지 명시 예제 데이터 타입 값 알파벳 A 숫자 7 table data 칸을 만든다 속성 headers :자신의 상위 header의 id를 명시해서 연결함. 종속관계 설정 속성 colspan : 현재 위치에서 셀 병합 수 (수평) 속성 rowspan : 현재 위치에서 줄 병합 수 (수직) 시각적으로 표현하는 데에 ..