1. HTML 스타일(Style)
(1) 글자 뒤 배경색 변경
- <h1 style="back-ground:white">hh-nn world </h1>
// 글자 뒤에 배경색 바꿈
(2) 전체 배경색 변경
- <body style="background:#33CCFF"> </body>
(3) 글자 색 변경
- <h1 style="color:maroon"> </h1>
(4) 글자 크기 변경
- <h1 style="font-size:250%">
(5) 문단 정렬 변경
- <h1 style:"text-align:center">
// left, light, center 등,,,
* 스타일 여러개를 한번에 적용 *
<h1 style= "background-color:white ; color=maroon; text-align=center; text-size=300%">hh-nn world </h1>
-> 세미콜론으로 구분.
2. HTML 색(Color) 표현
(1) 색상 이름으로 표현
<참고 http://tcpschool.com/html/html_basic_colors >
(2) RGB 색상값으로 표현
<h1 style="color:rgb(0,0,255)">RGB 색상값으로 표현된 파란색</h1>
<h1 style="color:rgb(0,128,0)">RGB 색상값으로 표현된 녹색</h1>
<h1 style="color:rgb(192,192,192)">RGB 색상값으로 표현된 은색</h1>
<h1 style="color:rgb(0,128,128)">RGB 색상값으로 표현된 청록색</h1>
<h1 style="color:rgb(255,0,0)">RGB 색상값으로 표현된 빨간색</h1>
(3) 16진수 색상값으로 표현
- 그때그때 검색해서 사용하기,,ㅎㅎㅎ
3. HTML 배경
(1) 배경색 변경
- html을 이용
<h1 style="background-color"lightblue"> gggg </h1>
- css을 이용
<style>
body { background-color: lightblue; }
</style>
(2) 배경을 다른 이미지로 변경
- <태그이름 background="이미지주소">
여기서 핵심은!!! 리눅스의 /var/www/html 에서 작업하기때문에 사진파일도 저기에 있어야 한다.
사진 파일에 이름은 ulala1.jpg이다. 같은경로에 이미지 파일이 있는게 핵심.
<body background="ulala.jpg"></body>
3. HTML 링크(Link)
- <a href="링크주소"> HTML 링크 </a>
헤더에 링크를 걸기위해서는
<a href="ulala2.jpg">
<h1 style...... > hh-nn world </h1>
</a>
h1에 style이 가득할때는 이렇게 a태그가 h1을 감싸야한다.
혹시나 h1에 스타일이 없다면
<h1><a href=.....></a></h2>하면 된다.
- <a>태그의 target 속성
target 속성 값 |
설명 |
_blank |
새창이나 새탭에 열기 |
_self |
현재 프레임에서 열기 (기본설정) |
_parent |
부모 프레임에서 열기 |
_top |
현재 창의 가장 상위 프레임에서 열기 |
프레임(frame)이름 |
링크로 연결된 문서를 지정한 프레임 열기 |
<a href="ulala2.jpg" target="_blank"> </a>
- 링크의 상태(state)
링크의 상태 |
설명 |
link |
아직 한 번도 방문한 적이 없는 상태(기본) |
visited |
한 번이라도 방문한 적이 있는 상태 |
hover |
링크 위에 마우스를 올려놓은 상태 |
active |
링크를 마우스를 누르고 있는 상태 |
<style>
a:link { color: teal; }
a:visited { color: maroon; text-decoration: none }
a:hover { color: yellow; text-decoration: none }
a:active { color: red; text-decoration: none }
</style>
- 페이지 책갈피
<body>
<h1>페이지 책갈피</h1>
<a href="#bookmark"><p>제목 3로 갑시다!!!</p></a>
<h2>제목 1</h2>
<p>첫 번째 단락</p>
<h2>제목 2</h2>
<p>두 번째 단락</p>
<h2><a name="bookmark"></a>제목 3</h2>
<p>다섯 번째 단락</p>
</body>
<a href="#bookmark"><p>제목 3으로 갑시다!!!</p></a>
// 링크를 걸어둘곳
...
<h2><a name="bookmark"></a>제목 3</h2>
// 링크가 가리키는 곳
4. HTML 이미지(Image)
- 이미지 종류는 jpeg, gif, png
- <img src="이미지주소" alt="대체문자열">
// alt는 이미지가 로딩될 수 없을 때 이미지 대신 나타날 문자열 설정.
- 너무 크니깐 배경이 안보인다................ㅎ
- 이미지 크기(width, height) 설정
<img src="" alt="" width="230" height="140">
<style>
img{
width: 100%;
border: 1px solid black; }
</style>
<img src="ulala3.jpg" alt="no image..." width="100" height="100">
- 테두리 설정
<img src="ulala3.jpg" alt="no image..." width="100" height="100" border="3">
- 이미지에 링크 설정
<a href="/html/intro" target="_blank">
<img src="ulala3.jpg" alt="park" width="100" height="100" border="3">
</a>
- 이미지 맵 만들기
http://tcpschool.com/html/html_basic_images
여기 참고,,,, 필요없을거같,,,ㅎ,ㅎ,,,
5. HTML 리스트
(1) 순서가 없는 리스트(unorderd list)
<ul>
<li>seung il</li>
<li>do won</li>
<li>jun suk</li>
<li>myung hun</li>
</ul>
- 스타일 바꾸기 // circle, squre, disc(기본)
<ul style="list-style-type: square"> </ul>
(2) 순서가 있는 리스트(orderd list)
// <ol style="list-style-type:decimal"> </ol>
// 종류는 decimal(숫자), upper-alpha(영문 대문자), lower-alpha(영문 소문자),
upper-roman(로마 숫자 대문자), lower-roman(로마 숫자 소문자)
<ol>
<li></li>
<li></li>
</ol>
(3) 정의 리스트(definition list)
- description list로서, <dt>는 용어의 이름, <dd>는 용어 정의.
<dl>
<dt>seung il</dt>
<dd>very handsome </dd>
</dl>
6. HTML 테이블(Table)
- 기본구조
<table>
<tr>
<th></th> // 테이블 헤더
</tr>
<tr>
<td></td> // 테이블 데이터
</tr>
</table>
//표가 2줄씩 나타나는 이유는>???
모든 태그는 다 자신만의 테두리가 존재.
따라서, 한줄로 설정하려면 border-collapse 속성을 사용해야함.
<style>
table, th, td { border: 1px solid black; border-collapse: collapse }
// solid 는 표 테두리 색을 의미하며, collapse는 표를 한줄로.
</style>
- 테이블 열 합치기
<th colspan="2">name</th>
- 테이블 행 합치기
<td rowspan="2"> seung il </td>
- 테이블 캡션(caption) 설정
</p>
