본문 바로가기

728x90
반응형

HTML

(39)
[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 속성을 통해 만들 수 있다고 선언되어 ..
[HTML] <noscript> ▶ 스크립트를 지원하지 않는 환경에서 삽입할 HTML을 정의. - 자바스크립트가 동작하지 않는 환경에서는 이러한 내용을 실행해달라는 요청. 지금은 흔치 않지만 예전에는 자바스크립트가 동작하지 않는 브라우저도 있었음. cf. 의 sandbox 속성을 통해 자바스크립트 환경을 막는 것도 가능. - 위의 예시에서는 자바스크립트가 실행 가능한 환경이기 때문에 내의 텍스트는 실행되지 않음. - noscript.html 추가 후 으로 기존의 index.html 가져옴. - 이후 sandbox 속성을 추가해 자바스크립트가 동작할 수 없는 환경 구성 시 내의 텍스트가 노출됨. ∴ 를 통해 자바스크립트가 실행되지 못하는 환경에서 화면상에 출력할 내용을 에 지정하는 것.
[HTML] <script> ▶ 스크립트 코드를 문서에 포함하거나 외부 스크립트 참조. - Javascript 내용을 삽입하거나 외부의 스크립트를 src 속성을 통해 가져오는 경우 사용. - cf. css를 가져올 때는 사용. 속성 async : 스크립트의 비동기적(Asynchronously) 실행 여부를 설정. boolean값. 사용 시 src 속성 필수. defer : 문서 파싱(구문 분석) 후 작동 여부 지정. boolean값. 사용 시 src 속성 필수. ※ 스크립트의 실행 시점 제어 - 자바스크립트 실행 시 HTML에 있는 내용을 자바스크립트로 찾아 실행해야 하는 경우가 있는데, 이때 자바스크립트의 코드가 언제 동작하느냐에 따라 HTML의 내용을 제대로 실행할 수도, 그렇지 않을 수도 있음. - 위 실행 화면에서의 에러는 ..
[HTML] 내장 콘텐츠 - iframe, canvas ▶ 다른 HTML 페이지를 현재 페이지에 삽입해 중첩된 브라우저 컨텍스트(프레임)를 표시. - 하나의 페이지에는 기본적으로 브라우저가 가지는 컨텍스트라는 개념이 있는데, 한 페이지 안에 다른 페이지를 삽입해 페이지가 중첩되기 때문에 브라우저 컨텍스트가 중첩되었다고 표현하는 것. 일반적으로 브라우저를 통해 볼 수 있는 사이트의 페이지는 하나지만, 을 통해 사이트의 페이지 안에 또 다른 사이트 페이지를 넣어 활용할 수 있다는 것. Youtube 등의 동영상 콘텐츠를 가져와 삽입 시 활용되는 경우가 많음. 속성 - name : 프레임의 이름 명시. 페이지에 여러 이 들어가는 경우 name 속성을 고유하게 설정하는 것을 권장. - src : 포함할 문서의 URL 명시. - width : 프레임의 가로 너비. -..
[HTML] 멀티미디어(2) - audio, video, figure, figcaption ▶ 소리 콘텐츠(MP3) 삽입. 속성 - autoplay : 페이지에 접근해서 오디오가 준비되면(사이트 진입 시) 바로 오디오 콘텐츠 재생. boolean 값. autoplay 속성 지정 시 preload는 무시됨. - controls : 제어 메뉴를 표시. 재생, 소리 음량 조절, 정지 버튼 등 제어하는 메뉴. boolean 값. - loop : 재생이 끝나면 다시 처음부터 재생 반복. boolean 값. - preload : 페이지가 로드될 때 파일을 로드할지 지정(힌트 제공). 기본값은 metadata. none: 로드하지 않음. 플레이되면 오디오 파일 로드. metadata: 메타데이터만 로드. 기본적인 정보만 가지고 있겠다는 것. auto: 전체 파일을 미리 로드. - src : Contents..

728x90
반응형