HTML 기본요소

2018. 11. 4. 04:56

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을 이용

- css을 이용

<style>

body { background-color: lightblue; }

</style>

(2) 배경을 다른 이미지로 변경

- <태그이름 background="이미지주소">

여기서 핵심은!!! 리눅스의 /var/www/html 에서 작업하기때문에 사진파일도 저기에 있어야 한다.

사진 파일에 이름은 ulala1.jpg이다. 같은경로에 이미지 파일이 있는게 핵심.

3. HTML 링크(Link)

- <a href="링크주소"> HTML 링크 </a>

헤더에 링크를 걸기위해서는

<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)이름	링크로 연결된 문서를 지정한 프레임 열기

- 링크의 상태(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>

</body>

// 링크를 걸어둘곳

...

// 링크가 가리키는 곳

4. HTML 이미지(Image)

- 이미지 종류는 jpeg, gif, png

- <img src="이미지주소" alt="대체문자열">

// alt는 이미지가 로딩될 수 없을 때 이미지 대신 나타날 문자열 설정.

- 너무 크니깐 배경이 안보인다................ㅎ

- 이미지 크기(width, height) 설정

<style>

img{

width: 100%;

border: 1px solid black; }

</style>

- 테두리 설정

- 이미지에 링크 설정

</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>

'언어 > HTML_CSS' 카테고리의 다른 글

HTML 입력 양식 (3)	2018.11.06
HTML 공간분할 (1)	2018.11.04
HTML 텍스트 요소- 인용구, 문자셋 (0)	2018.11.02
HTML 텍스트 요소- 제목, 단락, 서식 (0)	2018.11.02
HTML 기본 (0)	2018.11.02

야생타조 IT탐방기

HTML 기본요소

'언어 > HTML_CSS' 카테고리의 다른 글

+ Recent posts

티스토리툴바