HTML 1. 자기소개 웹사이트

밋밋하고도 날것의 미리보기,,,,,

 

HTML 과 CSS를 공부했지만 분명 지금 열심히 해도 나중에 다 까먹을 것이라는 걸 알기때문에!!!!

수업들으면서 배운 것을 기반으로 조금씩 응용해서 만들어보았다

 

CSS도 없이 제작한 페이지 하나라서 그렇다 할 외적요소가 없지만,

오히려 단순하니 직관적인게 매력적이다 흐흫...

 

See the Pen Untitled by baeseohee (@baeseohee) on CodePen.

 

V. 적용한 것

1. <label> 사용 + id 지정
   • label을 사용한 것을 클릭하면 input 칸으로 커서가 이동하는 것을 볼 수 있다.
   • 이는 label 속성 for=""과 input의 속성 id="" 의 따옴표 안 id가 일치하기 때문이다.
2. required 속성
   • 필수로 입력되어야 하는 input의 속성에 required를 넣었다.
   • 입력하지 않고 제출을 누르면 "이 입력칸을 작성하세요"라는 경고 메시지가 뜬다.
3. placeholder 속성
   • placeholder로 input 박스를 입력하기 전에 보여주는 메시지를 입력했다.
4. 다양한 input의 type 속성
   • input은 다양한 type을 제공한다.
   • 이 사이트는 text, email, password, date, range, color, submit을 이용해 봤다.

 

차근차근 하다보면 언젠가 QA로써 프론트엔드 개발자와 소통하는 과정이 훨씬 더 수월해지겠지......