Jung Yoon's study 고정윤

HTML5의 입력양식 태그의 새로운 속성값 알기!! 속성값 설명 color 색상 선택 창을 만든다. datetime 날짜 시간 창을 만든다.(년, 월, 일, 시, 분, 초의 분할)표준시간 datetime-local 날짜 시간 창을 만든다.(년, 월, 일, 시, 분, 초의 분할)표준시간 없음 email email 주소 창을 만든다. month 달과 년도의 창을 만든다.(표준 시간 없음) number 숫자 입력을 위한 창을 만든다.(숫자 제한을 둘 수 있음) max(최대값), min(최소값), step(허락하는 숫자 간격), value(기본값) range 정확한 값이 중요하지 않는 숫자를 입력하는 창을 만든다. search 검색창을 만든다. tel 전화 번호 입력 창을 만든다. time 시간 입력창을 만든다..

Can I use 새롭게 도입된 기술은 오래된 웹브라우저에서 동작하지 않습니다. 결국 얼마나 많은 웹브라우저가 이 기술을 사용할 수 있는가에 따라서 신기술의 도입 여부를 결정해야 합니다. Can I use는 이런 결정을 할 때 도움을 주는 서비스입니다. Can i use 가기 클릭!! 태그 설명 영상이 아닙니다. 넘어가도 되니 꼭 보시지 않아도 돼요 :)

비디오 - video HTML5에 등장한 video태그에 대해 알아봅시다. 웹페이지에 동영상을 삽입할 수 있는 태그입니다. video 태그 알기클릭 태그 안에 를 이용해서 비디오를 삽입해 줍니다. 브라우저 마다 여러가지 원인에 따라 지원하는 방식이 다릅니다. 때문에 코드 작성시 여러가지 형태의 동영상 저장 방법을 이용해야 합니다. 그럼 웹 브라우저가 그 중에 알아서 선택해서 동영상을 나타내 줍니다. : 동영상을 컨트롤 할 수 있는 기능이 생성됩니다.

외부문서삽입 - iframe 웹페이지에 다른 웹페이지를 삽입하는 방법인 아이프래임은 참 편리하면서도 위험한 방법입니다. 왜냐면 신뢰할 수 없는 사이트에서 악성코드 같은 것을 포함하고 있다면 삽입된 외부소스에서 악성코드가 실행될 수 있기 때문이죠. 이런 문제를 해소하기 위해서 HTML의 최신 버전인 HTML5에서는 샌드박스라는 것을 도입했습니다. 아이프래임으로 삽입된 웹페이지에서 자바스크립트 등이 실행되지 않도록 하는 방법인데요. 아이패래임이 무엇인지, 사용법, 그리고 보안을 개선할 수 있는 새로운 방법을 소개합니다. iframe 태그 알기 클릭 ※보안방법 - iframe 태그에 "sandbox"라는 속성을 추가하여 위험한 소스는 원천적으로 차단합니다. - "보안"은 매우 중요합니다. 후에 더 정확히 숙지..

모바일 지원 (viewport) 모바일 지원시 중요 코드 아래 이미지의 코드는 모바일 지원 코드 작성시 기계적으로 꼭!!! 넣는다고 생각 하시면 됩니다. 전체 코드

웹개발자 도구 웹개발자도구는 웹 개발을 하는데 필요한 여러가지 기능을 모아둔 도구들로 웹브라우저별로 비슷한 기능의 도구를 제공하고 있습니다. 여기서는 HTML 개발과 관련된 부분에 초점을 맞춰서 크롬 개발자 도구를 살펴봅니다. 아래 링크는 크롬 개발자 도구에 대한 자세한 수업으로 연결됩니다. 더 상세히 알아 보기 크롬개발자 도구 수업 바로가기 클릭 웹페이지 코드보기 웹 브라우저의 오른쪽 마우스 클릭후 "페이지 소스 보기" 를 클릭합니다. 그 후에 Elements로서 html코드를 볼 수 있습니다. 느낀점 - 개인적으로 크롬의 개발자 도구는 매우 유용하며, 공부하기 좋은 도구임을 느꼈습니다. - 여러개를 스스로 클릭해 보면서 가각의 도구가 어떤 용도가 있는지 직접 경험해 보는것이 가장 좋을 것 같습니다.

검색엔진 최적화 검색엔진 최적화가 무엇인지를 구글의 사려를 통해서 알아봅시다. html의 코드를 의미론 적으로 타당하게 작성하는 것이 가장 좋은 검색엔진 최적화 입니다. 구글 검색엔진 최적화 가이드 클릭

의미론적 태그(SEMENTIC TAG) 목적 문서의 정보를 보다 잘 표현하기 위해서는 의미에 맞는 태그를 잘 사용해야 합니다. 특히 HTML5에서는 웹페이지에서 통상 많이 사용하는 구조에 의미를 분명히 부여하기 위해서 의미론적 태그(semantic element)를 새롭게 정의해서 제공하고 있습니다. 그 목록은 아래와 같습니다. article 본문 aside 광고와 같이 페이지의 내용과는 관계가 적은 내용들 details 기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의 figure 삽화나 다이어그램과 같은 부가적인 요소를 정의 footer 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의 header 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의 main 문서에서 가장 중..

Meta태그 어떤 데이터가 있으면 그 데이터를 설명하는 데이터가 Meta데이터 입니다. 웹 페이지를 만들면 그 페이지를 설명하는 데이터가 있습니다. 그것이 바로 Meta데이터 입니다. 글의 본문에 표현되지 않지만 글의 본문을 설명하는 상당히 중요한 부가적 데이터들이 바로 Meta 데이터 입니다.(검색, 키워드 등등...) : 파일을 저장하면 utf-8으로 저장 됩니다. 그리고 "이 문서는 utf-8으로 저장된(인코딩) 문서 입니다." 라는 것을 표기하는 것 입니다. 이것을 생략하면 웹 브라우저는 이 문서가 어떤 방식으로 저장 되었는지 알 수 없기 때문에 화면이 깨질 수 있습니다. Meta태그 더 알아보기 클릭 "author"은 저자라는 뜻 입니다. 웹 페이지는 30초 간격으로 리프레쉬 됩니다.(자주 사용..

글꼴 - font (퇴출됨_쓰지마세요) 해당 태그가 왜 퇴출 되었는가를 배우면서, html이 정보로서 얼마나 중요한가를 알아 봅시다. 폰트태그는 시각적인 정보일 뿐이지(디자인일 뿐이지) 아무런 의미를 가지고 있지 않습니다. 웹 페이지로서의 "정보" 로서의 가치가 떨어 집니다. 따라서 이 태그는 HTML에서 퇴출 됩니다. 그리고 HTML의 정보를 꾸며주는 새로운 언어 CSS를 통해서 폰트를 디자인 할 수 있게 되었습니다. 따라서 HTML은 "정보"로서의 가치가 높은 언어라는 것을 꼭 기억해 둡시다!!

정보로서의 HTML 본 수업의 하위에서는 HTML을 보다 좋은 정보로 만들기 위한 방법들과 생각할 문제들을 다루고 있습니다.

form : 파일 업로드 ※이해가 잘 안가는 것은 당연한 것이니 너무 상심말고 영상을 들으면 됩니다! 1.파일을 선택하는 UI를 만드는 것은 input태그입니다. 2.파일 전송 태그에서 method="post" enctype="multipart/form-data" 속성값을 추가해 줍니다. 3.

Method 정보를 경우에 따라서는 url로 전달하는 것이 아니라 감춰서 전송해야 할 때가 있습니다. 그때 전송 방법의 타입을 정하는 method="post" 으로 입력하면 데이터가 보이지 않게 전송 됩니다. form 을 이용해서 데이터를 전송할 때는 대부분 "post"(안보이게) 방식을 이용합니다. ("post" 로 지정하지 안으면 기본값 "get" 으로 적용되는데, 여기서 "get"은 데이터를 보이게 전송하는 방법입니다. ) 서버쪽 엔지니어가 원하는 방향으로 방식을 지정하여 작성합니다. 결론 : "get"방식은 url을 통해 데이터를 지정하는 것이고 "post" 방식은 url이 아닌 방식으로 숨겨서 전송하는 방법입니다. 해당 영상만을 보고서는 이해가 잘 안될 수 있어요. 당연한 일이니 이해 안가시면 ..

컨트롤의 제목 - label label속성 더 알아보기 : 클릭 느낀점 솔직히 해당 태그는 동영상으로 이해가 잘 안된다. 직접 실습을 해 보는 것이 가장 빠르게 익힐 수 있는 방법일 것 같다 :)

입력양식 - form : 데이터 전송-hidden 눈에 보이지 않지만 서버쪽으로 내용을 전송할 때는 쓰는 태그입니다. UI가 없지만 서버로 데이터를 전송하고 싶을 때 hidden이라는 type의 input태그를 사용하면 되는 구나 정도만 이해하고 넘어 가세요 :) hidden태그_브라우저 적용 hidden태그 _코딩

입력양식 - form: button(버튼) button(버튼) 버튼은 HTML만을 이용할 때는 대부분 사용하지 않고, "자바스크립트"와 같은 프로그래밍 언어를 사용할 때 활용도가 높은 태그 입니다. 버튼 태그_브라우저 적용 버튼 태그 _코딩

선택(Drop down List) 드롭다운박스 or 콤보박스를 만들어 주는 에 대해 알아 봅시다. 동영상 코딩 동영상 코딩_구조 나눠 보기 단인 선택, 다중선택 단일선택 : radio / 다중선택 : checkbox 라디오 버튼 체크박스 라디오/체크박스 코딩

입력양식 - form: 문자 입력 : name라는 속성은 모든 form태그에 필요한 속성입니다. : value는 사용자가 사이트에 들어왔을 때 해당 텍스트필드에 보이는 기본 값 : 여러줄을 입력할 수 있는 텍스트 필드 : cols은 colum(뜻 : 행)의 줄임말 입니다. 50글자가 입력될 수 있을 만큼 폭이 커집니다. : 문자 10줄을 입력할 수 있을 만큼 폭이 커집니다. 기본값 입력 : 기본값은 그 텍스트 사이에 입력할 수 있습니다. 출처 : 생활코딩