표만드는 html태그

Posted by 수군이 수군이
2017.11.23 16:20 수군이 html5 공부방

이번 포스팅은 표 만들는 html태그이다.  

table, tr, td, th, 태그가 기본적인 표만들기 용어이다. 

태그 구조는 

<table> 

<tr>

<td>내용</td>

<td>내용</td>

</tr>

</table>


예시)

내용 내용


가로 세로 각가 행과 열이 되며 그안에 내용을 입력하면 된다. 

태그와 행을 만드는 태그 열을 만드는 태그가 각각 필요가 있다. 


기본적인 표 만들기

<table>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

      <tr>

<td></td>

<td></td>

<td></td>

</tr>


</table>


예시


1 2 3
4 5 6

위와 같이 태그를 사용하게 되면 행과 열이 만들어진다. 


<th>태그 제목 셀 만들기 

위에 내용처럼 td를만들어 열과 행을 만들었고 행과 열 사이에 제목을 들가기 위해 th 태그를 사용하면 각 행에 들어간다. 또한 table 태그 안에 border="1"을 추가하면 선이 표기가 된다. 


<table border="1">

<tr>

<th>제목</th>

<td>내용</td>

<td>내용</td>

</tr>

<tr>

<th>제목</th>

<td>내용</td>

<td>내용</td>

</tr>

</table>


실제표현

제목 내용 내용
제목 내용 내용


셀 합치는 태그는 다음 포스팅에서 작성하기 







Tags
이 댓글을 비밀 댓글로

텍스트 따라 표시하는 태그

Posted by 수군이 수군이
2017.11.07 15:19 수군이 html5 공부방

이번에는 각 태그중 상황에 맞게 표기하는 텍스트 태그를 알아보기로 한다. 

이미 고수분이시면 다른 분 페이지를 살펴 보시길 바람니다. 

초보자가 공부하면 내용을 입력을 하는 것이기 때문에 정보가 안될 수가 있다. 


<strong>,<b> <em>,<i><q><mark> <span><rudy> 태그를 볼 것이다.

stron, b태그는 텍스를 강조하는 기능

지금 작성하는 문장은 strong태그를 활용하여 작성된 것이다. 

이번에는 b태그로 작성된 문장 


em과i 태그는 이탤릭체 표기로 할수 있다.

em태그를 활용한 문장 i태그 역시 이탤릭체를 표시가 가능하다. 


q태그는 인용 내용 표시 할때 사용한다. 

로드자전거에 빠져사는 인간


mark태그는 형광펜 효과 

수군이 html 공부하기 

span태그는 mark태그와 달리 각 단어별 형광펜 기능

수군이 html공부하기 쉽다

<span style="color:blue;">   </span>  

span 태그에 컬러 값을 주면 문장이 설정한 컬러에 맞게 변환이 된다. 


기타 다른 태그들이 있지만 필요한부분은 검색해서 보셔도 될거애요 근데 나중엔css를 하게 되면 또 달라진다고 한더라구요 

 

다음엔 목록 태그를 알아볼게요 ul과 li태그가 앞으로 자주 사용하는 태그이기도 합니다. 

이 댓글을 비밀 댓글로

HTML 텍스트 관련 태그 소스

Posted by 수군이 수군이
2017.10.26 16:22 수군이 html5 공부방

이번 포스팅은 HTML에서 텍스트 작성할 때 사용하는 태그를 적어볼려고 한다. 

먼저 텍스트를 한 문장으로 묶어주는 태그를 보자


제목 태그는??

<h1> 수군이 HTML 공부하기  </h1>

<h1>는 숫자 1부터 6까지 입력하면 작은 번호가 가장 글씨로 표현 6으로 갈수록 작아진다. 

아래와 같은 모먕이 나타난다. 

<h1>수군이 HTML</h1>

<h2>수군이 HTML</h2>

<h3>수군이HTML</h3>

<h4>수군이HTML</h4>

<h5>수군이HTML</h5>
<h6>수군이HTML</h6>

위와 같이 태그 소스를 입력을 할 수가 있다.  


이번엔 <p>태그이다. 단락을 만들수 있는 태그이다. 


<p>단락을 만들수 있는 태그이다. 문장을 구분을 해주는 태그</p>


<br>태그는 문장에 줄을 바꿔주는 형태이다. 

<p>문장을 <br>
바꿔 주는 태그</p> 


첫번째 <p>와 두번째 <p>는 <br>이 있고 없고 차이 일뿐이다. 


수평줄 넣는 태그는 <hr>

인용문 넣기 태그는 <blockquote> 

 

이상 html 텍스트 관련 태그 소스 였습니다. 






이 댓글을 비밀 댓글로

HTML 문서 기본구조 살펴보기

Posted by 수군이 수군이
2017.10.24 17:24 수군이 html5 공부방

HTML문서는 정해진 형식에 내용을 입력해야 한다. 

HTML는 <!doctype>, <html>, <head>,<body>가 기본적으로 시작하는 모습.

먼저 시작하는 방법은 

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>수군이 HTML 공부</title>

</head>

<body>

<h1>알고보면 쉬운 HTMl</h1>

<p>처음 시작하는 HTML 공부는 때론 걱정되지만<br>

차근차근 하다보면 어느순간 사이트를 만들고 있을 것이다.</p>

</body>

</html>



<!doctype html> 이건 현재 시작하는 문서가 HTML5 가 시작 되는 것을 알리는 시점

<htmal>

<head>

<meta charset="utf-8">


[meta charset="utf-8]" 는 꼭 작성을 해주어야 한다. 그래야 웹페이지에 결과값이 표출]

[ "" ] 이 기호는 특정한 것을 정할 때 사용하는 것이다. 이 기능은 계속적으로 사용

<

<title>수군이 HTML 공부하기/title>웹페이즈의 제목 작성하는 부분

[ / ] 는 끝을 나타내는 기호. 소스를 작성을 하게 되면 시작과 끝을 알리기 위해 규칙을 정해진 것이다.]     


</head>


<head></head>는 문서 정보를 입력하는 태그 

<body>

<h1></h1>

</body>

<body></body>는 실제로 소스를 입력하는 장소이다.  화면에 보일 내용 

</html>

<html></html> 문서의 시작과 끝을 알리는 소스이다. 



하나의 규칙성이 되어 내용이 표출이 되고 있고, 가장 기본적인 부분이다. 초보의 시선으로 작성된 내용이지 널리 양해바란다. 같은 입장에서 공부하는 사람들에게 도움이 되었으면 한다. 본인 또한 공부하는 입장이다보니 잘못된 부분이 있을 수 있으니 댓글로 남겨준다면 공부하는 사람으로써 감사하다. 앞으로 복습하는 차원으로 포스팅을 올릴 것이다. 각가의 소스를 100% 이해를 지금 당장은 못하지만, 티스토리 소스정도는 만질 수 있는 상황까지 가고 싶다. 



이 댓글을 비밀 댓글로