○ CSS 파일 등 외부 파일 연결
● <link> 태그
외부의 문서를 연결시키는 태그이다
주로 CSS 파일 같은 스타일 시트 파일을 연결하거나, 웹 폰트를 사용할 때 폰트가 있는 주소로 연결시킬 수 있다
여러 개의 <link> 태그를 삽입할 수 있으며, <head> 태그 안에 넣는다
<link type="text/css" rel="stylesheet" href="mystyle.css">
link 태그의 속성
- rel : 현재 문서와 연결 문서의 관계를 표시한다
- href : 연결할 곳의 주소를 표시한다
- type : 연결 문서의 MIME 유형을 표시한다(href 속성이 설정됐을 때만 사용한다)
□ rel 속성의 값
- stylesheet : 스타일 시트로 연결할 때 사용
- alternate : 문서의 대안 버전(프린트나 번역 사이트)으로 연결할 때 사용
(<link rel="alternate" type="application/atom+xml" href="/print/atom">) - author : 저작자로 연결할 때 사용
- help : 도움말로 연결할 때 사용
- license : 문서의 저작권 정보로 연결할 때
- search : 검색 도구로 연결할 때
□ type 속성의 값
- text/css : CSS 파일의 경우일 때 사용
- text/javascript : js 파일의 경우일 때 사용
- application/xml : xml 파일의 경우일 때 사용
● @import
<link> 태그를 사용하지 않고 CSS 파일을 연결시킬 수 있다
@import url(mystyle.css);
- @import url(' ');
- @import " ";
이중 인용부호, 단일 인용부호 모두 사용가능하다. 인용부호 안에 주소를 입력한다
적용시킬 html 페이지의 <style> 태그 맨 처음에 위치한다
● <figure> 태그
사진, 도표, 삽화, 비디오, 코드 등을 담는 컨테이너 역할을 하는 태그이다
● <figcaption> 태그
figure 태그에 대한 설명을 하는 문구를 담는 태그이다
<figure> 태그 안에서 한번만 사용할 수 있다
실행 코드
실행 결과
● <label> 태그
폼의 양식에 이름을 붙이는 태그이다
<label> 태그로 묶인 텍스트를 클릭하면, form control(양식 입력 창)이 선택된다
(form control : input, button, textarea, select 태그로 생성된 입력 장치 제어)
label 태그의 속성
- for : <label> 태그로 묶을 id. 관련 태그의 id와 같다
<label> 태그의 for 값과 양식의 id 값이 같으면 연결되게 한다
label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나 체크를 하거나 해제한다 - form : <label> 태그가 속한 <form> 태그의 아이디
label 태그를 양식에 연결하는 방법은
컨텐츠를 <label> 태그로 감싸거나 <label> 태그의 for값과 다른 태그의 id를 연결하면 레이블을 클릭했을때 연결된 양식에 입력할수 있다
실행 코드
실행 결과
● <fieldset> 태그
form 태그에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용한다
하나의 그룹으로 묶은 요소를 주변으로 박스 모양의 선을 그려준다
fieldset 태그의 속성
- form : 해당 <fieldset> 태그가 속해 있는 폼을 지정한다.
이 속성을 지정하면 특정 <form>태그와 <fieldset> 태그의 관계를 명시적으로 연결할 수 있으며,
<fieldset> 태그가 <form> 태그 밖에 있더라도 둘 사이의 관계를 유지할 수 있다 - disabled : <fieldset> 태그의 모든 컨텐츠들을 한번에 비활성화할 수 있다
● <legend> 태그
fieldset 태그의 캡션을 정의할 때 사용한다
실행 코드
실행 결과
실행 코드
(form 속성 사용)
실행 결과
disabled로 입력을 하지 못하게 지정했다
'html§CSS' 카테고리의 다른 글
| CSS의 속성들(2) (0) | 2020.06.20 |
|---|---|
| CSS의 속성들(1) (0) | 2020.06.19 |
| CSS의 개념 (0) | 2020.06.17 |
| HTML의 태그들(7) (2) | 2020.06.16 |
| HTML의 태그들(6) (0) | 2020.06.16 |
