본문 바로가기

언어46

[입문] HTML CSS -태그정리 (form 소개, label, input, button, select) : 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획 , 회원가입, 주문서 등 ㅡ 자식태그 label , input ,button , select , textarea 등이 있다. * form의 속성인 method 의 값 ㅡ get (입력값이 url 뒤에 붙여서 표시됨, 검색같은거) ㅡ post (요청 본문을 서버에 전송, 입력정보 안보임) * label 과 input 은 세트이다. ( id명 동일하게 ) id로 연결 하는 방법과 음식이름: 제출 label의 자식에 input을 적는 방법 있음. 색깔: 제출 * fieldset 부모(하나로 묶음 박스) > legend 첫번째 자식 (범례) - disable속성 가능 범례1 음식이름: 범례2 음식이름: 음식이름: 제출 * input.. 2024. 1. 9.
응용) CSS (반응형 웹 만들기, 가변성, 단위em,rem,vw,vh) - 반응형 웹이란 : 유저의 웹 브라우저 사이즈에 따라 크기가 유동적으로 맞춰지는 것. - 키포인트 : 가변성 !! 단위 ( px, em, rem, vw, vh , % ) 에 대해 알아보자. - 단위 px : 절대 길이 단위 (가변성x) >>단순히 부모 크기 기준으로 결정. (가변성o) 패딩,마진 값에 em,rem적으면 본인 글꼴크기 기준으로 설정됨. em : 부모 요소의 글꼴 크기 rem : 루트 요소의 글꼴 크기 >>가변단위 : 뷰포트(기준의 100분의 1 크기) 기준으로 크기를 결정. (가변성o) . 유저가 보는 브라우저 기준 vw : 브라우저 가로 기준 vh : 브라우저 세로 기준 vmin : 너비를 기준으로 함. 너비가 높이보다 더 좁아지면 높이 기준으로 함. vmax : 너비와 높이 중에 더 .. 2023. 11. 27.
응용) HTML 과 CSS (폼태그 속성, form tag ,form 태그,로그인 만들기) 로그인 형태를 만들기 위해서 HTML 에서 form 태그 속성을 사용한다. ㅡ form 태그 입력 양식 태그 사용자로 부터 입력받은 데이터를 서버로 전송시키는 역할 모든 입력 양식 태그의 부모 역할을 한다. 1. input 태그는 단독사용한다. inline-block 요소 유저가 입력할 수 있는 ui (영역)을 생성해준다. 2. placeholder 속성은 input 에 내용을 미리 보기 가능 ㅡ버튼생성하기 1. 버튼ui(형태)생성 >>>>>>>>>>>>> value 속성으로 버튼 안의 내용 작성 가능, on off 기능으로 가능함 아이디 : 비밀번호 : 2. 시멘틱태그의 버튼으로 사용. form 태그 안에서 기능을 실행시켜 줌.입력 값을 제출할때 쓰는 기능을 한다. >>>>>>>>>>>>>> form .. 2023. 11. 17.
응용) HTML 과 CSS (flex 속성) flex :엘리먼트들의 간격을 나눌때 사용한다. 1.부모 > 자식 = 반드시 부모 에게 flex를 적용시켜준다. 2.자식에게 float:left; 를 적용시킨 것 처럼 왼쪽정렬된다. display: flex; flex-direction: row; justify-content: center; align-items: center; [F12]로 정렬 예시를 찾아 볼 수 있음. 아래 그림처럼 로고+메뉴가 있는 헤더를 만들어 보자. DOCTYPE html> flex * { margin: 0; padding: 0; } .con_wrap { width: 600px; height: 600px; border: 10px solid gray; display: flex; /* =>요소를 flex속성으로 변경 =>반드시 부모에.. 2023. 11. 15.