이미지 버튼(image button) 버튼 태그의 배경에 이미지를 포함 HTML CSS input.img-button { background: url("https://i.ibb.co/3493r17/cat.jpg") no-repeat; width: 180px; height: 180px; } background: url() : 버튼 배경 이미지의 경로 no-repeat; : 배경 이미지를 반복하지 않음 width: 배경 이미지의 너비 height: 배경 이미지의 높이
HTML, CSS
HTML 버튼 버튼의 종류(button type) 버튼 타입 설명 button 버튼 형태를 만들며 자체기능은 없습니다. onClick 메서드를 활용하여 특정 액션을 취하는 기능을 넣을 수 있습니다. submit 폼(form)에서 입력받은 데이터들을 서버로 전송합니다. reset 폼(form)에서 입력받은 데이터들을 초기화 시킵니다. 첫 번째 방법 (input type = "button") type: 버튼의 유형을 지정합니다. submit, reset, button 중 하나의 값을 가질 수 있습니다. value: 버튼의 텍스트 값을 지정합니다. disabled: 버튼을 비활성화시킵니다. 두 번째 방법 ( 태그 사용) type: 버튼의 유형을 지정합니다. submit, reset, button 중 하나의 값..
체크박스 name : 체크박스가 여러개 있을 경우 폼태그에서 체크박스를 구분하기 위한 이름을 지정합니다. value : 선택한 체크박스들이 선택되었을 때 서버로 넘길 값을 선택합니다. 이 값은 필수 속성입니다. Option 1 Option 2 Option 3 기본 선택 checked 속성 checked : 체크박스의 항목들은 처음에 아무것도 선택되어 있지 않은 상태로 화면에 표시되는데 기본으로 선택해 놓을 항목을 지정하고 싶다면 이 checked 속성을 사용하면 됩니다. Option 1 Option 2 Option 3 Submit과 Reset 버튼 Option 1 Option 2 Option 3 submit : 폼에 있는 데이터를 서버로 전송합니다. reset : 폼에 있는 데이터를 초기화합니다.
라디오 버튼 name : 라디오 버튼이 여러개 있을 경우 폼태그에서 라디오 버튼을 구분하기 위한 이름을 지정합니다. 라디오 버튼은 여러 개 중에서 하나만 선택하는 것이기 때문에 관련 있는 그룹끼리는 name 속성 값을 똑같이 만들어야 합니다. value : 선택한 라디오 버튼이 선택되었을 때 서버로 넘길 값을 선택합니다. 이 값은 필수 속성입니다. Option 1 Option 2 Option 3 기본 선택 checked 속성 checked : 라디오 버튼의 항목들은 처음에 아무것도 선택되어 있지 않은 상태로 화면에 표시되는데 기본으로 선택해놓을 항목을 지정하고 싶다면 이 checked 속성을 사용하면 됩니다. option1 option2 option3 Submit과 Reset 버튼 man woman su..
HTML 주석 사용법 HTML의 주석은 와 같은 형식으로 작성하시면 됩니다. HTML 주석 사용 예시 HTML 주석 예시입니다. HTML 주석 단축키 Visual Studio 주석 단축키 Ctrl + K + C : 주석 지정 Ctrl + K + U : 주석 해제 Visual Studio Code 주석 단축키 Ctrl + / : 한줄 주석 처리 / 해제 Ctrl + K + C : 주석 지정 Ctrl + K + U : 주석 해제 Eclipse 주석 단축키 Ctrl + Shift + / : 블록을 주석으로 처리 Ctrl + Shift + / : 블록 주석을 해제 Ctrl + / : 한줄 주석 처리 / 해제 Codepen 주석 단축키 Ctrl + / : 주석 지정 Ctrl + / : 주석 해제
요소 테두리(border) 설정 border 속성은 요소에 테두리를 추가하는 데 사용됩니다. border 사용 예제 동해물과 백두산이 마르고 닳도록 테두리 스타일(border-style) none : 테두리가 나타나지 않으며 기본값입니다. hidden : 모든 테두리를 감춥니다. solid : 테두리가 실선으로 표시됩니다. double : 테두리가 이중선(겹선)으로 표시됩니다. groove : 테두리 선이 입체적으로 표시됩니다. ridge : groove의 음영값이 반대로 표시됩니다. inset : 테두리 요소가 안으로 표시됩니다. outset : 테두리 요소가 밖으로 표시됩니다. dashed : 테두리가 바느질선으로 표시됩니다. dotted : 테두리가 점선으로 표시됩니다. 테두리 두께(border-w..
배경 이미지 지정(background-image) body {background-image : url('이미지 URL');} #area {background-image : url('이미지 URL');} .area {background-image : url('이미지 URL');} 배경 이미지 반복(background-repeat) background-repeat : repeat : 화면에 가득 찰 때까지 배경 이미지를 반복합니다. background-repeat : repeat-x : 화면에 가득 찰 때까지 배경 이미지를 가로로 반복합니다. background-repeat : repeat-y : 화면에 가득 찰 때까지 배경 이미지를 세로로 반복합니다. background-repeat : no-repeat ..
배경색 지정하기(background-color) background-color:#000000; (HAX코드 16진수 사용) background-color:rgb(0,0,0); (RGB 코드 사용) background-color:rgba(0,0,0,0); (RGBA 코드 사용) background-color:balck; (키워드 사용) 예제 배경을 빨간색으로 지정합니다. 각 요소에 background-color 설정하기 HTML 배경 빨간색 배경 초록색 배경 파란색 CSS .d1{background-color:red} .d2{background-color:rgb(0,255,0)} .d3{background-color:#0000FF} 배경 적용 범위 조절하기 (background-clip) HTML bord..
