Transition : CSS 속성의 전환 효과를 지정(전환 효과)하여 중간 값을 애니메이션 값 의미 기본값 transition-property 전환 효과를 사용할 속성 이름 all transition-duration 전환 효과의 지속시간 설정 0s transition-timing-function 타이밍 함수 지정(https://www.w3schools.com/cssref/css3_pr_transition-timing-function.aspst) ease transition-delay 전환 효과의 대기시간 설정 0s Transform : 요소의 변환 효과(변형)를 지정 transform: 변환함수1 변환함수2 변환함수3...; transform: 원근법 이동 크기 회전 기울임; .box { transfo..
background :요소의 배경을 설정 속성 값 값 의미 요소 기본값 background-color 배경 색상 transparent background-image 하나 이상의 배경 이미지 none, url("경로") none background-repeat 배경 이미지의 반복 repeat, repeat-x(수평), repeat-y(수직), no-repeat repeat background-position 배경 이미지의 위치 %, 방향(top, left, right, bottom), 단위 0 0 background-attachment 배경 이미지의 스크롤 여부(특성) scroll 사용법 background : 색상 이미지경로 반복 위치 스크롤특성; .box1 { background: red url("....
float : 요소를 좌우 방향으로 띄움(수평 정렬) > CS3에서 float을 대체하는 flexbox를 이용 속성 값 값 의미 기본값 none 요소 띄움 없음 none left 왼쪽으로 띄움 right 오른쪽으로 띄움 사용법 float : 방향; 단순 띄움 요소는 일반적으로 수직으로 쌓이는 개념인데, 요소에 float 속성을 적용하면, 적용된 요소 주변으로 문자(text)가 흐르게 됨 단순 해제 clear: left / right; 수평 정렬 각 요소에 float 속성이 적용되면 차례로 정렬됨 정렬 해제 clear : both(left/right 사용 안해도 됨) 사용 >> 요소가 부유하다보니 새로운 요소를 추가하면 겹쳐짐 clear를 사용 하면 float 다음부터 수직으로 쌓임 float 해제 flo..
선택자 { 속성 : 속성값; 속성 : 속성값; } 선택자(Selector)의 역할 - 속성과 값을 지정할 대상을 검색 선언방식 내장(embeded) 방식 - HTML 안에 작성하는 방식 링크(link) 방식 - HTML 이용해 외부 문서를 CSS로 불러와 적용하는 방식 - 동시에 불러옴. 병렬 방식 인라인(in-line) 방식 HTML 요소(태그)의 'style' 속성에 직접 작성하는 방식 @(at 규칙)import 방식 - CSS @import를 이용해 외부 문서로 CSS를 불러와 적용하는 방식 - 직렬 호출 방식 선택자(Selector) 전체 선택자 - (요소 내부의) 모든 요소를 선택 - ' * ' * { color: red; } 태그 선택자(Type Selector) - 태그이름이 E인 요소 선택..
CSS 초기화 : 브라우저에 따라서 나오는 모양이 각각 다르기 때문에 동일하게 만들기 위해 사용 => reset.css 라이브러리를 통해 초기화 주소 www.jsdelivr.com/package/npm/reset-css jsDelivr - A free, fast, and reliable CDN for Open Source Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 billion requests per month. Built for production use. www.jsdelivr.com 사용시 내가 작성한 CSS보다 위쪽에 작성..
전역속성(Global Attributes) 모든 HTML 요소에서 공통적으로 사용 가능한 속성. class 공백으로 구분된 요소의 별칭을 지정(중복 가능) => 별명 설정 CSS 혹은 JS의 요소 선택기(CSS선택자(., #)나 GetElementsByClassName, QuerySelectorAll 같은)를 통해 요소를 선택하거나 접근 id 문서에서 고유한 식별자(identifier, ID)를 정의 => 이름 설정 CSS 혹은 JS의 요소 선택기(CSS선택자(., #)나 GetElementsByClassName, QuerySelectorAll 같은)를 통해 요소를 선택하거나 접근 style 요소에 적용할 css 선언 CSS인라인 작성방식 title 요소의 정보(설명)을 지정 마우스 오버 했을 때 팁으로..
, , , 데이터 표(table)의 행(줄, tr), 열(칸, th(제목), td) 생성 테이블 POST 사용 POST 사용시 form data(양식 데이터)에서 확인됨 -> 완벽하게 숨길 수 없어서 암호화 해서 전송함 사용자에게 입력받을 데이터 양식 빈태그 속성 의미 값 기본값 특징 autocomplete 사용자가 이전에 입력한 값으로 자동 완성 기능 사용할 것인지 여부 on, off on autofocus 페이지가 로드될 때 자동으로 포커스 boolean 문서 내 고유해야 함 checked 양식이 선택되었음 표시 boolean type 속성 값이 radio, checkbox인 경우만 form 의 id 속성값 해당 의 후손이 아닐 경우만 name 양식의 이름 _self, _blank _self type..