html만을 이용하여 로그인 및 쇼핑몰 홈페이지를 만들어보았다. 

우리가 사용하는 웹 사이트와는 비교할 수 없을 정도로 낮은 수준이지만 과제를 하면서 html의 원리 및 여러 태그, 특히 입력 폼에 대한 공부를 확실히 할 수 있었다. 

CSS, javascript를 배우기 전이라면 한번쯤 먼저 html만을 이용한 홈페이지를 만들어보고, 그 후 배운 것들을 덧붙여 발전하는 나의 홈페이지를 직접 확인해보는 것도 좋은 방법인듯 싶다. 

아이디, 비밀번호, 학번, 이름 입력 폼 등을 사용하고 '로그인' 버튼 클릭 시 환영 메세지를 띄웠다. <mark>(형광펜 기능) 태그가 되어 있는 'market'을 클릭하면 쇼핑몰 홈페이지로 넘어간다. 

사용자 입력을 위한 <input> 태그를 주로 사용하였다.

쇼핑몰 홈페이지에서는 기타 다양한 폼을 사용해 보았다. 

이 외에도 여러 폼을 사용하였다. 얼른 CSS도 숙달해 와야겠다. 무엇보다도 아직까지는 칸을 나누는 것을 표만들기로 할 수 밖에 없다는 것이 함정... 큰 홈페이지를 구상하는데 표로 하니 엄청 막막했다. 

레이아웃의 필요성을 느껴보라고 내주신 과제인 듯 하다.하하하... 

    
 회원가입

 

        

            
로그인 정보

    

         아이디  
        
    
    

         비밀번호  
        
    
    

         비밀번호 확인  
        
    
    
    

    

        

            
 개인정보

    

         이름  
        
    
    

         메일 주소  
        
    
    

         연락처  
        
    
    

         블로그/홈페이지  
        
    


    
    

▶ 간단한 회원가입 입력창 만들기

2주 전부터 폼 관련 태그들을 익혔다. 

아이디 및 비밀번호를 입력할 수 있는 로그인 창, 달력, 버튼 넣기, 진행 상태 표시 등등의 여러 폼이 있었다.

아직 css의 진도를 나가지않아 스타일 지정은 역부족이였지만 이제 html5을 활용하여 어느정도 틀을 구성할 수 있다!

다음 주차 목표는 html만을 이용하여 로그인 홈페이지, 쇼핑몰 홈페이지를 만들어보는 것이다. 

개발 환경은 Visual Studio Code. 

정말 기본적인 태그를 다룰 것이다. 

<h1>, <h2>, ... <h6> : 제목 텍스트. 숫자가 작을수록 제목이 큰 것이다. 

<ul>, <li> : 순서가 없는 목록 만들기.

<ol>, <li> : 순서가 있는 목록 만들기.

▶ 순서가 없는 목록 만들기를 이용한 자기소개

기본적인 nxn 표만들기

1. <table> 태그로 표자리 만들기 

2. <tr> 태그로 n개의 행 만들기 

3. <td> 태그로 각 행마다 셀 n개씩 추가 

표만들기 를 응용한 예제를 스스로 만들어보았다. 

▶ 행 또는 열을 합치는 기능을 활용한 표만들기