태그 폼의 범위를 지정한다. - action 속성 : 실행 어플리케이션을 지정 - name 속성 : 폼의 이름을 지정 - method 속성 : 클라이언트와 서버 간 데이터를 주고받기 위한 전송방식을 지정 get : 주소창에 데이터가 표시되어 보안이 취약하며, 용량 제한이 있다. 재실행 및 즐겨찾기 가능 (default) post : get방식 보다 안전하며, 용량 제한이 없다. 재실행 및 즐겨찾기 불가능 태그 데이터 입력이나 편집을 위한 컨트롤이 위치하는 곳 종료 태그가 없는 빈 요소 - type 속성 button : 버튼 (푸시 버튼으로 기본 기능이 없다) checkbox : 체크박스 (선택/해제 가능한 체크박스로 중복 선택 가능) radio : 라디오 버튼 (여러항목 중 한가지만 선택가능하다) ran..

태그 영상파일을 삽입하는 요소 브라우저가 모든 비디오 파일 형식을 지원하는 것은 아니므로 표준 형식의 비디오 파일을 사용해야 한다. - poster 속성 : 비디오의 썸네일 이미지를 지정한다. (이 속성을 지정하지 않으면 비디오 파일의 첫 번째 프레임을 이미지로 보여준다) - width 속성 : 비디오의 가로사이즈 지정 - height 속성 : 비디오의 세로 사이즈 지정 - muted 속성 : 음소거 설정 - loop 속성 : 반복 재생 설정 - controls 속성 : 비디오의 제어 컨트롤을 표시 - preload 속성 : 비디오 파일의 사전 로딩을 지정 auto : 문서 로딩과 동시에 비디오 파일을 로딩시킬 때 metadata : 문서 로딩 시 메타데이터만 로딩 none : 문서 로딩 시 비디오 파일..

태그 문서에 이미지를 삽입하는 요소 종료 태그가 없는 빈 요소 - src 속성 : 이미지 소스를 지정하는 속성으로 소스파일의 위치를 URL형식으로 입력한다. (절대경로 or 상대경로) - alt 속성 : 이미지의 대체 텍스트를 지정한다. (사용자가 이미지를 볼 수 없는 경우 대체 텍스트로 표시되므로 입력 권장) - width 속성 : 이미지의 가로 사이즈 지정 - height 속성 : 이미지의 세로 사이즈 지정 - usemap 속성 : 요소와 연결할 이미지맵을 지정한다. (#맵이름) (좌) 이미지가 제대로 표시된 경우 / (우) 이미지를 불러올 수 없어 대체 텍스트로 표시된 경우 태그 이미지맵 요소로 이미지 위의 도면 역할을 한다. 요소와 요소를 연결시키는 요소 - name 속성 : 요소의 이름을 지정하..

태그 앵커(anchor,닻) 요소 다른 문서로 연결하거나 같은 문서 내의 다른 지점으로 연결하는 용도로 사용된다. 요소의 컨텐츠는 링크 목적지에 대한 설명을 입력한다. (링크텍스트) 파란색 글자에 밑줄이 기본 스타일이며, 이미 한번 방문했던 링크텍스트는 보라색으로 표시된다. - href 속성 : 링크의 목적지를 지정하는 속성으로 요소가 하이퍼링크 기능을 수행하기 위해 반드시 필요하다 절대 경로 : 전체 웹 주소 "http://www.example.com" 상대 경로 : 로컬 경로 "example.html" (같은 폴더에 있는 파일은 파일명을 입력, 같은 폴더에 있는 다른 폴더의 위치는 "폴더명/파일명" 입력, 상위 폴더는 "../"로 표현) 같은 문서의 다른 지점 : id값 "#example" 빈 링크 ..

column-count 요소를 몇 개의 열로 분할할 것인지 지정하는 속성 column은 분할한 열 1개를 뜻한다. column-width column의 최소 너비를 지정하는 속성 column-count 속성을 지정하지 않으면 부모 요소를 기준으로 지정한 최소 너비에 맞춰 최대 개수의 열을 만든다. columns column의 최소 너비와 최대 개수를 한 번에 지정하는 속성 columns : column-width column-count; column-gap column 사이의 간격(여백)을 지정하는 속성 column-rule column 사이에 선을 지정하는 속성 width와 style은 필수로 지정해주어야 하며, color는 지정하지 않을 경우 텍스트 색상으로 적용된다. width, style, col..

clip-path 요소의 클리핑 범위를 지정하는 속성 클리핑 범위 안의 부분은 보여주고, 바깥 부분은 숨겨준다. - 속성 값 inset(상 우 하 좌 round border-radius) : 사각형/입력한 값만 큼 사각형의 범위가 안으로 줄어든다. circle(반지름 at position) : 원/position값을 중심으로 반지름 값만큼 원의 범위가 생성된다. ellipse(x반지름 y반지름 at position) : 타원/position값을 중심으로 각각의 반지름 값만큼 타원의 범위가 생성된다. polygon(x1 y1, x2 y2, x3 y3…) : 다각형/각각의 위치 값에 꼭짓점을 찍어 다각형 범위가 생성된다. url(SVG경로) : SVG파일/SVG파일의 형태대로 범위가 생성된다. 더보기 ※ p..

content ::before와 ::after 가상 요소에 콘텐츠를 삽입하기 위한 속성 공백(space)으로 구분하여 여러 가지 값을 삽입할 수 있다. - 속성 값 "문자열" : 큰따옴표로 묶어 문자열을 삽입 attr(속성 이름) : 괄호 내에 속성 이름을 입력하여 해당 속성의 속성 값을 삽입 url(경로) : 괄호 내에 경로를 입력하여 미디어를 삽입 (미디어 크기 조절 불가능) counter(카운터 id) : 괄호 내에 생성한 카운터의 id를 입력하여 해당 카운터의 값을 삽입 open-quote, close-quote : 큰 따옴표를 삽입 (여는 따옴표 없이는 닫는 따옴표를 사용할 수 없다) no-open-quote, no-close-quote : 삽입했던 큰 따옴표를 제거 HTML CSS JavaSc..

counter-reset 카운터를 생성하거나 재설정하는 속성 카운터는 요소가 발생할 때마다 숫자가 일정하게 증가하거나 감소하는 변수를 뜻한다. 카운터의 id와 재설정값을 속성 값으로 사용한다. 재설정값의 기본값은 0이며, 카운트 시작 시 다음 숫자부터 시작한다. 재설정값은 정수만 사용할 수 있다. selector { counter-reset: counter-id reset-number; } counter-increment 카운터의 값을 지정한 값만큼 증가시키거나 감소시키는 속성 counter-reset 속성으로 생성한 카운터의 id와 증가 값을 속성 값으로 사용한다. 카운터 증가 값의 기본값은 1이다. 카운터 증가 값은 정수만 사용할 수 있다. selector { counter-increment: cou..