devlogs-210628

Wonseok Choi·2021년 6월 28일

대구AI스쿨

목록 보기

2/49

시작하며

평소 개발 공부를 하며 notion에 필요한 부분을 정리해놨지만, 이번 대구AI스쿨을 계기로 누구에게나 열려있는 공간에 정리해두는 것도 재미있어보여 velog를 시작하게 되었다. 기록을 남기면서 어떤 식으로 짜임있게 정리해야 일목요연하게 정보 전달이 될 지 생각하며, 나만의 방식을 찾아 볼 생각이다.

우선 대구AI스쿨에서 안내한 1) 학습한 내용 2) 학습내용 중 어려웠던 점 3) 해결방법 4) 학습소감 의 형식으로 기본 틀을 잡겠다.

velog 사용이 손에 익으면 개발일지 뿐만 아닌 관심있는 주제에 관한 글을 써보는 것도 재미있을 것 같다.

고려할 점

이미 HTML,CSS 그리고 JavaScript는 쭉 공부한 상태라, 내가 배우는 대구AI스쿨 강의의 모든 내용을 기록하지는 않겠다. 몰랐던 부분 || 중요한 부분 || 다시 리뷰한 부분 위주로, 다시 말해 내 마음대로 기록을 남길 예정이다.

배운 내용

웹사이트의 4가지 Layout

Static(정적인), Liquid(동적인), Adaptive(적응형), Responsive(반응형)

적응형 + 반응형을 적절하게 섞어서 구축하는 것이 일반적

우수 웹사이트 소개하는 곳

디비컷(국내): https://www.dbcut.com/bbs/index.php
지디웹(국내): http://www.gdweb.co.kr/main/
awwwards(해외): https://www.awwwards.com/
mediaqueri(해외): https://mediaqueri.es/
straightline(일본): http://bm.straightline.jp/all

웹사이트 구현 시 3가지 고려 요소

1. 크로스브라우징 (cross browsing)

어느 브라우저에서도 차이없이 구현되며 기능에서도 차이가 없도록 웹사이트를 구축해야 함

2. 웹표준

웹사이트 구축에 사용한 tag의 종류가 해당 정보의 성격과 일치하도록 해야 함

3. 웹접근성

웹사이트의 유저는 다양하며, 그 중에는 접근성이 다소 제약이 있는 장애인들도 있다. 그런 유저들까지도 고려하여 웹사이트를 바람직하게 구축하여야 함

<img src="apple.png" alt="사과 이미지" />

// 위의 alt 속성값이 웹접근성과 관련.
// 1) 접근성이 떨지는 유저를 위한 속성값으로 생각하면 됨
// 2) 간혹 이미지값이 뜨지 않을 때 x로 뜨게 되는데 이런 경우 이미지설명으로 들어가는 값

참고할 Youtube 채널

30일 동안 하나씩 javaScript 기능을 구현: https://www.youtube.com/c/WesBos/playlists
전세계 브라우저 점유율 비교: https://gs.statcounter.com/
원하는 기능이 어디서 쓸 수 있는지/없는지(cross browsing때 참고): https://caniuse.com/
제작한 사이트/코드가 웹표준/웹접근성에 맞는지 확인: https://validator.w3.org/
남들이 간단하게 기능 구현한 것들 참고: https://codepen.io/

HTML

tags

1. link

<link rel="shortcut icon" type="image/icon" sizes="32x32" href="pencil.png"/>
rel, type, href를 이용해 favicon을 삽입할 수 있음

2. ul (unordered list)

ul, ol사용 시, 반드시 li가 children으로 먼저 사용되어야 함

3. video

<video src="sample.mp4" controls autoplay muted loop></video>
1) controls를 사용해야 video 태그 이용 가능
2) autoplay 기능은 chrome에서 막아둠, 따라서 muted를 넣어야 autoplay 사용 가능 ∵ 소리가 갑자기 재생되는 경우를 방지하기 위한 chrome의 제약사항
3) loop: 무한재생
4) width와 height로 크기 설정 가능
5) audio 또한 video 태그와 같은 속성을 가짐

4. label && input

<label for="firstname">1. First Name</label>
<input id="fistname" placeholder="enter your first name" required minlength="2" maxlength="8" />
1) label의 for와 input의 id를 일치시키면 label클릭으로 input의 cursor를 둘 수 있음
2) required로 필수 입력 값을 지정할 수 있음

<p>Where have I been to?</p>
      <div>
        <label for="n1">South Korea</label>
        <input id="n1" type="checkbox" name="country" value="southkorea" />
      </div>
      <div>
        <label for="n2">Canada</label>
        <input id="n2" type="checkbox" name="country" value="canada" />
      </div>
      <div>
        <label for="n3">United States</label>
        <input id="n3" type="checkbox" name="country" value="usa" />
      </div>
      <div>
        <label for="n4">New Zealand</label>
        <input id="n4" type="checkbox" name="country" value="newzealand" />
      </div>

1) checkbox는 다중 선택이 가능하게 함
2) name & value pair의 값을 data로 전송 가능(후에)
3) label의 for와 input의 id를 일치시키면 label클릭으로 해당 checkbox를 선택 가능

<p>Where haven't I been to?</p>
      <div>
        <label for="c1">Laos</label>
        <input id="c1" type="radio" name="country" value="laos" />
      </div>
      <div>
        <label for="c2">North Korea</label>
        <input id="c2" type="radio" name="country" value="northkorea" checked />
      </div>
      <div>
        <label for="c3">Thailand</label>
        <input id="c3" type="radio" name="country" value="thailand" />
      </div>

1) checkbox와 다르게, 단일선택만 가능
2) checked를 이용해 미리 선택 가능

5. textarea

<label for="question">question</label>
<textarea id="question" cols="20" rows="3"></textarea>
1) 유저가 입력할 수 있는 텍스트 입력 창 생성 가능
2) cols, rows로 창의 default 사이즈 선택 가능

6. select && option

<select name="workout">
  <option selected disabled>What workout is for today?</option>
  <option value="chest">Chest</option>
  <option value="legs">Legs</option>
  <option value="arms">Arms</option>
  <option value="back">Back</option>
  <option value="shoulders">Shoulders</option>
</select>

1) selected와 disabled는 같이 써주기
2) select를 사용 시 반드시 option만 children으로 사용하기

7. table

<table>
        <caption>
          Product Info
        </caption>
        <thead>
          <tr>
            <th>name</th>
            <th>color</th>
            <th>price</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Macbook Air m1</td>
            <td>Space grey</td>
            <td>₩1,500,000</td>
          </tr>
          <tr>
            <td rowspan="2">iphone 8</td>
            <td>Space grey</td>
            <td>₩900,000</td>
          </tr>
          <tr>
            <!-- <td>iphone 8</td> -->
            <td>Red</td>
            <td>₩950,000</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="2">Total</td>
            <td>3,350,000</td>
          </tr>
        </tfoot>
</table>

1) rowspan과 colspan으로 병합 가능

8. 나머지 중요 tags

main, section, article
<main role="main">
      <section>
        <h2></h2>
      </section>
      <article>
        <h2></h2>
      </article>
</main>
1) section: 대표성 있는 title이 반드시 필요(h tag 사용하기)
2) section: main안/밖에서 사용 가능

aside, footer, div, form
1) aside: 본문과의 관련성이 상대적으로 떨어지는 내용 작성 시 사용
2) footer:하단 작성 시 사용
3) div: 임의의 작은 공간
4) form: 유저가 입력하는 공간, input은 반드시 form과 함께 사용

Inline / Block 개념

Inline은 공간 관련 세부 설정 불가능 ex) span

배운 내용 중 어려웠던 점

이미 공부한 내용이기에 어려운 점은 없다. 하지만 다시 리뷰하기에 괜찮은 내용이기도 하다. 첫 정리라 시간이 다소 오래 걸렸지만 앞으로는 단축해 볼 계획이다.
다만 notion에 정리해 둔 내용을 앞으로 어떻게 velog와 형평성 있게 나누어 기록할 지 고민이 필요하다.

소감

어떤 것을 정리하고 가다듬는 것을 좋아하는 성격이라 (평소 notion에 정리하는 것을 즐겨하는 것과 같이) 재미있고 배운 것을 리뷰하는 것이기에 의미도 있다고 생각한다. 조금 더 효율적으로 이 시간을 활용할 수 있는 방법을 찾아야 할 것 같다. 또한 쓸데없는 군더더기를 제외하는 연습도 필요하고. 무엇보다 생산적인 기분 및 능동적 재미를 더 느끼고 발견하여 꾸준히 출간할 수 있도록 하자.

Wonseok Choi

이전 포스트

devlogs-210629

다음 포스트