HTML 이해해보기


image

  1. 위의 사이트와 같이 게시판 글을 긁어오고 싶다. 먼저, 크롬창을 띄운 상태에서 [ Ctrl + U ] 를 해보자.
    image
    - html 소스코드가 보인다.

  2. 게시판의 글 아무거나 하나를 복사한 뒤, 소스코드에서 검색해보자.
    image
    - html 태그안에 갖혀있는 것을 확인할 수 있다. 이정보들을 가져와야한다.

  3. 파이참에서 프로젝트를 생성하고,
    Alt+ insert를 통해 HTML file을 하나 만들어보자. 아래와 같이 기본 양식이 형성되어있다.
    image
    image


  4. [ Alt + F2 ] 혹은 코드창 우측상단에 뜨는 브라우저를 통해 한번 띄워보자.
    image
    image
    image
    - Title만 있고뜨고, 아무 화면도 뜨지않는다.

  5. HTML 구성에는
    크게 <html>태그 안에
    <head>태그와 <body>태그가 있고,
    <head>태그 안에는 <title>태그가 있다.

  6. <title>태그를 바꿔보고,
    <body>태그 안에는
        <h1>태그로서 제일 큰 글자를 적어보자.
        <h2> 조금더 작은 글자를 적어보자.
        <p>은 제목이 아닌, 단순 문단을 의미한다.
    image
    image

  7. 마찬가지로 <body>태그안에서,
    <table>태그를 만들어보자. table 태그는 벌려서, 안에 여러 태그를 포함시킨다.
         <tr>태그는 table안에서 한 줄을 의미한다.  벌려서 <td>태그를 포함한다.
             <td>를 한 칸을 의미한다.
    image
    image


    같은 <tr>태그 안에 <td>를 여러개 쓰면, 옆으로 한칸씩 붙는다.
    image
    image


CSS를 Bootstrap을 이용하여 작성하기

  • 위에서 작성한 table은 모양이 안이쁘다. 그래서 대부분
    <head>안에 css를 작성하며,
    css를 쉽게 작성하기 위해서 bootstrap을 이용할 수 있다.
    사이트는 [ 부트스트랩 와치.com ] : https://bootswatch.com/ 을 이용한다.
    image


  • 사용법은, Themes > 아무거나 선택 > Ctrl + U 를 통해, <head>태그 안에 있는 모양 정의 태그를 복사해오는 것이다.
    - 이 때, ...으로 줄여진 정보는, 클릭해서 해당 사이트에 접속 후, 그 주소를 복사해서 가져오면 된다.
    image
    image
    image
    image

    image
    - 클릭후 사이트 주소 전체 복사하기
    image
    image

    image
    image


    Before
    image

    Bootstrap - Darkly themes 적용 after
    image


이제 CSS를 이용해서 table모양을 바꿔보자.

  • <table>태그에 class="table" 속성(css에서 온 정보)을 넣어주면, 아래와 같이 바뀐다.
    image
    image

  • <table class="table">의 따옴표에 이어서 table table-striped 까지 넣어주면, 줄무늬가 생긴다.
    image
    image
    image


  • 표의 머리말을 굵은 글씨로 넣어주고 싶다면,
    (1) <thead>태그를 생성후 -->
               <tr> 한줄 안에 -->
                  <th> 로 한 칸씩 채운다.
    (2) 기존 내용들을 <tbody>안에 채워넣는다.
    image
    image

+ Recent posts