본문 바로가기
반응형

초보강의

HTML+CSS 기초 강의 - 11. HTML5 에서 사용하지 않는 태그와 속성들 0 2018. 12. 21. html4 시절에 표준에서 제외되어 사라지는 것으로 예고되었고 html5에서는 표준에서 제외되면서 더이상 사용되지 않는 태그와 속성들입니다. 표준에서 제외되었을 뿐 대부분 브라우저들이 호환성 유지를 위해 아직 표준에서 제외된 많은 태그와 속성들을 지원합니다. 미래의 언젠가는 지원되지 않을 태그여서 언젠가는 브라우저에서 정상 표시 되지 않겠지만, 아직은 잘 동작한다는 점은 알아두어야 합니다. 사라지는 태그들 태그 설명 축약어 표시에 사용. 태그로 대체. 흑우 -> 흑우 애플릿 정의에 사용. HTML 문서의 기본 글꼴 정의에 사용. 텍스트를 더 크게 표시함. 디렉토리 목록 표시에 사용. 사용 글꼴 정의. font-family:글꼴명 CSS 속성으로 대체. 프레임 구조로 페이지 레이아웃을 작성하는데 사용. 또..
HTML+CSS 기초 강의 - 12. 폼만들기 기초 1 - <form> 태그 기초 0 2018. 12. 21. 폼(양식)은 간단하게는 회원 로그인 화면 부터 회원가입 화면, 뉴스레터 신청 화면, 신청 폼 화면 같은 데서 사용하는 입력, 또는 선택 필드들을 모아 화면을 구성한 것을 말합니다. 아주 간단한 폼의 예를 들어보면 아이디 패스워드 로그인 유지 이렇게 로그인 폼을 만들어서 회원 로그인을 처리할 수 있습니다. HTML 기본 문서 구조에 위 폼을 붙여서 웹브라우저에서 확인하면 아래처럼 보입니다. 물론 이 폼에는 폼의 실제 동작에 필요한 많은 부분들이 빠져 있습니다. 이제 폼을 구성하는 필드들중 기초적인 것만 확인해보겠습니다. 폼의 껍질라고 할 수 있는 태그쌍 안의 폼을 구성하는 구성요소들은 대부분 태그를 사용해 만들게 됩니다. 또 폼을 구성하는 구성 요소들은 크게 2가지로 나눌 수 있습니다. 하나는 키보드로 내..
HTML+CSS 기초 강의 - 13. 폼만들기 기초 2 - 폼(<form>) 태그 속성들 0 2018. 12. 21. 태그쌍 안의 폼 태그 요소들은 기본적으로 사용자와 상호반응해 입력/선택된 결과값을 서버에 전송해 영구적으로 저장을 하기 위한 태그들입니다. 태그는 폼 안에 포함된 필드 값들을 결국 서버에 있는 어딘가로 전송하기 위한 정보와 처리과정이 반드시 있게 됩니다. 태그의 속성(Attribute)들은 폼안의 어떤 값들을 어떤식으로 어디로 전송하겠다는 내용을 기본적으로 표시해야 합니다. 이런 속성값들이 없다면 폼은 서버로 전송되지 않거나, 올바른 데이터가 전송되지 않게 되고, 사용자가 입력/선택한 내용들은 저장되지 않고 소실되게 됩니다. 회원가입 폼을 작성해 서버로 전송했는데 올바르게 저장되지 않으면 아무도 여러분의 사이트에 로그인할 수 없게 되는 것입니다. 태그에 사용하는 속성은 많지 않습니다. 사용하는 속성들도 ..
HTML+CSS 기초 강의 - 14. 폼만들기 기초 3 - <input> 태그와 기본 타입들 0 2018. 12. 21. 폼의 알파와오메가 태그 태그는 폼의 대부분 요소들을 타입(type) 속성을 이용해 만들어 낼 수 있는 만능 태그입니다. 다양한 형태의 사용자 입력(input)을 받는 요소들을 만드는 태그다! 그래서 태그명도 태그입니다. 태그나 태그같은 예외적인 태그들도 있지만, 기본적인 폼의 기본 요소들은 모두 태그로 만든다고 이해하면 됩니다. 그만큼 중요하고, 폼의 근간이되는 태그이기도 합니다. 태그에 사용하는 다양한 속성들에 대해서는 다른강의에서 소개가 될 것이므로 이 강의에서는 태그를 이용해 어떤 폼 요소들을 만들 수 있는지, 또 그 폼요소들이 어떤 형태로 출력되고 사용되는지를 간단하게 알아보기 됩니다. 앞서 말한것처럼 태그는 type 속성을 이용해 요소의 타입을 구분합니다. 태그에는 아래 표에있는 타입들이 사용가..
HTML+CSS 기초 강의 - 15. 폼만들기 기초 4 - 모바일 대응 <input> 타입들 0 2018. 12. 21. 모바일 대응 타입들 HTML5 표준에 새로 추가된 타입들 중 모바일 대응을 위한 타입들이 몇가지 있습니다. 모바일 전용은 아니지만 모바일 환경의 터치 및 드래그 환경에 더 적합지거나, 기본적인 입력 체크 기능을 통해 UI 메시지가 출력되도록 해서 가벼운 실행 환경을 위한 배려를 했습니다. 다만, HTML5 표준 태그 정의가 대부분 그렇듯이 표준만 정해져 있고, 화면에 표시하는 구현단은 각 웹브라우저의 몫이기 때문에 웹브라우저에 출력되는 모양은 브라우저마다 조금씩 다릅니다. 예를들어 range 타입의 경우 아래처럼 브라우저에 따라 조금씩 다른 모양으로 표시됩니다. 인터넷익스플로러 엣지 크롬/모바일브라우저/스마트폰 타입 설명 email 이메일 주소 입력 필드. 폼 전송시에 입력한 내용이 이메일 주소가 맞는지..
HTML+CSS 기초 강의 - 16. 폼만들기 기초 5 - 호환성 문제가 있는 <input> 타입들 0 2018. 12. 21. 인터넷 익스플로러에서 지원되지 않는 태그 타입들 타입중 몇몇(주로 HTML5에서 추가된 타입들)은 인터넷 익스플로러에서는 지원되지 않습니다. time 타입 같은 경우 인터넷 익스플로러 11에서는 지원되지만, 아래 따로 정리한 타입들은 인터넷 익스플로러 마지막 버전인 11에서도 지원이 되지 않습니다. 인터넷 익스플로러 11이 마지막으로 나온 것이 2013년 말이고 그 무렵 이후 나온 새로운 타입들은 전혀 지원되지 않는다고 보면 됩니다. color, date 타입은 종종 사용하는 타입임에도 인터넷 익스플로러 호환성 문제를 염두해야하는 사이트에서는 이런 호환성 문제가 있는 타입들을 사용하는 대신 자바스크립트 라이브러리를 이용해 구현해야 합니다. 인터넷 익스플로러 사용자가 아직 적지 않은 국내 환경상 HTML5..
HTML+CSS 기초 강의 - 17. 폼만들기 기초 6 - <input> 태그의 속성 0 2018. 12. 21. 태그의 속성 태그는 폼을 만드는데 가장 근간이 되는 태그이기 대문에 사용할 수 있는 속성도 방대하고, 속성값도 만만치 않게 많습니다. 이번 강의에서는 많이 사용하는 기본적인 태그 속성들과 사용 빈도가높지 않은 고급 속성들을 나눠서 알아보도록 하겠습니다. 내용이 워낙 방대하기 때문에 하나하나 다 예를 들어 설명하면 아마 영원히 끝나지 않는 강의가 될 수 있기 때문에 간략하게 표로 정리해서 눈에 익혀만 두고 넘어갑니다. 실전 예에서 어떻게 사용되는지 하나씩 예제를 보게되면 자연스럽게 이해가 될 겁니다. 기본 속성들 태그로 표현할 수 있는 폼 타입이 워낙 많기 때문에 사용할 수 있는 속성들도 그만큼 많습니다. 그중 비교적 많이 사용하고, 또 간단한 속성들만 따로 뽑으면 아래 표와 같습니다. 표에서 속성과 사용..
HTML+CSS 기초 강의 - 18. 폼만들기 기초 7 - <input> 태그 고급 속성 0 2018. 12. 21. 사용빈도가 낮은 태그 고급 속성들 특정 타입(type) 전용으로만 사용하는 속성(attribute)들과, HTML5 표준 속성으로 정의되어 있지만 실무에서는 많이 사용하지 않는 속성들입니다. 초보자라면 참고삼아 이해정도만하고 일단 넘어가고 사용할 일이 있을 때나 해당 속성을 보게되면 참조삼아 아래표를 봐가면서 사용하면 됩니다. 속성 사용값 설명 accept audio/*, video/*, image/*, .gif, .jpg, .png, .xls 등 파일확장자 태그를 파일 선택자로 사용할 경우, 미디어 타입, 또는 파일 확장자(.포함)를 지정하면 해당 종류의 파일만 파일 선택 대화상자의 기본 필터 조건으로 적용됩니다. 여러개의 파일 확장자를 쉼표로 구분해 지정할 수도 있습니다. 예를 들어 .jpg 를 ac..
HTML+CSS 기초 강의 - 19. 폼만들기 기초 8 - 드롭다운리스트 0 2018. 12. 21. 드롭다운 리스트() 목록에서 한개, 또는 여러개의 항목을 선택할 수 있도록 하는 폼 요소입니다. 드롭다운 리스트(Dropdown List) 로 부르며 태그는 와 을 함께 사용합니다. 셀렉트 태그라고 부르기도 하지만 표준 이름은드롭다운 리스트입니다. 2개의 태그를 조합해 하나의 폼 요소 UI를 표현합니다. 태그는 껍질의 역할을 하고, 태그는 태그 안에 목록 항목 1개를 표현하는 용도로 사용합니다. 태그를 사용하지 않는 몇 안되는 입력 요소중 하나로 작은 공간에 많은 선택 옵션을 나열할 수 있어 유용합니다. 폼의 요소로서 가지는 기능 자체는 체크박스나 라디오박스와 동일하지만 동적인 목록 관리 등에 훨씬 유리하기 때문에, 사용자 선택에 따라 목록을 업데이트 해야하는 경우, UI 화면의 변경 없이 반영이 가능해..
HTML+CSS 기초 강의 - 20. 폼만들기 기초 9 - 로그인폼 만들기 3 2018. 12. 21. 간단한 로그인 폼을 만들어 보면서 폼을 어떤 방식으로 만드는지 간단하게 알아보겠습니다. CSS 학습의 영역은 아니기 때문에 CSS와 관련된 부분들은 제외를 하고 순수하게 폼을 만드는 과정만 살펴보도록 하겠습니다. 먼저 미리 만들어진 간단한 폼을 보겠습니다. 아이디 비밀번호 로그인 로그인 상태 유지 아주 간단한 완성된 로그인 폼을 불필요한 부분들을 모두 잘라낸 모습니다. 눈치채셨을지도 모르겠지만 티스토리 로그인 폼입니다. 티스토리 로그인 폼을 이용해 간단하게 폼을 만드는 방법을 알아보겠습니다. 레이아웃을 잡는데 필요한 태그들과 클래스(class) 정의들을 모두 걷어내고 폼과 관련있는 부분들만 남기면 위와 같은 아주 간단한 폼이 됩니다. 하나씩 살펴보겠습니다. 태그를 보면 메써드(method)는 post 로..
반응형
닫기

티스토리툴바