학습한 내용

웹 기초, html 기본구조, html 각종 태그 실습

웹 기초

웹 레이아웃 종류

- static page layout(정적 웹): 브라우저 창 크기에 상관없이 웹 요소 크기,위치 정해져있음
- liquid page layout(동적 웹): 브라우저 창 크기에 따라 웹 요소 크기 변동되나 위치는 고정
- adaptive page layout(적응형 웹): 브라우저 창 크기에 따라 웹 요소 크기, 위치가 끊기듯이 변동됨
- response layout(반응형): 브라우저 창 크기에 따라 웹 요소 크기, 위치가 부드럽게 변동됨

웹 표준과 웹 접근성

웹 표준: 웹 기술 규격, 표준 정의하는 용어. 검색엔진에게 웹사이트 요소의 역할 알려줌. 따라서 입력한 정보의 성격에 맞는 적절한 태그 사용해야 함.
웹 접근성: 장애인 등 사용자의 신체적 특성 등과 같은 제한 사항 고려해서 최대한 많은 사용자가 불편함 없이 사용할 수 있도록 권고하는 사항들. (ex. 사진에 설명을 단다)

FTP (File Transfer Protocol)

네트워크 상 서버에서 클라이언트로 파일 전송하는 방식, 규약. 파일 업로드, 다운로드 방식

라이브러리

개발도구 소개: VSCode, Sublime Text, Webstorm(유료)

이미 vscode를 쓰고 있어서 그냥 쓰던 것 쓰기로 했다.

공부소스

youtube
- 생활코딩: web1 ~web2 (css, javascript까지)
- 얄팍한 코딩사전
- thenewboston: html, css tutorial
- wes bos: javascripot30
기타 사이트
- edwith
- freeCodeCamp
- 모던 javascript 튜토리얼

html 실습

html 기본 구조: 상단 header, 본문 main, 하단 footer

<main> role="main" 익스플로러는 main태그 role 알려줘야 함
<section>->내부에 title 필요 <h> 태그
<article>: 내부에 <h> 제목, <p>내용
<aside> main내용과 관련성이 좀 떨어지는 내용
<footer>: 사업자 정보 등
<div>: 공간 분리 필요할 때

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style></style>
    </head>
    <body>
        <header>
            <h1><a href="#"><img src="" alt="로고"></a></h1>
            <nav>
                <ul>
                    <li><a href="#">menu1</a></li>
                    <li><a href="#">menu2</a></li>
                    <li><a href="#">menu3</a></li>
                </ul>
            </nav>
        </header>

        <main role="main">
            <section>
                <h2>Service</h2>
            </section>

            <section>
                <h2>Portfolio</h2>
            </section>

            <article>
                <h2>article title</h2>
                <p>article contentdjfaklfjdasfjeiwofjo</p>
            </article>

            <form action="">
                <label for="name">name</label>
                <input type="text" id="name">
            </form>

        </main>

        <aside></aside>
        <footer></footer>

        <div></div>
    
    </body>
</html>

html 태그: head

<meta>: 검색엔진 노출을 위해(요즘은 크게 영향 없다고는 하지만) description, keywords, author 정보 등을 적는다.
<title>: 페이지 제목
<link>: 페이지 제목 앞 로고. href경로 내 이미지 보여줌

<head>
    <meta charset="utf-8">
    <meta name="description"  content="Web Tutorial">
    <meta name="keywords"  content="html, css, tutorial, web">
    <meta name="author"  content="Yesol Lee">
    <title>HTML, CSS, Tutorial</title>
    <link rel="shortcut icon" type="image/icon" sizes="32x32" 
          href="./icon/Google-favicon-2015.png">
</head>

html 태그: body

<a>: 클릭 시 특정 주소로 이동함. 텍스트, 이미지 등 넣을 수 있음
<img>: 이미지 삽입 태그. src에 로컬 파일 디렉토리나 인터넷 이미지 주소 넣기 가능
<h>: headline태그. h1~h6까지 있고 중요도에 따라 글자크기도 변경됨.
<span>: 특정 글자들을 한 덩어리로 묶고 싶을 때. 나중에 여기 css적용해서 효과 넣기 가능
<mark>: 중요 키워드 표시. 디폴트는 노란색배경.

<a href="https://www.naver.com/" target="_self">네이버</a>
<img width="150px" height="100px" src="src="apple.png"" alt="사과 이미지">
<h1>
  <a href="https://www.naver.com/" target="_self">
    <img src="icon/naver-favicon.ico" alt="네이버로고">Naver
  </a>
</h1>
<p><span>동해물</span>과 <mark>백두산</mark>이</p>

html 태그: 리스트

<ul>, <ol>, <li>: 리스트 태그. 순서대로 순서없는 리스트, 순서 있는 리스트, 리스트 안 객체. ol, ul태그 안에 요소는 반드시 li가 나와야 한다.

    <ol>
        <li>메뉴1</li>
        <li>메뉴1</li>
        <li>메뉴1</li>
    </ol>

    <ul>
        <li>사과</li>
        <li>배</li>
        <li>수박</li>
    </ul>

    <ul>
        <li><a href="#">영화</a></li>
        <li><a href="https://section.cafe.naver.com/">
            <img src="icon/naver-favicon.ico" alt="네이버로고">카페</a></li>
    </ul>

html 태그: 비디오와 오디오

<video>
- default: src, controls
- 자동재생: autoplay ->chrome 제약-> muted와 함께 사용 가능
- 반복재생: loop
- 크기: width="", height=""
<iframe>
- 보안 이슈때문에 주로 youtube 영상 가져올 때만 사용됨. 실제 역할은 더 많음
- html 파일 안에 새로운 페이지 생성.
- youtube->공유->embeded->소스코드 복사 가능
<audio>
- default: src, controls
- 자동재생 불가능: 크롬에서 막음
- 반복재생: loop
- 크기 변동 불가

<video src="sample.mp4" controls autoplay muted
            loop width="400px" height="300px"></video>
<iframe width="560" height="315" src="https://www.youtube.com/embed/XA2YEHn-A8Q" 
    title="YouTube video player" frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen></iframe>
<audio src="sample_audio.mp3" controls loop></audio>

html 태그: form과 label, input, button

<form>: 서버로 값 보낼 때 쓰는 태그 method='POST'
<label>: 입력칸의 제목이나 이름
<input>: 특정 값 입력받는 창
<button>: type="submit"으로 form 안의 값을 서버로 보낼 때 씀.
name(범주), value는 서버에 보내는 값

    <form method="POST">
        <label for="input_name">이름</label>
        <input type="text" name="name" id="input_name" placeholder="이름을 입력하세요" 
        required minlength="2" maxlength="8">

        <label for="mail">이메일</label>
        <input type="email" placeholder="이메일을 입력하세요" id="mail" required>

        <label for="pw">비밀번호</label>
        <input type="password" id="pw" placeholder="최소 6글자 최대 12글자 입력" 
        required minlength="6" maxlength="12">

        <label for="num">숫자</label>
        <input type="number" id="num" placeholder="숫자만 입력" min="10" max="40" step="5"> 

        <label for="upload">파일 업로드</label>
        <input type="file" id="upload" accept="image/png, image/jpg, image/gif">
    
        <button type="submit">제출</button>
    
    </form>

html 태그: checkbox, radio, textarea, select-option

<checkbox>: 여러 값 중 중복선택하는 도구
<radio>: 여러 값 중 하나만 선택하는 도구
<textarea>: 긴 줄글 입력 도구
<select>, <option>: 드롭다운 박스
checked: default로 선택되어 있게 함.
disabled: 선택 불가 옵션. select 중 option값에 대한 설명 적을 때 사용 (주로 checked+disabled)

    <label for="n1">한국</label>
    <input type="checkbox" id="n1" name="country" value="한국">
    <label for="n2">일본</label>
    <input type="checkbox" id="n2" name="country" value="일본">
    <label for="n3">중국</label>
    <input type="checkbox" id="n3" name="country" value="중국">

    <label for="n1">한국</label>
    <input type="radio" id="n1" name="country" value="한국" checked>
    <label for="n2">일본</label>
    <input type="radio" id="n2" name="country" value="일본">
    <label for="n3">중국</label>
    <input type="radio" id="n3" name="country" value="중국">

   	<label for="content">문의내용</label>
    <textarea name="" id="content" placeholder="자기소개 입력" cols="30" rows="10"></textarea>

    <label for="job">직업 선택</label>
    <select name="job" id="job">
        <option disabled selected value="">Choose your job.</option>
        <option value="student">student</option>
        <option value="business man">business man</option>
        <option value="etc">etc</option>
    </select>

html 태그: 표 만들기 (Table)

<table>: 표 객체
<caption>: 표의 제목
<thead>: 표의 index부분
<tr>: table row. 표의 한 행 생성. thead 안에 주로 한 줄만 생성함
<th>: table head. thead의 각 열의 이름
<tbody>: 표의 값이 들어가는 부분
<td>: th에 해당하는 값이 들어감. th와 열 갯수 맞춰야 함.
<tfoot>: 합계 등 표 정리하는 내용 들어가는 곳
rowspan, colspan: 행, 열 병합할 셀만큼 숫자값 입력. 기준값이 되는 셀의 값만 나타남. 병합되는 셀은 th, td 등 삭제하기.

<table>
        <caption>상품정보</caption>
        <thead>
            <tr>
                <th>상품</th>
                <th>색상</th>
                <th>가격</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>아이패드 프로16</td>
                <td>그레이</td>
                <td>2000000</td>
            </tr>
            <tr>
                <td rowspan="2">맥북프로15</td>
                <td>그레이</td>
                <td>300000</td>
            </tr>
            <tr>
                <td>옐로우</td>
                <td>50000</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td colspan="2">총 가격</td>
                <td>2350000</td>
            </tr>
        </tfoot>
    </table>

실행결과

학습한 내용 중 어려웠던 점 또는 해결못한 것들

아직까진 알고 있는 내용이 대부분이었고 처음 보는 부분도 이해하기 어렵지 않았다.

해결방법 작성

모르는 것이 나오면 보통 구글 검색을 먼저 한다. 그래도 안 되면 팀즈에 질문해야겠다.

학습 소감

예전에 아주 기초적인 웹 페이지를 만들어 본 적이 있다. 그 때는 백엔드랑 같이 하기도 급해서 기능이나 디자인이(특히 디자인이!!!) 만족스럽지 못했는데 이번엔 좀 더 잘해보고 싶다. 또 예전엔 웹 프론트에 자바스크립트를 써 본적이 없는데 이번에 배운다고 하니 기대가 된다. 백엔드랑 같이 해야 뭔가 동작되는 것 같을텐데 어떻게 진행될지 궁금하다. 자바스크립트도 시작하게 되면 따로 아주 간단한 페이지라도 프론트와 백엔드 전부 만들어 보고싶다.

Author And Source

이 문제에 관하여(0628 개발일지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@lee_yesol421/0628-개발일지

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

0628 개발일지