[Hanaro] 7일차 / Bootstrap을 이용하여 화면만들기, HTML5 form 태그

Bootstrap을 이용하여 화면 만들기

• 부트스트랩을 이용하여 회원가입 화면 작성하시오.
  • 작성 코드 (signUpScreen.html)
    • https://github.com/yubin-im/DigitalHanaro_TIL/blob/master/htmlcss/signUpScreen.html
• 게시판(list, view, write) 화면을 작성하시오. (tailwind 사용)
  • 작성 코드(boardScreen.html)
    • https://github.com/yubin-im/DigitalHanaro_TIL/blob/master/htmlcss/boardScreen.html

 

 

[UI/UX 디자인과 구현(HTML/CSS)]

HTML5/CSS3 고급 기법

• form 태그
  • form 태그 안에 input 태그를 두어서 사용자로부터 정보를 입력받아 서버로 보내는 역할을 담당
  • form 태그가 안 맞거나 없으면 서버로 정보를 보낼 수 없음
  • 중첩적으로 사용 불가, 하나의 웹페이지에 하나의 form 태그를 두는 것이 일반적
  • get 방식 전송 name속성1=값1&name속성2=값2&name속성3=값3 의 형태
  • 속성 값
    • 각 태그 식별: id, name, class
    • name 속성: input, textarea, select
    • id랑 class 속성: table, div, p, h …
• form 태그의 주요 속성
  • action
    • 정보 전송 시 처리할 서버페이지 url 지정 (php, jsp, asp)
  • method
    • 정보를 서버로 보낼 때 보내는 방법 지정 (get, post)
  • enctype
    • 파일을 보낼 때 이 속성을 채워서 보내야함
  • name
    • 폼 객체 접근 (document.폼이름)
  • id
    • document.getElementById(”아이디”)

 

Tailwind CSS Framework로 UI/UX 구성하기

• Tailwind
  • 많은 utility 클래스로 이루어진 CSS 프레임워크
  • HTML 요소의 class 속성에 설정하는 것만으로 스타일링 가능
  • 공식 사이트: https://tailwindcss.com/