본문 바로가기

코딩121

CSS 소개 CSS 소개 (생활코딩) CSS는 HTML이 없으면 혼자 잘 지낼 수 없음. HTML : 독립적 성격. (정보로서의 가치) --> 어떻게 정보를 잘 표현할 것인가? CSS : 보조 디자인 성격. 정보와 디자인의 분리.왼쪽의 html 코드로 작성한 font color 오른쪽의 css 코드로 작성한 태그 안의 color 만약 이 코드가 수 천개의 코드라면...? HTML은 일일이 수정해야 하고, 용량도 많이 먹는 반면에 CSS는 단 한번에 수정도 가능하고, 용량도 적음. 굉장히 효율적이다. HTML은 정보로서의 가치 CSS는 디자인으로서의 가치 가 있다. 2017. 2. 15.

HTML5 입력 값 체크 HTML5 form4 : 입력 값 체크 # 사용자가 틀린 것을 입력하였을 때 그것이 유효한지, 안전한 지에 대해서 --> 유효성 검사 HTML 5에서는 입력 값 체크에 대해 대폭의 기능 추가가 있었음. 코드만으로도 사용자가 입력한 값의 유효성을 체크할 수 있음. # required : 필수적으로 적어야 하는 경우 사용자가 반드시 입력. --> 필수와 옵션을 구분할 수 있음. (유효성 검사와 관련) # pattern="반드시 정규표현 식이 온다." (HTML5 약속) pattern="[a-zA-Z]" : 앞에 반드시 문자를 강제. -- aa 연속 X, pattern="[a-zA-Z][a-zA-Z]" pattern="[a-zA-Z.]" : 뒤에 .(점)을 입력하면 어떤 문자가 와도 괜찮다. pattern=".. 2017. 2. 14.

HTML5 form3 : 새로운 속성들 HTML5 form3 : 새로운 속성들 (생활코딩) 입력 양식에서 어떤 변화가 있었는가. 속성 변화(form) --> 모든것이 자동완성 --> 첫 화면에 id 커서 창에 바로 입력 가능. --> 비밀번호만 자동완성 안함. 2017. 2. 14.

HTML5의 입력양식 HTML5의 새로운 제출양식 (생활코딩) # (복습)form : 서버쪽으로 제출할 때. 이 대폭 추가됨. # 숫자가 아닌 것은 입력 못함. 규제! 세부적인 속성 min="10", max="15" 이렇게 정할 수 있어서 사용자의 입력을 강제,유도,규제할 수 있다. (특징1) # 모바일 디바이스에서는 키보드 키패드가 숫자로 나옴. input의 새로운 것. 편리 (특징2) # 사용자가 유효하지 않은 값을 입력하면 그것을 거부하도록 할 수 있음. 도움말 : 15이하 값을 입력해야 합니다. (특징3) # 열거 (모두 뜻함.) : 모두 특징1,2,3을 가지고 있음. date 태그 # month는 년과 월까지만 입력 가능 # week는 년과 몇번째주 입력 가능 # time 는 년도와 시간 입력 가능 # email은 .. 2017. 2. 14.

HTML5 - can i use HTML5 : can i use (생활코딩) HTML5 현재 최신 버전인데, 새로운 신기술이 나오면서 다른 웹 브라우저에 적용되지 않는 경우가 있다. 그럴 경우 신기술을 적용할 건지에 대한 의사결정 여부를 생각해야 되는 경우가 있는데 caniuse.com 이것을 도와주는 사이트이다. 전세계 사람들이 어떤 버전에서 그것이 동작하고 동작하지 않는지 대략적으로 알 수 있고, 비율을 볼 수 있다. 2017. 2. 14.

HTML5 - video 삽입 HTML5 - 비디오 삽입 (생활코딩)Html 5 부터 비디오 삽입 가능 브라우저 마다 지원하는 동영상 코덱이 다름. 태그에 controls 라는 속성을 추가하면, 영상을 제어할 수 있는 재생, 소리 버튼이 나타난다. 2017. 2. 14.

외부문서삽입 - iframe 외부문서 삽입 - iframe (생활코딩) 외부에 있는 컨텐츠를 자신의 웹 사이트로 가져올 때, iframe을 많이씀. 지정된 블록은 생활코딩 - HTML 수업을 눌러 Youtube 접속 후, 소스코드를 본 것인데 저것 역시 iframe을 이용했다는 것을 확인할 수 있음. 다만, 출처가 의심되는 사이트를 iframe으로 가져오면, 사용자에게 악의적인 공격을 가할 수 있음. (보안에 상당히 취약한 기술) # HTML5 - sandbox가 있고 없고의 유무. form 형식에서 sand box가 있으면 제출을 해도 데이터가 전송되지 않음. # 보안은 타협해서는 안됨. 2017. 2. 13.

모바일 지원 (view port) 모바일 지원 (view port) {생활코딩} 웹 페이지 화면 최적화! 모바일 버전 본래 화면 - 마우스 오른쪽 클릭- 검사 Ctrl Shift M 라는 코드를 써준다. 태그에 width = 폭, device= 장치 장치에 맞게 폭을 설정해라 라는 뜻. initial-scale=1.0 --> 화면 (줌)을 확대되거나 축소되지 않게 첫 페이지를 구성해라 라는 뜻. 2017. 2. 13.

웹 개발자 도구 웹 개발자 도구 웹 개발을 하는데 있어서 여러가지 기능을 제공해주는 도구. 크롬 웹 개발자 도구 HTML에 관련된 부분만 (크롬 개발자 수업 부분은 따로 공부할 것.) 분석하고 싶은 웹 페이지에서 마우스 우클릭 - 검사를 누르면 그것을 분석할 수 있음. 1. 디바이스 모드 더블 클릭해서 스마트폰, 데스크탑 등의 다양한 환경에서 현재 웹 사이트가 어떻게 화면에 보이는지 볼 수 있는 것. 좌측 상단 두번째에 있음. 2.네트워크 (Tab) 웹페이지가 어떤 자료를 주고 받는지 ex) img를 사용자 몰래 다운받아서 그것이 어떻게 지연, 정지되는지 분석하여 보여줌. 두가지만 다뤘음. 2017. 2. 13.

검색엔진 최적화 검색엔진 최적화 (생활코딩) 구글의 검색엔진 최적화 가이드 (내용) 1, 2, 3, 4, 5, 6, 7 모두 검색엔진 최적화에 도움이 되는 권장사항 같은 것임. 태그를 잘 사용하는게 얼마나 중요한지, HTML의 정보로서의 가치가 얼마나 중요한지 보여주는 수업. 1. 검색엔진 회사 원리개인 웹 사이트 등록 -> 검색엔진 회사 소프트웨어 로봇 접속 사이트 html 다운 - 정보 해석 - 필요에 따른 배치, 분류 사용자 검색했을 때 가장 적합한 콘텐츠물 제공 즉, 검색엔진 최적화라는 것은 저러한 과정에 있는 개인 사이트 콘텐츠를 잘 해석하도록 노력하는 것을 검색엔진 최적화. 검색엔진 최적화(SEO : Search Engine Optimization)를 위해 무엇을 해야하는가. -. html 코드를 의미론적으로.. 2017. 2. 13.

의미론적 태그 의미론적 태그 (생활코딩) semantic 태그라는 것은 광범위하고 추상적인 것이지만, HTML 로서의 semantic 태그의 의미를 고찰해봄. 말 그대로 의미로서의 태그이며, 특별한 기능이 없다. 다음과 같이 HTML5에서 자주 사용하는 것을 표로 (출처 : 생활코딩) 나타낸 것이다. 문서의 구조와 가독성을 높이기 위해 이러한 의미론적 태그를 자주 사용한다. header, footer, nav, section, article 2017. 2. 13.

meta meta meta 는 어떤 데이터를 설명해주는 데이터! 메타 태그는 웹 페이지에 실제로 표현되지는 않지만, 부가적으로 그것을 설명해주는 태그임. ex) 여러 정보를 컴퓨터에 저장하는 방법을 인코딩이라고 하는데, 이 인코딩 방식을 utf-8로 컴퓨터가 해석을 해서 보여주는 과정을 디코딩. meta 태그의 종류. 이것은 30초마다, 웹 페이지가 리프레쉬(재설정) 된다는 것을 의미. 저자, 키워드 등. 정보로서의 HTML 2017. 2. 13.

글꼴 - font (퇴출됨) 글꼴 - font (퇴출) 정보로서 역할을 하는 HTML인데 이것은 정보로서 표현되는 것이 아니라 그냥 디자인적으로 표현되는 것이라 현재는 퇴출되었음. 를 쓰지말라고 설명해주는 수업. 의 크기는 1부터 7까지 있고, 기본적으로 3이 표준값임. 그런데 여러 값이 있을 때, 가 중복이 되서 HTML 양이 많아지고, 용량도 커져서 수정하기도 힘든 상황이 연출되었음. 그래서 폰트 류 같은 태그를 대부분 퇴출 시켰고 이것이 의미하는 것은 HTML이 정보로서 집중시키는게 정보로서 소중한 언어라는 것을 뜻한다고 볼 수 있음. 디자인은 새로운 CSS 언어로 맡기고 HTML은 정보로서의 가치에 집중했다. 2017. 2. 13.

정보로서의 HTML 정보로서의 HTML (생활코딩) HTML 은 단순히 웹 페이지에서 어떤 것을 표현하는 것이었는데 웹이 폭발적으로 성장하면서 인류의 지식을 담아내는 그릇 같은 역할을 하기 시작했음. 왜 HTML을 정보라고 하는지에 대해 그리고 어떤 역할을 가지고 있는지... 등 알아볼 것임. 2017. 2. 13.

파일 업로드 form : 파일 업로드 (생활코딩) (서버쪽에서) 서버쪽에서 파일 저장 원리. enctype="multipart/form-dat> 처리 php 코드 input 태그로 파일 업로드를 한다. 파일 업로드는 서버쪽과 연관성이 크다. 2017. 2. 12.

이전 1 2 3 4 5 6 7 ··· 9 다음

티스토리툴바