반응형 HTML5 HTML&CSS 2018. 12. 21. HTML+CSS 기초 강의 - 9. 시맨틱 태그로 문서를 구조화하기 시맨틱 태그를 꼭 사용해야 하냐 마냐는 해묵은 문제이므로 여기서는 논외로 합니다. 사용하면 좋지만 사용하지 않아도 문제 없고, CSS로 레이아웃을 정의할 때 정해진 영역 용도에 따라 정의해주면 되니 좋지만, 시맨틱 태그 아니어도 CSS로도 거의 동일한 문서 구조화를 해서 관리가 가능합니다. 굳이 표현하자면 니맛도 내맛도 아닌 뭐 그런 태그입니다. 태그로 섹션 정의하면 이 섹션이 무슨 용도인지 바로 알 수 있지만, 이렇게 정의해서 사용해도 CSS 코딩을 하는 사람들은 무슨 용도인지 대부분 알고 있습니다. 결국은 문서작성자의 귀차니즘입니다. 처음에 사용하는 습관을 들였다면 모르겠지만, 이 강의를 만드는 필자같은 구세대? 웹퍼블리셔에게는 별로 손이 가지 않는 반찬같은 존재입니다. 꼭 사용할 것을 강력하게 추천.. HTML&CSS 2018. 12. 21. HTML+CSS 기초 강의 - 10. <embed> 태그로 멀티미디어 컨텐츠를 연결하기 멀티미디어 컨텐츠를 HTML 문서에 배치하는 경우의 99%는 유튜브 동영상을 HTML 페이지에 붙이는 것입니다. 그 외에는 캔버스 태그()를 이용해 애니메이션이나 게임을 붙이는 것 정도입니다. 온세상이 유튜브 세상이다보니, 과거처럼 플래시나 실버라이트 같은 동적 컨텐츠를 페이지에 붙이는 것은 석기시대쯤의 일이 되어버렸습니다. 동영상, 특히 유튜브 동영상을 HTML 문서에 배치하는 방법은 태그를 사용하는 방법, 태그를 사용하는 방법 2가지가 있습니다. 이중 가장 추천하는 방법은 태그를 사용하는 방법입니다. 태그는 HTML4 때는 표준이 아니었지만 HTML5에서 다시 표준이 되었습니다. 표준이 아닐때도 대부분 브라우저들이 지원했기 때문에 사용하는데 아무런 문제는 없지만 유튜브에서 기본으로 제공하는 영상 링크.. HTML&CSS 2018. 12. 21. HTML+CSS 기초 강의 - 11. HTML5 에서 사용하지 않는 태그와 속성들 html4 시절에 표준에서 제외되어 사라지는 것으로 예고되었고 html5에서는 표준에서 제외되면서 더이상 사용되지 않는 태그와 속성들입니다. 표준에서 제외되었을 뿐 대부분 브라우저들이 호환성 유지를 위해 아직 표준에서 제외된 많은 태그와 속성들을 지원합니다. 미래의 언젠가는 지원되지 않을 태그여서 언젠가는 브라우저에서 정상 표시 되지 않겠지만, 아직은 잘 동작한다는 점은 알아두어야 합니다. 사라지는 태그들 태그 설명 축약어 표시에 사용. 태그로 대체. 흑우 -> 흑우 애플릿 정의에 사용. HTML 문서의 기본 글꼴 정의에 사용. 텍스트를 더 크게 표시함. 디렉토리 목록 표시에 사용. 사용 글꼴 정의. font-family:글꼴명 CSS 속성으로 대체. 프레임 구조로 페이지 레이아웃을 작성하는데 사용. 또.. HTML&CSS 2018. 12. 21. HTML+CSS 기초 강의 - 12. 폼만들기 기초 1 - <form> 태그 기초 폼(양식)은 간단하게는 회원 로그인 화면 부터 회원가입 화면, 뉴스레터 신청 화면, 신청 폼 화면 같은 데서 사용하는 입력, 또는 선택 필드들을 모아 화면을 구성한 것을 말합니다. 아주 간단한 폼의 예를 들어보면 아이디 패스워드 로그인 유지 이렇게 로그인 폼을 만들어서 회원 로그인을 처리할 수 있습니다. HTML 기본 문서 구조에 위 폼을 붙여서 웹브라우저에서 확인하면 아래처럼 보입니다. 물론 이 폼에는 폼의 실제 동작에 필요한 많은 부분들이 빠져 있습니다. 이제 폼을 구성하는 필드들중 기초적인 것만 확인해보겠습니다. 폼의 껍질라고 할 수 있는 태그쌍 안의 폼을 구성하는 구성요소들은 대부분 태그를 사용해 만들게 됩니다. 또 폼을 구성하는 구성 요소들은 크게 2가지로 나눌 수 있습니다. 하나는 키보드로 내.. HTML&CSS 2018. 12. 21. HTML+CSS 기초 강의 - 13. 폼만들기 기초 2 - 폼(<form>) 태그 속성들 태그쌍 안의 폼 태그 요소들은 기본적으로 사용자와 상호반응해 입력/선택된 결과값을 서버에 전송해 영구적으로 저장을 하기 위한 태그들입니다. 태그는 폼 안에 포함된 필드 값들을 결국 서버에 있는 어딘가로 전송하기 위한 정보와 처리과정이 반드시 있게 됩니다. 태그의 속성(Attribute)들은 폼안의 어떤 값들을 어떤식으로 어디로 전송하겠다는 내용을 기본적으로 표시해야 합니다. 이런 속성값들이 없다면 폼은 서버로 전송되지 않거나, 올바른 데이터가 전송되지 않게 되고, 사용자가 입력/선택한 내용들은 저장되지 않고 소실되게 됩니다. 회원가입 폼을 작성해 서버로 전송했는데 올바르게 저장되지 않으면 아무도 여러분의 사이트에 로그인할 수 없게 되는 것입니다. 태그에 사용하는 속성은 많지 않습니다. 사용하는 속성들도 .. HTML&CSS 2018. 12. 21. HTML+CSS 기초 강의 - 14. 폼만들기 기초 3 - <input> 태그와 기본 타입들 폼의 알파와오메가 태그 태그는 폼의 대부분 요소들을 타입(type) 속성을 이용해 만들어 낼 수 있는 만능 태그입니다. 다양한 형태의 사용자 입력(input)을 받는 요소들을 만드는 태그다! 그래서 태그명도 태그입니다. 태그나 태그같은 예외적인 태그들도 있지만, 기본적인 폼의 기본 요소들은 모두 태그로 만든다고 이해하면 됩니다. 그만큼 중요하고, 폼의 근간이되는 태그이기도 합니다. 태그에 사용하는 다양한 속성들에 대해서는 다른강의에서 소개가 될 것이므로 이 강의에서는 태그를 이용해 어떤 폼 요소들을 만들 수 있는지, 또 그 폼요소들이 어떤 형태로 출력되고 사용되는지를 간단하게 알아보기 됩니다. 앞서 말한것처럼 태그는 type 속성을 이용해 요소의 타입을 구분합니다. 태그에는 아래 표에있는 타입들이 사용가.. HTML&CSS 2018. 12. 21. HTML+CSS 기초 강의 - 15. 폼만들기 기초 4 - 모바일 대응 <input> 타입들 모바일 대응 타입들 HTML5 표준에 새로 추가된 타입들 중 모바일 대응을 위한 타입들이 몇가지 있습니다. 모바일 전용은 아니지만 모바일 환경의 터치 및 드래그 환경에 더 적합지거나, 기본적인 입력 체크 기능을 통해 UI 메시지가 출력되도록 해서 가벼운 실행 환경을 위한 배려를 했습니다. 다만, HTML5 표준 태그 정의가 대부분 그렇듯이 표준만 정해져 있고, 화면에 표시하는 구현단은 각 웹브라우저의 몫이기 때문에 웹브라우저에 출력되는 모양은 브라우저마다 조금씩 다릅니다. 예를들어 range 타입의 경우 아래처럼 브라우저에 따라 조금씩 다른 모양으로 표시됩니다. 인터넷익스플로러 엣지 크롬/모바일브라우저/스마트폰 타입 설명 email 이메일 주소 입력 필드. 폼 전송시에 입력한 내용이 이메일 주소가 맞는지.. HTML&CSS 2018. 12. 21. HTML+CSS 기초 강의 - 16. 폼만들기 기초 5 - 호환성 문제가 있는 <input> 타입들 인터넷 익스플로러에서 지원되지 않는 태그 타입들 타입중 몇몇(주로 HTML5에서 추가된 타입들)은 인터넷 익스플로러에서는 지원되지 않습니다. time 타입 같은 경우 인터넷 익스플로러 11에서는 지원되지만, 아래 따로 정리한 타입들은 인터넷 익스플로러 마지막 버전인 11에서도 지원이 되지 않습니다. 인터넷 익스플로러 11이 마지막으로 나온 것이 2013년 말이고 그 무렵 이후 나온 새로운 타입들은 전혀 지원되지 않는다고 보면 됩니다. color, date 타입은 종종 사용하는 타입임에도 인터넷 익스플로러 호환성 문제를 염두해야하는 사이트에서는 이런 호환성 문제가 있는 타입들을 사용하는 대신 자바스크립트 라이브러리를 이용해 구현해야 합니다. 인터넷 익스플로러 사용자가 아직 적지 않은 국내 환경상 HTML5.. 이전 1 2 3 4 5 다음 반응형
