codingfarm

Top_Bar Bottom_bar A B Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt >ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non p..

..

우측 상단의 $\equiv$ 버튼을 누르면 숨겨진 버튼이 나온다. Main Mobile Toggle 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 Lorem ipsum 2012-12-09 - Birthday Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare..

www.w3schools.com/tags/tag_meta.asp 웹브라우저에 특별한 정보를 제공하는 HTML태그이다. 모바일 웹페이지는 화면에 대한 정보를 제공하려고 뷰포트 meta 태그를 사용한다. 대부분의 모바일 장치가 아래 표의 속성을 지원하지만, 일부 모바일 브라우저에서는 target-densitydpi 속성을 지원하지 않는다. 속성 이름 예시 설명 width width=240 width=device-width 화면의 너비 height height=800 height=device-height 화면의 높이 initial-scale initial-scale=2.0 초기 확대 비율 user-scalable user-scalable=no 확대 및 축소의 가능 여부 minimum-scale minimum-..

페이스북은 모바일 웹페이지로 접속하는 사람 수가 스마트폰 애플리케이션으로 접속하는 사람 수의 2배가 넘는다. OS제작 업체에서 제공하는 SDK를 사용해 만든 애플리케이션을 네이티브 애플리케이션이라 한다. 웹으로 만들어진 애플리케이션을 하이브리드 애플리케이션이라 부른다. 하이브리드 애플리케이션으로 만들면 HTML5를 사용해 한번만 개발하면 모든 OS에서 실행 가능하다. 게임을 제외하면 모든 애플리케이션은 하이브리드로 개발 가능하다. 하이브리드 애플리케이션을 제작 가능한 다양한 프레임워크가 있다. 모바일 웹 개발시 주의사항 모바일 OS의 종류가 같아도 내장된 브라우저가 다를 수 있다. 모바일 웹페이지 제작시 아래 내용을 주의해야 한다. over flow 속성을 사용해 스크롤을 넣을 수 없다. 대부분의 스마트..

www.w3schools.com/html/html5_semantic_elements.asp opentutorials.org/module/1892/10954 웹에서 정보로서의 가치가 중요해지면서 사람과 검색엔진 등 다방면 활용하기 좋게 하기 위한 여러 시도가 있었으며 semantic tag(의미론적 태그)는 그 시도들 중 제일 유의미한 결과를 가저다 주었다. semantic은 굉장히 추상적이고 광범위 하기에 한마디로 표현하기가 힘들다. 그렇기에 여기서는 HTML tag 를 의미에 맞게 잘 쓰기 위한 방법론이라 이해하면 된다. 가령 대표적인 semantic으론 tag의 이름만으로 웹의 상단,중단,하단, 제목등을 구분하게끔 하기 위한것이 있다. 가령 아래와 같은 HTML 코드를 보자 1 2 3 4 5 6 7 ..

어떤 데이터가 있을때 이를 설명하는것이다. 가령 html의 태그들은 그 태그들을 감싼 컨텐츠를 설명한다는 점에서 이들또한 meta data라 할 수 있다. 하지만 웹페이지의 저자, 내용등을 설명하고 요약하며 검색하기 위한 키워드 등을 설명하기 위한 수단도 필요하다. 이를 위해 쓰는것이 태그이다. 1234567891011121314151617181920212223 생활코딩은 일반인에게 프로그래밍을 알려주는 온라인/오프라인 강의입니다. Colored by Color Scriptercs

www.youtube.com/watch?v=XY5G4RN_LKg&list=PLuHgQVnccGMDUzDDCKW-pCZQY-MMCX5yB&index=27&t=1s 파일 업로드는 html보다는 서버측에서 해야할 일이 훨씬 많기에 html측면에서는 내용이 굉장히 추상적일수 밖에 없다. 그렇기에 여기서는 html쪽에서 해야할 부분만을 알아보는 방식으로 포스팅하겠다. 1 2 3 4 5 6 7 8 9 10 11 12 Colored by Color Scripter cs 제출버튼을 누르면 사용자가 선택한 파일은 upload.php라는 php어플리케이션이 이 파일을 받아서 컴퓨터에 저장하게된다. 이는 php뿐만 아니라 파이썬, 루비등도 마찬가지다. form태그에서 method는 post로 설정하고 enctype도 위 코..

form은 사용자가 입력한 정보를 서버로 전송하는 역할을 담당한다. 데이터를 전송하기 위해서는 여러 방법이 존재하며 이때까지 "get"이라는 방식이 있다. 그리고 여기서는 이외에 "post"방식에 대해 알아보겠다. 이를 이해하기 위해선 서버에 대한 지식도 필요하지만 서버쪽에서 정보를 받아 처리하는 메커니즘은 생활코딩의 "자바스크립트로 로그인 기능 구현하기" 세션을 참고할것 지금 당장은 서버에 대한 정보를 블랙박스화 하고 진행한다. 그렇기에 이해 안가는 부분은 넘길것 1 2 3 4 5 6 7 8 9 10 11 12 13 Colored by Color Scripter cs 위 html코드를 브라우저로 실행해보면 입력칸에 egoing 문자열을, 패스워드에 111111을 입력하고 "질의 보내기"버튼을 클릭한다...

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 text : password : textarea : default value Colored by Color Scripter cs 위 HTML파일을 브라우저로 열면 아래와 같다 겉보기에는 label 태그의 역할을 잘 모르겠다. 하지만 label에서 for로 설정한 text나 password문자열을 클릭하면 이와 연결된 input창의 커서가 활성화 되는것을 확인 할 수 있다. for를 통해 일일이 활성화 하는것이 귀찮다면 아래처럼 label태그로 통째로 감싸는 방법도 존재한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 text : ..

1 2 3 4 5 6 7 8 9 10 11 12 text : hidden : Colored by Color Scripter cs hidden 타입에 의해 입력창이 가려진 모습이다. 하지만 질의 보내기를 클릭하면 http://localhost/hidden.php?id=abcdef&hide=egoing hide=egoing 이라는 가려저 있던 정보가 그대로 전송되는걸 확인 할 수 있다.

1 2 3 4 5 6 7 8 9 10 11 12

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 색상(단일선택) 붉은색 : 검은색 : 파란색 : 사이즈(다중선택) 95 : 100 : 105 : Colored by Color Scripter cs radio 동시에 누를 수 있는 버튼이 하나가 전부 checkbox 동시에 여러가지 버튼을 누를 수 있다. 위 HTML파일을 브라우저로 열면 아래와 같은 모습으로 나온다. 질의 보내기를 누르면 아래 링크로 이동한다. http://localhost/order.php?color=black&size=100&size=105

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 색상 붉은색 검은색 파란색 색상2(다중선택) 붉은색 검은색 파란색 Colored by Color Scripter cs 위 html을 브라우저로 열면 아래와 같은 모습으로 나온다. 색상은 파란색, 색상2는 붉은색과 검은색을 선택하고 질의보내기를 누르면 아래와 같은 링크로 이동한다. http://localhost/color.php?color=blue&color2=red&color2=black

1 2 3 4 5 6 7 8 9 10 아이디 : 비밀번호 : 주소 : Colored by Color Scripter cs 위 코드의 html파일을 웹브라우저로 열면 아래와 같이 표시된다 아이디는 jeonghae, 비밀번호는 1234, 주소는 seoul로 설정하고 질의 보내기를 누르면 아래와 같은 주소로 이동한다. http://localhost/login.php?id=jeonghae&pwd=1234&address=seoul