표만드는 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
이 댓글을 비밀 댓글로

목록 만드는 html 태그

Posted by 수군이 수군이
2017.11.13 16:19 수군이 html5 공부방

이번 내용은 목록을 만드는 html 태그를 알아보려고 한다. 

기본적인 부분은 생략을 하고 포스팅 내용을 다룰것이다. 처음 보신분들은 아래 링크에 가서 보길 바란다.


HTML문서 기본구조 살펴보기


HTML텍스 관련 태그 소스 


텍스트 따라 표시하는 태그 


<ul>, <li> 태그는 순서 없는 목록만들기 태그이다. 


기본 시작은 

<ul>

<li> 텍스트 </li>

<li> 텍스트 </li>

</ui>  


실습

  • 커피

  • 위와 같이 표현이 가능하다. <ul>안에 <li>넣어 목록 리스트를 작성 할 수있다.

    아무 스타일도 적용하지 않아서 기본 목록 형식으로 표현이 된다.


    <ol> <li>순서목록 태그 

    기본 시작은 

    <ol>

    <li>텍스트</li>

    <li>텍스트</li>

    </ol>


    실습으론 

    1. 내용
    2. 내용

    위와 같이 표현이 된다. 

    이번에는 <ol> 태그에 기능이 좀더 추가가 된다. 

    별도의 속성값을 넣어 좀 더 리스트 목록을 만들수 있게 된다.

    <type 속성 값>

     속성 값

    설명 

     1

    숫자(기본값) 

     a

    영문 소문자 

     A

    영문 대문자

     i

    로마숫자 소문자 

     I

    로마숫자 대문자 


    작성하는 태그는 <ol type="a"> 응용은 <ol type="a" start="3"> <ol type="a" reversed>  이와 같이 시작하면 된다. 

    type 속성: <ol> 태그는 순서 목록이고 각 항목 앞에 1,2,3 같은 숫자가 기본으로 표기하며, ol 태그의 type 속성을 이용해 숫자나 문자를 다양하게 조절을 할 수가 있다. 


    start 속성: 순서 목록은 기본적으로 1부터 시작할 수 있고 경우에 따라 중간 번호부터 시작할 수있다.


    reversed 속성:  순서목록을 역순으로 표시가 가능하다. 



    목록 리스트가 많은 경우 </li>속성을 사용하지 않아도 중첩이 된다. 

    <ol>

    <li>내용

    <li>내용

    <li>내용

    </ol>

    위 같이 작성해서 가능하다. 


    실습

    1. 내용
    2. 내용
    3. 내용


    실습!!

    • 커피종류
      1. 에소프레소
      2. 아메리카노
      3. 카푸치노
    • 술종류
      1. 소주
      2. 맥주
      3. 청주



    <dl>,<dt>,<dd>태그 역시 같은 성향의  설명 목록태그이다. 


    기본형은 

    <dl>

    <dt>내용</dt>

    <dd>내용</dd>

    <dd>내용</dd>

    <dt>내용</dt>

    <dd>내용</dd>

    <dd>내용</dd>

    </dl>


    이름하나의 세 개의 설명을 나타낼수 있다.  지금까지 목록 만드는 html태그 소스를 알아보았다.

    태그소스는 자주 연습하면서 작성을 해야 내손에 익어간다. 

    지금도 많이 버벅되지만 좀 더 하면은 익숙해질 것이라고 생각이 된다.  




    이 댓글을 비밀 댓글로

    텍스트 따라 표시하는 태그

    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% 이해를 지금 당장은 못하지만, 티스토리 소스정도는 만질 수 있는 상황까지 가고 싶다. 



    이 댓글을 비밀 댓글로

    에디터플러스 또는 비주얼스튜디오 어떤걸 선택??

    Posted by 수군이 수군이
    2017.10.18 15:39 수군이 html5 공부방

    최근에 html5 공부를 시작하면서 선택 장애가 왔었다. 에디터플러스[EditPlus], 비주얼스튜디오[VisualStudioCode]이다. 많은 사람들이 사용하고 있는 프로그램이라서 관련 글들이 많이 올라와 있었고, 본인 또한 이러한걸 고민을 하게 되었다. 에디터플러스는 유료프로그램이라 결재를 하여 사용을 해야되었고 비주얼스튜디오는 무료프로그램으로 배포가 되었다. 각 프로그램마다 장단점이 보였다.


     

    먼저 비주얼스튜디오는 사용자가 불편함이 없이 구성이되어 있다. 각 영역별로 가이드 라인이 만들어져 어느 위치의 자리인지 한눈에 보이게 만들어주었다. 각 코드별 내용을 가이드라인을 통해 보여주고 있었다. 초보자가 좀더 접근성을 손쉽게 만들어 주었다. 




    또하나 장점인 단어중에 앞단어만 입력만 하면 해당 코드가 자동적으로 텍스트로 표출이 된다. 이점이 가장 큰 장점인듯하다. 



    유로프로그램인 에디터플러스는 국내기업이 개발한 프로그램인듯하다. 자세히는 모르지만 아직 초보라 에디터플러스를 잘 모른다. 지금 다니고 있는 회사에서도 에디터플러스를 구입을 하여 웹디자인 하시는 과장님이 사용하고 있다. 하나하나 코드 입력 방식을 하고 계신다. 초보자들이 사용하기는 좀 힘든 부분이 일수도 있다. 


    에디터플러스는 비주얼스튜디오처럼 영역별 가이드가 아닌 줄 줄임 형식을 선택을 하였다. 길게 늘어진 코드보다는 줄 줄임 형식도 괜찮은 방법인듯하다. 지금 간단하게 하고 공부를 하고 있지만 내가 만일 어느정도 마스터를 하여 작업을 한다고 하면 이 방법도 괜찮은듯 하다. 비주얼스튜디오에도 있을 것이라고 본다. 내가 아직 찾아보질 않아서인듯 하다. 사용하는 면에서 어느게 좋다 나쁘다 할 수 없는 부부이기도 하다. 


    여기서 결론이다. 

    비주얼스튜디오는 왠만한 코드 값을 알고 있는 사람들에게 장점이 부각이 될듯하다. 에디터플러스는 초보자가 코드명을 익숙하게 만들기 위해서는 좋다. 그래서 선택한게 에디터플러스로 선택했고, 아직 제대로 모르고 비주얼스튜디오를 사용하게 되면 나중에 작업을 했을 시 첫단어만 생각할 수 있기 때문에 선택했다. 


    각각 프로그램들은 장단점이 있고, 본인이 편안한 걸로 사용하면 될듯 싶기도 하다. 아직은 걸음마 단계이지만 앞으로 공부한 내용을 포스팅을 하여 기록을 남기면서 발전하는 모습을 그려내야겠다.



    이 댓글을 비밀 댓글로