HTML/CSS 요약

1. 1주차 소감
   1주차에 배웠던 내용들을 다시 복습하는 느낌으로 글을 적어보려고 한다.
   HTML/CSS/JavaScript를 몰아서 일주일만에 끝냈는데, 솔직한 심정으로 과정이 단기간이라 배우다 만 듯한 느낌이 없지 않아 있다. HTML과 CSS는 기본만을 배우는데는 시간이 그리 걸리지 않아서 그렇다 치는데 JavaScript는 확실히 덜 배운 것 같다. 생각나는 것만 적어보자면 이벤트 리스너나 객체 등이 좀 미흡하게 다뤄졌던거 같다.
   아무래도 백엔드 개발자 캠프다 보니 프론트 쪽은 맛보기정도만 배운거 같기는 한데 한 주정도는 더 여유를 가지고 배웠으면 좋겠다는 생각도 들었다.
2. 세팅
   우선 공부를 위한 개발환경 세팅을 했는데, 편집기로는 VSCode를 사용했고 Extension으로 Live Server를 설치하여 브라우저에서 즉각적으로 결과를 확인할 수 있게 했고 브라우저로는 크롬을 사용했다. 설치할 게 별로 없어서 모두가 잘 따라오는 듯 했다.
3. HTML
   우선 파일을 만들고 브라우저에 띄우기 위한 html 기본 구조를 배웠는데, HTML 태그로 시작과 끝을 표시하고 그 안에 사용자 눈에 보이는 태그를 넣는 body와 제목이나 사용자 눈에 보이지 않는 정보를 세팅하는 Head 태그를 넣는다. 이정도까지만 써놓으면 html를 작성할 준비는 끝난 것이다. html을 배울 동안은 head 안에는 title 태그와 글자 정보를 주는 meta태그만 넣으면 됐다.
   body안에는 글을 다양한 식으로 띄우는 연습부터 시작했다.
   p태그로 글자를 묶고 br태그로 띄어쓰기하고 h1~h6 크기 조절을 한다.

<p>Hello <br> my name is <h1>csj5801</h1></p>

a태그에는 href 속성에 링크를 넣어서 페이지 이동이 가능하게 한다.

<a href="#javascript">javascript</a>

img에 src 속성에 이미지 링크를 넣으면 이미지를 띄울 수 있고 width, height 속성으로 크기 조절도 가능하다. alt를 넣으면 이미지 링크가 잘못됐을때 글씨를 띄울 수 있다. 이미지에도 title로 제목을 줄 수 있다.

<img
            width="150"
            height="150"
            src="images/이미지.png"
            alt="이미지"
            title="제목"
          />

tr td 태그를 통해 테이블을 만들 수 있다. 먼저 table 태그로 묶고 그 안에 tr로 하나의 행을 설정하고 그 안에 td를 열 개수만큼 넣는다. 이걸 테이블행 개수만큼 반복해주면 기본적인 테이블 구성이 완성된다. 추가로 테이블을 thead, tbody, tfoot으로 나누어줄 수 있는데 thead는 테이블의 헤더를 정의하고, 여기선 td가 아니라 th로 열을 설정한다. tbody는
테이블의 본문을, tfoot은 표의 바닥을 정의한다. 또한 caption 태그로 추가하여 테이블의 제목을 넣을 수 있다.

<caption>
      [표-1]회원목록
    </caption>
    <table border="1">
      <thead>
        <tr>
          <th>번호</th>
          <th>아이디</th>
          <th>이름</th>
          <th>이메일</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>admin1</td>
          <td>홍길동1</td>
          <td>admin1@aaa.com</td>
        </tr>
        <tr>
          <td>2</td>
          <td>admin2</td>
          <td>홍길동2</td>
          <td>admin2@aaa.com</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="4">1 2 3</td>
        </tr>
      </tfoot>

form 태그를 통해 검색, 로그인, 회원가입 폼을 만들 수 있다. form태그에 method 속성을 통해 데이터를 어느 형식으로 주고 받을지 설정하고 그 안에 input 타입을 넣어 입력받을 정보가 어떤 형식인지 type 속성을 통해 지정한다. 그리고 name, id 속성으로 해당 type에 이름과 아이디를, value 속성으로 초기값을, label 태그로 라벨을 지정할 수 있다.

    <form action="next.html" method="get">
     <label for="lname">Last Name</label>
      <input type="text" name="searchWord" />
      <input type="submit" value="search" />
    </form>

ul li태그로 아래와 같이 리스트 형식으로 만들 수 있다.

⦁ 항목 1
⦁ 항목 2
⦁ 항목 3

<ul class="list01">
      <li>html</li>
      <li>css</li>
      <li>javascript</li>
    </ul>

ul 태그 리스트를 설정한 후 li로 목록을 만든다.
ol 태그도 있는데 순서가 있는 목록에 사용한다.

1 항목 1
2 항목 2
3 항목 3

    <ol class="list03">
      <li>html</li>
      <li>css</li>
      <li>javascript</li>
    </ol>

4. CSS
   HTML이 기본 골격을 만든다면 CSS는 디자인을 담당한다. 개인적으로는 미적 감각이 없는지라, CSS를 활용하라고 하면 여러가지 이유로 해메는 감이 있다. 그래도 템플릿을 적용하고 개발자 도구를 활용해서 어느 정도 수정하는 것까지는 어렵지 않은것 같다.
   style 태그는 head 안에 넣어도 되지만 css 파일을 따로 분리한 뒤 html 파일에서 불러오는 식으로 할 수 있는데, 나중에 배울 프로그래밍에서 역할을 분리하는 건 매우 중요하기 때문에 같이 쓰는 것보단 분리하는 방식이 더 선호된다.
   백엔드 과정이기 떄문이어서 그런지 CSS는 정말 간단하게 배웠다.
   먼저 CSS로 디자인할 HTML 태그를 지정하고 어떤 식으로 꾸밀 지 속성을 조정하면 된다.
   지정하는 법은 속성이나 클래스, id를 이름을 가져오면 된다.
   속성은 그대로, 클래스는 이름 앞에 .을 붙이고, id는 #를 붙인다.
   width를 통해 가로 길이를, height를 통해 세로 길이를 지정할 수 있다. px 단위로 지정하며 %로 지정하여 상대적 비율로도 정할 수 있다. padding, margin, border 등은 그림을 통해 보는 게 좋을 거 같다.
   
   파란색 부분이 width와 height를 통해 넓이를 지정해준 대상의 범위고 초록색 부분이 border와 대상의 사이 공간을 의미한다. border는 박스라 생각하면 되는데 대상을 둘러싸는 박스를 생성한다. border의 넓이는 박스 테두리의 넓이를 생각하면 되겠다. margin은 대상과 대상 사이의 여백을 뜻한다. position은 해당 대상의 절대적인 위치다.

:를 통해 이벤트를 지정할 수 있는데, 사용자가 대상에 특정 이벤트를 하면 CSS를 통해 그에 맞는 스타일로 변하는 것이다. 자바스크립트로도 가능하긴 한데, 스타일에 대한 이벤트는 CSS로 처리하는 게 좋을 거 같다.

#customers tr:hover {
        background-color: #ddd;
      }

예시는 hover로 들었는데 마우스가 대상에 들어오면 background 색이 변하고 나가면 색이 원래대로 돌아온다. hover 말고도 많은 이벤트가 있는데, 이거는 필요할떄마다 찾아보는 게 좋을거 같다.
다음은 예시를 통해서 종합적인 CSS의 속성들을 정리해보려한다.

input[type="text"],
      textarea,
      select {
        width: 100%;
        padding: 8px 8px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ff8f8f;
        border-radius: 14px;
        box-sizing: border-box;
      }

input의 type속성이 text인 태그와 textarea, select 태그에 CSS 속성을 주는 것이다.
width는 100% 비율로 가로 길이를 정하고 텍스트 색깔을 white로 지정한다. padding은 8px, margin은 세로 8px 가로 0px로 하고 display은 인라인 블록 요소로 설정하여 한 줄에 표시되지만 너비와 높이 속성을 조절할 수 있다. border은 1px의 두께로 실선으로 rgb값으로 지정한 색을 그린다. border-radius로 테두리의 모서리를 14px의 원형으로 만든다. box-sizing:border-box는 박스 모델의 크기 계산을 변경하여, 요소의 패딩과 테두리가 너비에 포함되도록 한다.

5.마치며
원래는 JavaScript까지 1주차 내용을 전부 적으려했는데 생각보다 내용이 길어져서 JavaScript는 따로 글을 작성해야 할 것 같다. 일기장 느낌으로 나만 알아볼 수 있게 되게 정신없이 쓴 글이지만 혹시나 읽어준 사람이 있다면 감사할 거 같다.