[Project H4C] 3. HTML 기본 요소
- 스타일
style 속성을 이용한 방법은 단 하나의 HTML 요소에만 적용된다.
<태그이름 style="속성이름:속성값">
e.g.)
<h1 style="background-color:white"> text 텍스트</h1>
<h1 style="color:maroon">text 텍스트</h1>
<h1 style="font-size:180%">text 텍스트</h1>
<h1 style="text-align:center">text 텍스트</h1>
- 여러가지 스타일 설정
e.g.)
<h1 style="background-color:white; color:maroon; font-size:180%; text-align:center">
속성값 사이에 세미콜론(;)을 넣어 구분한다.
CSS 속성을 하나만 사용할 때, 여러개의 CSS 속성 중 마지막 속성은 세이콜론을 생략할 수 있다.
- 색상
1. W3C에서 정의한 HTML4 표준 색상 이름
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
(e.g. <h1 style="color:teal"> 청록색 </h1>)
2. RGB 색상값: Red, Green, Blue
(e.g. <h1 style="color:rgb(0,132,343)">이건 무슨색일까?</h1>)
3. 16진수 색상값
(e.g. <h1 style="color=#0000FF">이거는?</h1>)
- HTML 배경
1. CSS를 이용하여 배경색을 변경한다.
e.g)
<style>
body {background-color: lightblue; }
h1 { background-color: rgb(255.228.0); }
p { background-color: #FFFFCC; }
</style>123
2. 이미지로 background 변경
<태그이름 background="이미지주소">
e.g.)
<body background="/examples/images.jpg">
...
</body>
- 링크
1. 하이퍼링크는 <a>로 표현한다.
<a href="링크주소">내----용</a>
2. target 속성
<a>태그의 target 속성은 링크로 연결된 페이지를 어디에서 열지 정한다.
e.g.) <h1><a href="/html/intro" target="_black"> 새 창에서 열기</a></h1>
3. 책갈피
원하는 화면으로 갈 수 있는 기능
<a href="#bookmark"><p>여기로 이동!</p></a>
....
<p><a name="#bookmark"></a>여기</p>
- 이미지 삽입
<img> 태그 사용, 종료 태그가 없는 빈 태그.
<img src="이미지주소" alt="대체문자열">
이미지 크기 변경: width(너비), height(높이)
이미지 테두리 설정: border (e.g. style="border: 3px solid black")
이미지에 링크 걸기: <a>태그 이용
e.g.)
<a href="/html/into" target="_self">
<img src="/examples/images/1.jpg" alt="flag" style="width:320px; height:214px">
</a>
- 리스트
1. 순서가 없는 리스트
<ul> 태그 사용, 각 리스트의 요소들은 <li>태그로 시작됨.
웹페이지상 리스트 요소 앞에 검정색 작은 원이 생긴다.
e.g)
<ul>
<li>목요일</li>
<li>금요일</li>
<li>토요일</li>
</ul>
- CSS의 list-style-type 속성을 사용하여 리스트 요소 앞의 모양을 바꿀 수도 있다.
e.g)
<ul style="list-style-type: square">
<li>코</li>
<li>로</li>
<li>나</li>
</ul>
2. 순서가 있는 리스트
<ol> 태그 사용, 각 리스트의 요소들은 <li>태그로 시작됨.
기본 마커로 아라비아 숫자가 표시된다.
e.g.)
<ol>
<li>이제</li>
<li>슬슬</li>
<li>잘까?</li>
</ol>
- 마찬가지로 CSS의 list-style-type 속성을 사용하여 마커 모양을 변경할 수 있다
e.g.)
<ol style="list-style-type: upper-roman">
<li>도</li>
<li>피</li>
<li>디</li>
</ol>
- 정의 리스트: 용어와 해당 용어의 정의를 모아둔 것
<dl>태그 사용.
<dt>태그에는 용어의 이름이 들어가고, <dd> 태그에는 용어의 정의가 들어간다.
e.g.)
<dl>
<dt>무의식</dt>
<dd>-각성되지 않은 심적 상태</dd>
<dt>도피디란?</dt>
<dd>-That's secret
</dl>
- 테이블
<table>태그 사용.
<tr>: 테이블의 열 구분
<th>: 각 열의 제목나타냄. 자동으로 굵은 글씨,가운데 정렬 됨.
<td>: 테이블의 열을 각각의 셀로 나눠줌
CSS의 border를 사용하여 테이블 테두리 표현하기
e.g.)
<style>
table, the, td {border: 1px solid black }
</style>
위 예시 코딩은 테두리가 두 줄로 표현되는데 border-collapse 속성 값을 collapse로 설정하면 한 줄 테두리가 된다.
e.g.)
<style>
table, the, td { border: 1px solid black; border-collapse: collapse }
<colspan>: 테이블의 열 합치기
<rowspan>: 테이블 행 합치기
<caption>: 테이블 상단의 제목이나 짧은 설명 추가 가능
'1. HTML' 카테고리의 다른 글
| [Project H4C] 6. HTML 확장 (0) | 2020.07.11 |
|---|---|
| [Project H4C] 5. HTML 입력 양식 (0) | 2020.07.10 |
| [Project H4C] 4. HTML 공간 분할 (0) | 2020.07.10 |
| [Project H4C] 2. HTML 텍스트 요소 (0) | 2020.07.09 |
| [Project H4C] 1. HTML 시작 (0) | 2020.07.09 |