본문 바로가기

Coding Note

[HTML] HTML 기본

HTML_쌩기초


기본적인 것들

<html>...</html>  사이에 씀
<title>...</title>  브라우저 제몰
<body>...</body>   주 내용  php스크립트도 여기에 씀

html에는 tag와 attribute(속성)이 있다
태그 리스트


속성은 각 태그마다 여러개있다.
태그와 필요한 속성을 같이써서 html form을 만들어나간다.
 속성은 신기한것들 짱만음 ㅇㅅㅇ;;


스타일
<style="...">   </>  으로 스타일을 지정

<style= "backgrount-color:red"> 배경색 //<body style="">...</body> 요렇게 쓰면 전체배경색
 "color:yellow">  글자색
 "font-family:alial"> 글모양
 "font-size:10px"> 글크기(픽셀단위)
 "text-align:center"> 글정렬


글쓰는 방식
<pre>
....
</pre>  pre사이에는 notepad처럼 쓰면 됨  (<>는 안되는듯..)

이미지
<img>태그 사용 src속성 으로 소스지정,   alt로 설명글(그림 안나올때 대체alternative글), 
  width,height으로 크기지정

<img src="우왕ㅋ굳ㅋ.jpg" alt="우왕하는 표정" width="100" height="100" /> //요래씀
<img src="asdf.jpg">내용내용</img> //이렇게 써도 그림설명나옴



HTML  - link

<a>태그를 이용
 href::링크하는 용도
 name::북마크등등

ex)

<a href="url">...</a> url로 이동하는 링크를 만듬
<a href="url" target="_blank">...</a> target으로 열릴 창의 위치 설정(현재창에서, 새창에서, 새탭에서 등등)

<a name="lable">this is lable</a> c++에서 레이블 정도?
<a href=#lable">go to name::lable</a> lable라는 name으로 링크  (같은 문서내에서)
     name은 꼭 링크를 할 때 아니더라도 이름을 정해줄때 쓰이기도 함



테이블
<table>태그 사용해서 표를만듬
테이블태그는 다른 태그들이랑 같이쓰인다.

---------------------------같이쓰는 태그들------------------------
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines a group of columns in a table, for formatting
<col /> Defines attribute values for one or more columns in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table 
------------------------------------------------------------------

기본적으로 <tr> //테이블 행 생성(row)
    <td> //테이블 데이터 삽입
    <th> //칼럼 제목이라고 할 수 있음 (굵게되고 가운데로감)

ex)
<table>
<tr>
<th>col1</th>
<th>col2</th>

<tr>
<td>data1-1</td>
<td>data1-2</td>

<tr>
<td>data2-1</td>
<td>data2-2</td>

</table>

요래하면
|----------------------------|
|   col1      |    col2      | //굵은글씨로 됨  ㅡ,.ㅡ 노트패드는 따로따로 글꼴설정이 없네
|-------------|--------------|
|data1-1      |data1-2       |
|-------------|--------------|
|data2-1      |data2-2       |
|----------------------------|
요런식으로 표 만들어짐


테이블 태그와 함께 border속성을 쓰면 표가 멋지게 굵어짐ㅋㅋㅋ  그림자도 지고 ㅎ;;
ex)  <table border="1">...</table>


http://w3schools.com html 튜토리얼 정리하면서 공부한거입니다.

'Coding Note' 카테고리의 다른 글

[PHP] 기본적인 코딩규칙  (0) 2011.01.31
[C++ ]friend  (0) 2011.01.27
[winAPI] 얌얌.exe - 재밌다ㅋ  (0) 2011.01.27
[PHP] form 태그로 데이터 이용하기  (0) 2010.11.19
[Network] OSI 7 Layers (Open System Interconnection)  (0) 2010.11.10