20211102 HTML CSS 다시 복습

DUUUPPAAN·2021년 11월 2일
0

20211012~ 복습&정리

목록 보기
5/12

·오늘 수업

-오늘 수업도 역시 전에 했던 내용에서 크게 벗어나지 않았다. get과 post의 방식에 대한 부분을 제외하고는 거의 비슷한 내용이었다.

·get과 post의 차이

-get방식과 post방식의 차이는 직접 사용하면서 도메인 부분에서 확인할 수 있었는데(아직은 확인할 수 있는 방법이 이것 뿐이었다.) get방식은 도메인 부분에 내가 입력하거나 선택한 내용이 눈에 보이게 확인할 수 있었고, post방식은 보이지 않았다. 그래서 최소한의 보안을 위해서라도 특정 정보를 보내거나 하는 것은 post방식을 사용하길 권장하셨다. 뿐만 아니라, get방식은 빠르기 때문에 빠른 처리를 위해서는 get방식이 사용되기도 한다는 장점을 알려주셨다. 대신에 빠른 만큼 처리할 수 있는 내용에 한계도 명확해서, textarea같은 부분은 get방식으로 사용하기 어렵다고 하셨다.

·form의 줄 맞추기

-사실 요즘에는 table을 잘 사용하지 않고 div를 더 많이 사용한다고 알고 있다. 그래도 table을 써서 해보았다. 전에 form 태그를 사용했을 때, text박스의 줄맞춤을 해주고 싶어서 중간에 공백을 넣고 브라우저에서 열어보고 안맞으면 다시 맞추고 하는 엄청난 수작업을 진행했는데, table안에 내용을 넣으니 쉽게 줄을 맞출 수 있었다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>회원 가입 화면</h1>
    <table>
        <form action="./sample1102_3.html" method="get">
        <tr>
            <td>이름: </td> 
            <td><input type="text" maxlength="10" size="30" placeholder="이름을 입력해주세요" autofocus></td>
        </tr>

        <tr>
            <td>주소: </td>
            <td><input type="text" size="30" placeholder="주소를 입력해주세요."></td>
        </tr>

        <tr>
            <td>E-mail: </td>
            <td>
                <input type="email" size="30" placeholder="이메일을 입력해주세요." required>
            </td>
        </tr>

        <tr>
            <td colspan="2">
                <label><input type="radio" value="male" name="gender">남자</label>
                <label><input type="radio" value="female" name="gender">여자</label>
            </td>
        </tr>

        <tr>
            <td>
                <input type="submit" value="send">
            </td> 
            <td>
                <input type="reset" value="reset">
            </td>
        </tr>
        </form>
    </table>
</body>
</html>

·그 외의 수업

-그 외의 수업도 진행했지만, 대부분이 form 태그를 사용하는 것이었다. 그래서 사실 새로 배웠다는 느낌이 많이 나지는 않았다. 물론 전에 비해서 일정 부분 기억이 나지 않는 단어들이 있긴 했지만 금방 기억나서 다 작성할 수 있었다.

-그래서 사실 비대면의 장점을 살려서, 이미 했던 것들을 작성해보라고 한 시간에 생활코딩에서 부트스트랩의 영상을 봤다. 정말 열심히 봤는데, 영상에서 나온 대로 시연이 되질 않았다. 왜인지 한참 찾아보고 정말 영상과 똑같이 따라했는데도 진행이 되지 않아서 에디터를 VS code에서 다른 것들로도 바꿔보고 여러 방법을 찾아봤다. 그리고 거의 막바지가 되어서야 문제를 깨달았다.

-일년정도 전에 부트스트랩5가 나오고 여러 부분에서 개정이 있던 것 같다. 그래서 이전의 영상이 더이상 적용이 안되는 부분이 있는 것 같다. 그래서 만약 내일도 오늘과 같은 맥락으로 수업이 진행된다면 유튜브에서 가장 최근 영상을 찾아보려고 한다. 그래도 꽤나 열심히 보고 따라하려고 했는데 굉장히 쓸데없는 시간으로 전락해버려서 너무 허탈하다. 차라리 java메소드를 더 볼 걸 그랬나 싶기까지 했으니...ㅜㅜ 그래도 오늘의 실패가 없었다면 내일도 생활코딩의 영상을 보고 있을 수 있었으니 다행이다. 내일 더 최신의 영상을 보고 배울 수 있는 기초가 된 하루겠지...

·앞으로

-앞으로는 버전과 영상의 출시 시기를 잘 확인하고 배워야 한다는 것을 명심해야겠다. 이런 일이 앞으로는 없도록! 빨리 변화하는 업계라는 것을 아직 적응하지 못했나보다. 내일은 정말 부트스트랩을 잘 사용할 수 있도록 수업 중간중간에도 집중해서 다른 공부를 병행해야겠다!

profile
비전공자란 이름으로 새로운 길을 가려 하는 신입

0개의 댓글