[SeSSAC] 웹 풀스택 영등포 5기 과정

개발 공부한 것들/SeSSAC 웹 풀스텍 과정 회고록

[SeSSAC] 웹 풀스택 영등포 5기 과정_HTML배우기

geograp 2023. 7. 20. 22:20

두번째 날 영등포 새싹 캠퍼스에서 배운 것은 html입니다 :)

저에겐 아주 생소한 분야라서 수업 때 1분이라도 멍때리면 쫓아가느라 식겁했던 하루였습니다

1. html이란?

흔히 저희가 사용하는 웹페이지는 html/ css/ js(javascript)로 이루어 지는데,

이 중 배웠던 html은 웹 페이지를 구성하는 가장 기초적인 언어입니다.

html은 Hypertext Markup Language의 약자인데요, 마크업 언어 등 정의하는데 어려운 언어를 제외하고

제가 이해한 html언어는 웹 페이지의 기본 골격, 뼈대 같은 느낌이었습니다.

페이지 내에서 무언가 동작(ex click 등)을 실행했을 때 다른 페이지로 넘어가는 기능이나,

입력값을 받는 어떠한 기초적인 구성을 만드는 작업을 하는 느낌이었습니다.

그 외의 동적인 콘텐츠를 처리하거나 예쁘게 꾸미는 것과 같은 역할은 css, js 에서 하는 듯 했습니다.

2. ! + enter

html파일을 생성한 후 !+enter을 치게 되면 하기 그림과 같은 기본적인 html뼈대가 만들어집니다.

신기하지 않나요?

이 뼈대에서 첫줄부터 보게 되면 html lang은 language언어를 의미하며 기본 설정은 en = english로 되어있습니다.

<head> ~ </head>부분은 이 웹 페이지의 전체적인 구성, 이름 등을 결정하게 되고

<body>~</body>부분이 저희가 이것저것 넣어서 웹페이지의 뼈대를 잡을 요소를 삽입할 구간입니다.

처음 !+enter을 통해 등장하는 여러 옵션들은 하나도 건드리지 않고 body에 코드 삽입만으로 진행하여

body만 보여드리고 설명하도록 하겠습니다.

3. 실습 1번

하루동안 배운 내용이 너무 많아 저희가 배운 내용이 축약되어있는 실습을 통해 설명드리겠습니다.

제가 첫 실습으로 오직 html로 만든 카페 메뉴페이지입니다.

실습 결과 웹 페이지

<body>
    <h1 style="color:blue">jihyung cafe</h1>
    <a href="https://www.google.com/"><img src = "./img/cat.jpg" title="jihyung cafe"></a> 
    <ul>
        <li><h2>아아</h2></li>
        <ol>
            <li>레귤러: 3천원</li>
            <li>라지: 오처넌</li>
        </ol>
        <li><h2>msgr</h2></li>
        <ol>
            <li>레귤러: 3천원</li>
            <li>라지: 5처넌</li>
        </ol>
        <li><h2>아인슈페너</h2></li>
        <ol>
            <li>레귤러: 3천원</li>
            <li>라지: 5처넌</li>
        </ol>
        <li><h2>딸기요거트휘핑스무디</h2></li>
        <ol>
            <li>레귤러: 5천원</li>
            <li>라지: 8처넌</li>
        </ol>
        <li><h2>민초스무디</h2></li>
        <ol>
            <li>라지: 8처넌</li>
        </ol>
    </ul>
    <hr>
    <h2>음료 설명</h2>
    <p>아아는 아이스아메리카노입니다</p>
    <span>msgr은 미숫가루입니다.</span>
    <p>아인슈페너는 워터베이스입니다.</p>
    <span>딸기요거트휘핑스무디는 딸기+요거트+휘핑을 넣고 섞은 것</span>
    <p>민초스무디는 민초단을 위하여</p>
</body>

=> 이 실습을 통해 익혔던 것은 태그(tag)라는 개념이었습니다.

<head></head>처럼 열고 닫는 부분을 태그라고 하는데,

이 개념과 더불어 중첩과 주석으로 메모를 남기는 방법 또한 같이 익힐 수 있었습니다.

태그의 구조가 참 인상 깊었는데요, 실습을 하면서 느낀 점은 직접해보면 그다지 어렵지 않은 개념이라서

개념이 보기 어려우셔도 코드를 따라 작성하며 직접 눈으로 본다면 충분히 금방 익힐 수 있는 것 같습니다.

4. 실습 2번

실습 결과 웹 페이지

<body>
    <h2>설문조사</h2>
    이름 <input type="text" name="" id="">   
    <br>
    <label for="email">이메일</label>
    <input type="email" name="" id="" placeholder="ex@gmail.com">
    <br>
    <h5>나이</h5>
    <input type="radio" name="age" value="10" id="age10"> 10대
    <input type="radio" name="age" value="20" id="age20"> 20대
    <input type="radio" name="age" value="30" id="age30"> 30대
    <input type="radio" name="age" value="40" id="age40"> 40대
    <input type="radio" name="age" value="50" id="age50"> 50대
    <input type="radio" name="age" value="60" id="age60"> 60대 이상
    <br>
    <h5>원하는 강의(복수응답가능합니다.)</h5>
    <input type="checkbox" name="lecture" id="html"> html
    <input type="checkbox" name="lecture" id="javascript"> javascript
    <input type="checkbox" name="lecture" id="css"> css
    <br>
    <br>
    <textarea name="" id="" cols="30" rows="10" placeholder="하고 싶은 말을 써주세요 :)"></textarea>
</body>

=> 이 실습은 웹 페이지에서 사용자에게 입력값을 받을 수 있는 다양한 구성들을 만들어볼 수 있었습니다.

특히 단순한 text박스와 label박스가 인상 깊었습니다. text박스에 이메일을 기입하도록 만들었을 땐,

그저 이메일을 입력하라는 거구나 싶었는데 label박스에 for="email"이라는 문구를 거니,

웹사이트에 있는 제 쿠키값을 통해 제가 자주 입력한 이메일이 커서로 자동으로 추천되는 것을 볼 수 있었습니다.

5. 실습 3번

실습 결과 웹 페이지

<body>
    <caption><h3 style="color:green">2023년 7월</h3></caption>
    <table cellpadding="10">
     <tr>
        <th style="color:red">일</th>
        <th>월</th>
        <th>화</th>
        <th>수</th>
        <th>목</th>
        <th>금</th>
        <th>토</th>
    </tr>
    <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td style="color:blue">1</td>
    </tr>
    <tr>
        <td style="color:red">2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td style="color:blue">8</td>
    </tr>
    <tr>
        <td style="color:red">9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
        <td style="color:blue">15</td>
    </tr>
    <tr>
        <td style="color:red">16</td>
        <td>17</td>
        <td>18</td>
        <td>19</td>
        <td>20</td>
        <td>21</td>
        <td style="color:blue">22</td>
    </tr>
    <tr>
        <td style="color:red">23</td>
        <td>24</td>
        <td>25</td>
        <td>26</td>
        <td>27</td>
        <td>28</td>
        <td style="color:blue">29</td>
    </tr>
    <tr>
        <td style="color:red">30</td>
        <td>31</td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
</body>

=> 이 실습을 통해 테이블에 대해 배울 수 있었습니다.

테이블을 선언하여 tr로 행을 만들고 td로 각 행의 열을 넣는 작업을 하였으며,

달력의 표시를 위해 색깔도 적극적으로 활용할 수 있었습니다.

6. 실습4번

실습 결과 웹 페이지

<body>
    <table border="1" cellpadding="10" cellspacing="0">
        <tr>
            <td  align="center"><b>구분</b></td>
            <td  align="center"><b>음료</b></td>
            <td  align="center"><b>가격</b></td>
            <td  align="center"><b>이미지</b></td>
        </tr>
        <tr>
            <td rowspan="2" align="center">커피류</td>
            <td align="center"><a href="https://www.tistory.com/">아메리카노</a></td>
            <td align="center">4200원</td>
            <td><img src="./img/cat.jpg" alt="" width="200"></td>
        </tr>
        <tr>
            <td align="center"><a href="https://www.tistory.com/">돌체라떼</a></td>
            <td align="center">4800원</td>
            <td><img src="./img/cat.jpg" alt="" width="200"></td>
        <tr>
            <td align="center" rowspan="2">주스류</td>
            <td align="center"><a href="https://www.tistory.com/">자바칩 프라푸치노</a></td>
            <td  align="center"rowspan="2">5000원</td>
            <td><img src="./img/cat.jpg" alt="" width="200"></td>
        </tr>
        <tr>
            <td align="center"><a href="https://www.tistory.com/">녹차 프라푸치노</a></td>
            <td><img src="./img/cat.jpg" alt="" width="200"></td>
        </tr>
    </table>
    </body>

=> 해당 실습을 통해 테이블의 열과 행을 자유자재로 합치는 작업을 배웠습니다.

colspan = 열을 합침(가로로 통합)/ rowspan = 행을 합침(세로로 통합)

해당 기능이 있어 훨씬 보기 편하고 간단한 테이블을 생성할 수 있었으며, 각 테이블 내에 단순 문자가 아닌 사진을 넣는 작업도 진행하였습니다.

7. 실습 5번

실습 결과 웹 페이지

<body>
</table>
    
<table border="1" cellspacing="0" cellpadding="5" >
    <caption><h5 style="color:blue">시간표</h5></caption>
    <tr>
        <td></td>
        <td>월</td>
        <td>화</td>
        <td>수</td>
        <td>목</td>
        <td>금</td>
        <td>토</td>
        <td>일</td>
    </tr>
    <tr>
        <td style="color:green">1교시</td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
    </tr>
    <tr>
        <td style="color:green">2교시</td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
    </tr>
    <tr>
        <td style="color:green">3교시</td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
    </tr>
    <tr>
        <td colspan="8">
        <a href="https://www.naver.com/" target="_blank">    
                <img src="./img/cat.jpg" alt="" height="30" width="450">
            </a>
        </td>
    </tr>
    <tr>
        <td style="color:green">5교시</td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
    </tr>
    <tr>
        <td style="color:green">6교시</td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
    </tr>
    <tr>
        <td style="color:green">7교시</td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
        <td><img src="./img/cat.jpg" alt="" height="30"></td>
    </tr>
</table>
</body>

=> 이 실습은 그 동안 배웠던 테이블에 관련된 html을 고도화하여 진행할 수 있었습니다.

가운데 긴 고양이 사진은 하이퍼링크도 걸어보며 재밌게 진행하였습니다.

아직 익숙치 않았던 저는 태그 순서가 헷갈려서 직접해보며 많은 것을 얻을 수 있었습니다.

8. 실습6번

실습 결과 웹 페이지

<body>
    <table border="1" cellpadding="50" cellspacing="0" width="700">
        <tr>
            <td colspan="2" align="center">1</td>
            <td rowspan="2">2</td>
        </tr>
        <tr>
            <td rowspan="2">3</td>
            <td align="center">center</td>
        </tr>
        <tr>
            <td colspan="2" align="center">4</td>
        </tr>
    </table>
</body>

=> 선택적인 과제였는데요, 간단해보여서 구현하였습니다.

colspan과 rowspan을 헷갈리지 않고 자유자재로 구현하라는 의도인 듯합니다. ㅎㅎ

'개발 공부한 것들 > SeSSAC 웹 풀스텍 과정 회고록' 카테고리의 다른 글

[SeSSAC] 웹 풀스택 영등포 5기 과정_javascript배우기(3)_dom (0)	2023.07.31
[SeSSAC] 웹 풀스택 영등포 5기 과정_javascript배우기(2)_map,filter,find메소드 (0)	2023.07.29
[SeSSAC] 웹 풀스택 영등포 5기 과정_javascript배우기(1)_변수, 배열 , 반복문 (0)	2023.07.27
[SeSSAC] 웹 풀스택 영등포 5기 과정_css배우기 (0)	2023.07.25
[SeSSAC] 웹 풀스택 영등포 5기 과정_GIT_깃허브 최초 연결하기 (0)	2023.07.18

현재글[SeSSAC] 웹 풀스택 영등포 5기 과정_HTML배우기

맨땅에 헤딩_디지털 마케터

DSP플랫폼 DA운영자 -> 컴퓨터 개발 공부 -> 오퍼월 광고 기획/ 운영 中

코딩온 #부트캠프 #코딩교육, 네이버, 코딩테스트, 코딩테스트후기, 부스트캠프, 부트캠프, 도커, 코딩, 코딩온, 코딩교육,

Today :
Yesterday :

맨땅에 헤딩_디지털 마케터