본문 바로가기

728x90
반응형

분류 전체보기

(245)
[HTML] 양식(6) - fieldset, legend ▶ , 같은 목적의 양식을 그룹화()하여 제목()을 지정. - 그룹화는 , 제목은 를 통해 지정. fieldset, legend { display: block; } - 은 같은 목적의 양식을 그룹화함. 속성 disabled: 그룹 내 모든 양식 요소를 비활성화. - boolean 값. form: 그룹이 속할 하나 이상의 의 id 속성 값. - 외부에서 연결해 사용 가능. - 의 범위 밖에서 특수하게 작동해야 하는 경우 외부에 위치한 채 연결해서 사용 가능하도록. name: 그룹의 이름.
[HTML] 양식(5) - textarea ▶ 여러 줄의 일반 텍스트 양식을 작성할 때 사용. 한 줄의 경우 사용을 권장. 속성 autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 설정. - on, off 값. 기본 값: on autofocus: 페이지가 로드될 때 자동으로 포커스. - boolean 값. - 문서 내에서 고유해야 함. disabled: 양식을 비활성화. - boolean 값. form: 의 id 속성 값 - 해당 의 후손이 아닐 경우만 해당. - 의 범위 밖에서 특수하게 작동해야 하는 경우 외부에 위치한 채 연결해서 사용 가능하도록. - 이 submit될 때 연결이 되어 있다면 이에 연결된 에 입력된 정보 또한 함께 제출됨. maxlength: 입력 가능한 최대 문자 수. - 숫자 값. ..
[HTML] 양식(4) - button ▶ 선택 가능한 버튼을 지정. 버튼은 을 이용해서도 대체 가능하지만 조금 더 직관적으로 을 사용해 조금 더 특화된 버튼을 만듦.
[HTML] 양식(3) - label ▶ 라벨 가능 요소(labelable)의 제목(Caption)을 지정. 라벨 가능 요소: , , , , for 속성으로 라벨 가능 요소를 참조하거나 콘텐츠로 포함. - for 속성: 참조할 라벨 가능 요소의 id 속성 값. - 라벨 가능 요소를 참조하거나 포함하는 경우 체크박스가 아닌 텍스트만 클릭해도 체크박스에 체크가 됨. label { display: inline; } - label이 를 포함하는 경우. - 이때 검색이라는 텍스트만 클릭해도 입력창에 focus가 잡힘.
[HTML] 양식(2) - input ▶ 사용자에게 입력 받을 데이터의 양식. 속성 autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지의 여부를 설정. - on, off 값 지정. 기본값: on. - cf. 에서 autocomplete 속성 설정 시 범위 내의 모든 데이터 양식에 설정되는 데 비해 의 경우 해당 요소 하나에 대해서만 설정됨. autofocus: 페이지가 load될 때 특정한 양식 부분에 자동으로 포커스 처리 여부 설정. - boolean값. - focus는 한 곳만 가능하기 때문에 문서 내 고유해야 함. checked: 양식이 선택되었음을 표시. - boolean값. - type 속성의 값이 radio, checkbox일 경우만 해당. readonly: 수정 불가한 읽기 전용 설정. - b..
[HTML] 양식(1) - form ▶ 웹 서버에 정보를 제출하기 위한 양식의 범위를 정의. - 아이디와 비밀번호를 입력 및 로그인 상태를 유지할 것인지 여부를 체크하고 모든 입력이 끝났다는 의사 표시로 로그인 버튼을 클릭해 해당 정보를 브라우저에 전달함. - 화면에는 여러 양식이 존재하는데 은 이러한 입력 양식들을 wrapping함(입력 양식의 범위를 지정). - 이후 양식의 정보를 특정 페이지나 주소로 전송하는 데 사용됨. 은 다른 을 자식 요소로 포함할 수 없음. 속성 - action : 전송한 정보를 처리할 웹페이지의 URL을 명시. 은 사용자에게 정보를 입력 받고 그것을 다시 웹 서버로 제출함. 해당 정보가 제출될 페이지가 action의 URL. - autocomplete : 사용자가 이전에 입력했던 값으로 자동 완성 기능을 사용..
[HTML] 표(2) - caption, colgroup, col, thead, tbody, tfoot ※ 이전글인 HTML 표(1)에서의 관련 태그들은 표를 만들기 위한 필수적인 태그에 해당한다. - https://developing-move.tistory.com/50?category=884479 HTML 표(1) - table, tr, th, td ▶ , , , 표의 기본 뼈대를 잡는 데 사용되는 태그. 데이터 표( )의 행(줄 / )과 열(칸, 셀(Cell) / , )을 생성. (Table Row: tr, Table Header: th, Table Data: td) : 표를 만들 때 사용. : 행/줄을 만듦. , :.. developing-move.tistory.com 이 글에서는 표를 보조하는 역할로 활용되는 태그들을 소개하려 한다. ▶ 표의 제목을 설정. 내에서 가장 먼저 작성되어야 함. 열리는 ..
[HTML] 표(1) - table, tr, th, td ▶ , , , 표의 기본 뼈대를 잡는 데 사용되는 태그. 데이터 표()의 행(줄 / )과 열(칸, 셀(Cell) / , )을 생성. (Table Row: tr, Table Header: th, Table Data: td) : 표를 만들 때 사용. : 행/줄을 만듦. , : 열/칸을 만듦. - 일반적으로 를 사용하고 제목의 역할을 담당하는 경우 를 사용함. diplay 속성 - table { display: table; } / tr { display: table-row; } / th, td { display: table-cell; } - 일반적인 block 요소나 inline 요소의 방식으로는 표를 만들 수 없기 때문에 브라우저 내부에서 table이라는 display 속성을 통해 만들 수 있다고 선언되어 ..

728x90
반응형