학습한 내용

1강(웹프로그래밍이란?)
웹 사이트를 구성하는 요소 (정보영역-HTML, 디자인 영역-css, 기능담당-자바스크립트)
, 앞으로 공부하면서 참고할만한 사이트, 기초적인 개발용어(프론트엔드-고객이 보는 영역, 백엔드-고객이 못보는 영역, 크로스브라우징, 웹표준, 웹접근성, FTP, 라이브러리), HTML 언어에 대해 배움

<html><head>

    <meta charset="utf-8">

    <meta name="description" content="web Tutorial">
    <meta name="keywords" content="html, css, tutorial, web">
    <meta name="author" content="Gyeongshin Choi">

    <title>HTML, CSS Tutorial</title>

    <link rel="shortcut icon" type="image/icon" sizes="32x32" href="favicon.ico">


</head>

<body>




   <!-- a, img 태그소개 -->
   <!--
   <a href="https://www.naver.com/" target="_blank">네이버</a>

   <img src="" alt="사과 이미지" width="150px" height="80px">
   <img src="https://img.icons8.com/emoji/452/red-apple.png" alt="사과 이미지">
   -->


   <!--
   <h1>Title</h1>
   <h2>Title</h2>
   <h3>Title</h3>
   <h4>Title</h4>
   <h5>Title</h5>
   <h6>Title</h6>


   <h1>기업명 또는 서비스명</h1>

   <h1>
   	<a href="https://www.naver.com/">
   		<img src="https://img.icons8.com/emoji/452/red-apple.png" alt="애플">
   		</a>
   </h1>


   <h3>Service</h3>
   <h4>Service 부제</h4>

   <h5>Commerce</h5>
   <h5>Design</h5>
   <h5>Security</h5>

   <h3>Portfolio</h3>


   -->


   <!--
   <p>Nice to meet you</p>
   -->



   <!--
   <span>사과</span>
   <p>
   	 <span>동해물</span>과 백두산이 마르고 닳도록
   </p>

   <p><mark>사과</mark>는 사과 나무에서 나는 열매이다.</p>
   -->


<!--
<ol>
	<li>메뉴1</li>
	<li>메뉴2</li>
	<li>메뉴3</li>	
</ol>

<ul>
    <li>메뉴1</li>
	<li>메뉴2</li>
	<li>메뉴3</li>
</ul>


<ul>
	<li><a href="#">영화</a></li>
    <li><a href="#">부동산</a></li>
    <li><a href="#">음악</a></li>
</ul>

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>
-->

<!--
<button type="button">닫기</button>
<button type="submit">확인</button>
-->


<!--
<video src="sample.mp4" controls 
   autoplay muted
   loop
   width="300px" 
   height="300px" 
>
    
</video>
-->

<!--
<iframe width="800px" height="700px" 
        src="https://www.youtube.com/embed/_ysomCGaZLw" 
        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 muted loop>
</audio>
-->



</body></html>




   <!-- a, img 태그소개 -->
   <!--
   <a href="https://www.naver.com/" target="_blank">네이버</a>

   <img src="" alt="사과 이미지" width="150px" height="80px">
   <img src="https://img.icons8.com/emoji/452/red-apple.png" alt="사과 이미지">
   -->


   <!--
   <h1>Title</h1>
   <h2>Title</h2>
   <h3>Title</h3>
   <h4>Title</h4>
   <h5>Title</h5>
   <h6>Title</h6>


   <h1>기업명 또는 서비스명</h1>

   <h1>
   	<a href="https://www.naver.com/">
   		<img src="https://img.icons8.com/emoji/452/red-apple.png" alt="애플">
   		</a>
   </h1>


   <h3>Service</h3>
   <h4>Service 부제</h4>

   <h5>Commerce</h5>
   <h5>Design</h5>
   <h5>Security</h5>

   <h3>Portfolio</h3>


   -->


   <!--
   <p>Nice to meet you</p>
   -->



   <!--
   <span>사과</span>
   <p>
   	 <span>동해물</span>과 백두산이 마르고 닳도록
   </p>

   <p><mark>사과</mark>는 사과 나무에서 나는 열매이다.</p>
   -->


<!--
<ol>
	<li>메뉴1</li>
	<li>메뉴2</li>
	<li>메뉴3</li>	
</ol>

<ul>
    <li>메뉴1</li>
	<li>메뉴2</li>
	<li>메뉴3</li>
</ul>


<ul>
	<li><a href="#">영화</a></li>
    <li><a href="#">부동산</a></li>
    <li><a href="#">음악</a></li>
</ul>

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>
-->

<!--
<button type="button">닫기</button>
<button type="submit">확인</button>
-->


<!--
<video src="sample.mp4" controls 
   autoplay muted
   loop
   width="300px" 
   height="300px" 
>
    
</video>
-->

<!--
<iframe width="800px" height="700px" 
        src="https://www.youtube.com/embed/_ysomCGaZLw" 
        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 muted loop>
</audio>
-->


</body>
</html>

2강(HTML)

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
	
	<meta charset="utf-8">
	<title>2회차 HTML 강의</title>

	<style>
		
      tr, td, th {
      	  border: solid 1px #000000;
      }


      span {
           width: 300px;
           height: 300px;
           background-color: yellow;
      }

      h1  {
           width: 300px;
           height: 300px;
           background-color: yellow;
      }
  
    </style>
</head>
<body>

    <!--
    <form method="post">

    <label for="name">이름</label>
    <input type="text" id="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" placeholder="최소 6글자, 최대 12글자" id="pw" required
           minlength="10" maxlength="15">

    <label for="num">숫자</label>
    <input type="number" id="num" placeholder="숫자만 입력">

    <label for="upload">파일 업로드</label>
    <input type="file" id="upload" accept="image/png, image/jpg">

    <button type="submit">제출</button>

    </form>
     -->



     <!--
     <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 id="content" cols="40" rows="8"></textarea>
     -->

  
     <!--
     <select name="job">
     	<option selected disabled>직업을 선택해 주세요.</option>
     	<option value="학생">학생</option>
     	<option value="회사원">회사원</option>
     	<option value="기타">기타</option>
    </select>
    -->


    <!--
    <table>
    	<caption>상품 정보</caption>
        <thead>
        	<tr>
        		<th>상품</th>
        		<th>색상</th>
        		<th>가격</th>
        	</tr>
        </thead>

        <tbody>
        	<tr>
        		<td>맥북 프로 16인치</td>
        		<td>그레이</td>
        		<td>3,000원</td>
        	</tr>
        	<tr>
        		<td rowspan="2">아이패드 프로 12인치</td>
        		<td>레드</td>
        		<td>1,000원</td>
        	</tr>
        	<tr>
        		<td>블루</td>
        		<td>1,000원</td>
        	</tr>
        </tbody>

        <tfoot>
        	<tr>
        		<td colspan="2">총 가격</td>
        		<td>5,000원</td>
        	</tr>
        </tfoot>
    </table>
    -->

    <!--
    <header>
    	
    	<h1>
    		<a href="#">
    			<img>
    		</a>
    	</h1>


    	<nav>
    		<ul>
    			<li><a href="#">메뉴1</a></li>
    			<li><a href="#">메뉴2</a></li>
    			<li><a href="#">메뉴3</a></li>
    		</ul>
    	</nav>

    </header>


    <main rol="main">
    	 <section>
    	<h2>service</h2>
    </section>

    <section>
    	<h2>Portfokio</h2>
    </section>


    <article>
    	<h2>Article title</h2>
    	<p>Nice to meet youNice to meet youNice to meet youNice to meet youNice to meet you</p>
    </article>
    </main>


    <aside></aside>


    <footer></footer>


    <div></div>
    -->



    <!-- Inline / block -->
    <!--
    <span>Inline</span>
    <span>Inline</span>
    <span>Inline</span>

    <h1>Block</h1>
    <h1>Block</h1>
    <h1>Block</h1>
    -->



    



   

</body>
</html>

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

처음 접하는 단어들이 많아서 낯설었고 작성하는데 오랜시간이 걸렸다.

해결방법

천천히 강의를 반복적으로 보면서 배워나갔다.

학습 소감

아직은 어렵게만 느껴져서 용어들과 친숙해지는 과정이 필요할 것 같다.

0개의 댓글

Powered by GraphCDN, the GraphQL CDN