l HTML 스타일
HTML 요소의 스타일 속성(attribute)을 이용하면 CSS 스타일을 HTML 요소에 직접 설정 가능
하지만 스타일 속성을 이용한 방법은 오직 단 하나의 HTML 요소에만 스타일 적용 가능
- 배경색 변경
<h1 style = "background-color:white">
style 속성을 이용한 배경색 변경
</h1>
- 글자색 변경
<h1 style = "color:maroon">
style 속성을 이용한 글자색 변경
</h1>
- 글자 크기 변경
<h1 style = "font-size:250%">
style 속성을 이용한 글자 크기 변경
</h1>
- 문단 정렬 변경
<h1 style = "text-align:center">
style 속성을 이용한 문단 정렬 변경
</h1>
- 여러 스타일의 설정
<h1 style="backgroun-color:white; color:maroon; font-size:150%; text-align:center">
style 속성을 이용하여 한 번에 스타일링
</h1>
+ style 속성값에 사용되는 CSS 속성(property)과 속성값들은 세미콜론 (;)을 이용하여 구분
+ CSS 속성을 하나만 사용할 때나, 여러개의 CSS 속성 중 맨 마지막 CSS 속성은 세미콜론 (;)을 생략 가능
l HTML 색
- HTML색 (color) 표현
*HTML에서 색을 표현하는 방법
1. 색상 이름으로 표현
2. RGB 색상값으로 표현
3. 16진수 색상값으로 표현
- 색상 이름으로 표현
W3C에서 정의한 16개의 HTML4 표준 색상 이름
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
+ HMTL에서 색상 이름은 대소문자를 구분 X
+ 현재 주요 브라우저가 140개의 색상 이름을 모두 지원함.
- RGB 색상값으로 표현
모니터나 스크린은 빨간색(Red), 녹색(Green), 파란색(Blue)을 혼합하여 색 표현
HTML에서도 세 가지 색으로 색을 표현하는 RGB 색상 사용
RGB 색상의 기본색(Red, Green, Blue)은 각각 0부터 255까지의 범위를 가짐
- 16진수 색상값으로 표현
RGB 색상값을 각각 16진수로 변환한 것 > 각각의 기본색(Red, Green, Blue)은 각각 00부터 FF까지의 범위를 가
ex) 빨간색을 나타내는 RGB 색상값인 rgb(255,0,0) > 16진수 색상값 = #FF0000
l HTML 배경
- HTML 배경 (background)
HTML 문서의 기본 배경(background) = 흰색
HTML 요소들도 각자 자신만의 배경 소유
- HTML 배경 변경 방법
1. 배경을 다른 색으로 변경
HTML5 이전까지 bgcolor 속성 이용 > HTML 요소 배경색 > 다른 색으로 변경 가능
HTML5부터는 bgcolor 속성 지원 X > CSS 이용해 배경색 변경 가능
CSS의 background 속성 이용 > 더욱 다양한 방법으로 배경색 설정 가능
2. 배경을 다른 이미지로 변경
backgruond 속성 이용 > HTML 요소의 배경을 이미지 (image)로 설정
<태그 이름 background = "이미지주소">
배경으로 이미지를 사용하면 웹 페이지의 로딩시간 증가 > 보통은 작은 사이즈의 이미지를 패턴 (pattern)으로 만들어 배경 이미지로 반복 설정
l HTML 링크
웹 페이지에는 다른 페이지나 다른 사이트로 연결되는 수많은 하이퍼링크 존재
(Hyperlink)하이퍼링크를 간단히 > 링크 (link)
HTML > <a>로 표현
<a href = "링크주소">HTML 링크 </a>
<a>태그의 href 속성 > 링크 클릭 > 연결할 페이지나 사이트의 URL 주소 명시
<a>태그 - 텍스트, 단락, 이미지등 다양한 HTML 요소에 사용 가능
- target 속성
<a>태그의 target 속성 > 링크로 연결된 문서를 어디에서 열지를 명시
*target 종류
_blank - 링크로 연결된 문서를 새 창이나 새 탭에서 오픈
_self - 링크로 연결된 문서를 현재 프라임(frame)에서 오픈 (기본설정)
_parent - 링크로 연결된 문서를 부모 프레임(frame)에서 오픈
_ top - 링크로 연결된 문서를 현재 창의 가장 상위 프레임(frame)에서 오픈
프레임(frame) - 링크로 연결된 문서를 지정된 프레임(frame)에서 오픈
+ HTML 프레임(frame)에 대한 내용은 HTML iframe 요소 참고
- 링크의 상태 (state)
*HTML 링크 상태 구분
Link - 아직 한 번도 방문한 적이 없는 상태 (기본설정)
Visited – 한 번이라도 방문한 적이 있는 상태
Hover – 링크 위에 마우스를 올려놓은 상태
Active – 링크를 마우스로 누르고 있는 상태
+ 기본적으로 링크가 걸린 텍스트 > 밑줄, 텍스트 색상 > 파란색으로 변경
+ visited 상태의 링크 > 밑줄, 텍스트 색상 > 보라색
- 페이지 책갈피
<a>태그의 name 속성 이용 > 간단한 책갈피 만들 수 있음
우선 책갈피를 통해 가고 싶은 위치에 <a>태그 만들기 > name 속성 작성
작성한 Name 속성값 이용 > 다른 <a> 태그에서 링크 걸기
l HTML 이미지
이미지 (image) = 2차원 평면 위에 그려진 시각적 요소
오늘 날 웹페이지에는 이미지가 매우 중요한 요소의 하나로 자리 잡고 있음
이미지 종류 – JPEG 이미지, GIF 이미지, PNG 이미지
- 이미지 삽입
HTML문서에 이미지 삽입할 때 > <img> 태그 사용
<img>태그 – 종료 태그가 없는 빈 태그(empty tag)
<img src="이미지주소" alt="대체문자열">
src속성 – 이미지가 저장된 주소의 URL 주소 명시
alt 속성으로 이미지가 로딩될 수 없는 상황에서 이미지 대신 나타날 문자열 설정
- 이미지의 크기 (width, height) 설정
HTML - style 속성 사용 > 이미지의 크기 설정
width속성과height 속성 이용 > 이미지의 너비와 높이를 각각 픽셀(pixel) 단위로 설정 가능
+ HTML5와 적합하나 CSS를 이용한 내부 스타일 시트나 외부 스타일 시트와 상관없이 이미지의 원래 크기를 유지 > style 속성 사용 권장
- 이미지의 테두리(border) 설정
border 속성 사용 > 이미지의 테두리 사용 여부 및 굵기 설정 가능
<img src="/examples/images/img_flag.png" alt="이미지 테두리"
style="width:320px; height:214px; border: 3px solid black">
- 이미지에 링크(link) 설정
이미지에 <a>태그 이용 > 링크 설정
<a href="/html/intro" target="_blank">
<img src="/examples/images/img_flag.png" alt="flag" style="width:320px; height:214px">
</a>
- 이미지 맵 만들기
HTML - <map> 태그 이용 > 이미지 맵 (image map) 제작 가능
이미지 맵(image map) = 이미지의 일부를 클릭할 수 있도록 만들어 버튼처럼 사용하는 기능
<img>태그의 usemap 속성을 <map>태그의 name 속성과 연결 > 이미지와 맵 사이의 관계 설정
<map>태그 – 하나 이상의 <area> 태그 가짐, <area> 태그 = 버튼과 같은 역할
l HTML List
List (리스트) = 여러 요소들을 일렬로 나열한 목록이나 명단
HTML에서 여러 리스트 제공
1. 순서가 없는 리스트
<ul>태그로 시작 > 여기에 포함되는 각각의 리스트 요소는 <li>태그로 시작
각각의 리스트 요소 앞에는 기본 마커(marker)로 검정색 작은 원(bullet) 위치
CSS의 list-style-type 속성 사용 > 리스트 요소 앞에 위치하는 마커(marker) 모양 변경
disc : 검정색 작은 원 모양 (기본 설정)
circle : 흰색 작은 원 모양
square : 사각형 모양
2. 순서가 있는 리스트
<ol>태그로 시작 > 여기에 포함되는 각각의 리스트 요소는 <li>태그로 시작
각각의 리스트 요소 앞에 기본마커로 아라비아 숫자 위치
CSS의 list-style-type 속성 사용 > 리스트 요소 앞에 위치하는 마커(marker)모양 변경
decimal : 숫자 (기본설정)
upper-alpha : 영문 대문자
lower-alpha : 영문 소문자
upper-roman : 로마 숫자 대문자
lower-roman : 로마 숫자 소문자
- 정의 리스트 (description list)
용어와 그에 대한 정의를 모아 놓은 리스트 > <dl> 태그로 시작
<dt>태그 > 용어의 이름, <dd>태그 > 용어에 대한 정의
l HTML Table
테이블(table) – 여러 종류의 데이터(data)을 보기 좋게 정리하여 보여주는 표
HTML > table>태그 사용
1. <tr> 태그 = 테이블에서 열 구분
2. <th> 태그 = 각 열의 제목, 모든 내용 > 자동으로 굵은 글씨, 가운데 정렬
3. <td> 태그 = 테이블의 열을 각각의 셀(cell)로 나누어 줌
+ CSS의 border 속성 이용 > 테이블 테두리 표현 가능
border 속성값 따로 명시 X > 해당 테이블은 항상 빈 테두리를 가지게 됨
+ 두 줄로 표현되는 테두리를 한 줄로 설정하는 방법 > border-collapse 속성 이용
border-collapse 속성값 > collapse 설정 > 테이블의 테두리 한 줄 표현 가능
- 테이블의 열 합치기
colspan 속성 사용 > 테이블의 열(column) 합칠 수 있음
- 테이블의 행 합치기
rowspan 속성 사용 > 테이블의 행(row) 합칠 수 있음
- 테이블의 열과 행 합치기
colspan 속성과 rowspan 속성 함께 사용 > 더욱 복잡한 테이블 표현 가능
- 테이블의 캡션(caption) 설정
<caption> 태그 사용 > 테이블 상단에 제목이나 짧은 설명 붙일 수 있음
'HTML' 카테고리의 다른 글
| HTML Text 요소 (0) | 2022.05.24 |
|---|---|
| HTML 기초 (0) | 2022.05.20 |