본문 바로가기

Front-End22

CSS 색상, 단위 CSS 색상표현 1. 정의된 색상 이름 사용하기 예) background-color: tomato color: white; aqua, brown, black 등 정해진 이름을 쓰면 사용이 가능하다. 더 많은 정의된 색상의 이름을 알고 싶다면 아래 링크에서 확인하기 HTML Color Names W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 2. RGB 빛의 삼원색(빨강,.. 2023. 3. 31.
HTML - input 태그 속성 값 value : 입력 칸 초기값 지정 이름을 입력하세요: readonly : 읽기 전용 읽기 전용 입력 칸은 수정할 수 없으나, 마우스로 글자를 탭 하거나 텍스트를 복사할 수 있다. 양식을 제출할 때 읽기 전용 입력 필드의 값이 전송된다! 이름: disabled : 입력 칸 비활성화 비활성화된 입력 필드는 사용할 수 없으며 클릭할 수 없다. 비활성화된 입력 필드의 값은 양식을 제출할 때 전송되지 않는다! 성: 이름: size : 입력 칸의 표시 너비(문자)를 지정, 기본값은 size 20 (알파벳 기준) 참고: size는 text, search, tel, url, email, password에서 작동한다. 주소: 우편번호: maxlength : 입력 칸에 허용되는 최대 문자 수를 지정 (알파벳, 숫자 기준.. 2023. 3. 31.
HTML 태그 - input type ※ 예제로 작성된 부분의 id와 name, label for 부분은 DB, 서버로 넘어갈 때 필요한 요소로 연습 시에는 생략가능 기본값 : 한 줄 텍스트 입력 칸 이름: 성: : 암호 입력칸(입력 시 보통 동그라미 형태로 가려져서 출력) 사용자이름: 비밀번호: : 버튼 : 서버에 form 데이터를 제출하기 위한 버튼을 정의 (DB와 연관된 부분) 이름: 성: : 모든 양식 값을 기본값으로 재설정하는 재설정 버튼(초기화) 이름: 성: : 라디오 버튼, 하나만 선택 가능 위의 HTML 코드가 브라우저에 표시되는 방식은 다음과 같습니다. HTML CSS 자바스크립트 : 확인란, 다중 선택 가능 위의 HTML 코드가 브라우저에 표시되는 방식은 다음과 같습니다. 자전거 자동차 비행기 : 숫자칸, 칸옆에 자동적으로.. 2023. 3. 11.
HTML 태그 - form 2 (form 태그 안에 사용하는 태그) 가장 많이 사용하는 유형, 따로 게시! 여러 양식 요소에 대한 레이블을 정의, 스크린 리더 사용 시 입력 요소에 포커스를 둘 때 라벨을 소리내어 읽어준다. 드롭 다운 목록을 정의한다. Choose a fruit: apple banana peach melon 속성 값 selected 기본적으로 드롭다운 목록의 첫 번째 항목이 선택되는데, 위의 예시에서는 apple 이 기본값, 처음에 보여주는 값을 정의하려면 보여주고 싶은 항목에 selected속성을 추가하면 됩니다. Choose a fruit: apple banana peach melon size 표시되는 값의 수를 지정한다. Choose a fruit: apple banana peach melon 여러 줄 입력 필드(텍스트 영역)를 말한다. 우리집 강아.. 2023. 3. 8.
CSS 구문(형식), 주석, 스타일 시트 CSS 구문(형식) CSS의 구문(형식)은 선택자와 선언 블록으로 구성된다. 선택자 { 속성:속성값} 선택자는 스타일을 지정할 HTML 요소를 가리키며, 선언 블록에는 선택자에 어떤 속성을 부여할 것인지 속성 이름과, 속성값은 무엇을 줄 것인지 선언한다. 선택자 { 속성1:속성값1; 속성2:속성값2; } 여러 CSS 선언은 세미콜론으로 구분되며, 선언 블록은 중괄호로 묶는다. 예) 선택자 { 속성1:속성값1; 속성2:속성값2; } p { color:red; text-align:center; } 선택자는 p 속성은 color, text-align 속성값은 red, center p는 CSS의 선택자(스타일을 지정하려는 HTML 요소를 가리킴: ). color는 속성이고 red속성 값 text-align는 속.. 2023. 2. 24.
HTML 태그 - form 사용자 입력을 위한 HTML 양식을 만드는 데 사용된다. 사용자 입력을 수집하는 데 사용된다. 사용자 입력은 대부분 처리를 위해 서버로 전송된다. 서버로 넘기는 영역까지가 form의 역할 form은 텍스트 필드, 확인란, 라디오 버튼, 제출 버튼 등과 같은 다양한 유형의 입력 요소에 대한 컨테이너이다. . form elements . 태그의 속성 action 양식이 제출될 때 수행할 작업을 정의한다. 일반적으로 사용자가 제출 버튼을 클릭하면 양식 데이터가 서버의 파일로 전송된다.(back-end 영역) 전송처리 관련 기술 : php, asp, jsp 등 예> 제출할 때 양식 데이터를 "action_page.php"(임의로 지정)로 보낸다. . form elements . method 양식 데이터를 제출할.. 2023. 2. 21.