본문 바로가기

안드로이드 웹앱 콘테츠 개발자 양성(국비지원)/HTML11

HMTL (기초) viewport (화면이 비율이 달라질 시, 보이는 차이) viewport 사용 차이 웹에서는 정상으로 보이나, 화면이 작은(휴대폰)것으로 보면 작게 보인다. 지금은 자동으로 적용이 되서 사용 안할 수도 있다. 우선 글씨와 이미지를 추가하자. 웹 브라우저로 볼때와 휴대폰으로 볼때 사이즈가 다르다. 그러면 사이즈를 해당 휴대폰 화면에 맞춘다면? 아래 사진과 같이 알맞게 보인다. 그러나 휴대폰마다 사이즈가 다르다 그래서 아래 줄을 사용하자. 알맞게 맞춰준다. 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 View Port Test This is viewport test 2019. 12. 19.
HTML (기초) 여러 가지 텍스트 박스 페이지 맨아래에 복붙 코드 있음 우선 html파일 하나를 만들자. 이번 예제에서는 04_input2.html 하나만 만들면 된다. 날짜를 선택하는 창을 만들겠다. 색상을 선택하는 창을 만들겠다. 휴대폰에서 적용되는 키패드 모양과 텍스트 입력시 X버튼이 자동 생성되는 창을 만들겠다. 슬라이드 웨젯을 만들어보자. (볼륨 조절할때 사용 등) 개수를 카운트하는 위젯도 있다. 로 선 구분을 하고, 텍스트 박스에 힌트가 표시되는 것을 만들자. 입력하지 않으면 동작이 안되는 텍스트 박스를 만들자. 수정 불가한 , 최대 글자수 제한을 해보자. 포커스를 받는 텍스트박스와 자동 완성 기능을 하는 리스트를 만들어 보자. 만약에 텍스트 박스에 입력된 값 별개로 데이터를 보내고 싶을때 hidden type을 이용하자. sam만.. 2019. 12. 4.
HTML (기초) 웹페이지 구성 및 GET,POST 로 데이터 보내기 / 파일 업로드 - (최종 복붙용 코드는 페이지 맨 아래 있다.) 파일이 정상적으로 업로드 되었다. (서버는 닷홈에서 무료호스팅을 만들어서 사용. 아래에 방법 있음) 이제 시작해보자. 우선 입력할 수 있는 칸을 만들고 여러가지 화면 구성을 해보자. 입력 칸에 아무 값이나 입력하고 제출을 눌러보자. form요소는 페이지가 바뀌는 것이다. 그런데 넘겨준 데이터를 못받는다.(표시는 되나 제어할 수 없다.).그래서 php,jsp,asp등이 필요하다 제출을 누르면 action에 입력한 페이지를 실행시키고, 키값에 해당하는 값을 전달한다. GET방식은 주소에 표시됨 이제 우리는 getTest.php문서를 새로 만들어서 작업하고 실행시킬 것이다. (값을 getTest.ph로 전달한다는 의미) 문서를 만들자. 받을때는 키 값으로 받아.. 2019. 12. 4.
HTML (기초) input으로 여러가지 버튼 및 영역 만들기 (radio, lable, checkbox, button 등등) 이제 하나하나 다양한 버튼을 만들어보자. 버튼 모양은 너무 안예쁘다. 이미지로도 버튼을 만들 수 있다. 우선 임으로 이미지를 추가하자. 방법은 두 가지가 있다. 버튼에 이미지를 입히거나, 애초에 이미지를 버튼처럼 사용하는 것이다. 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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93.. 2019. 12. 4.
HTML (기초) Audio(오디오),video(비디오), iframe, div,span 이번 예제는 오디오Audio(오디오),video(비디오), iframe, div,span의 간단한 예제를 해보자. 이제 파일을 만들어서 연습해보자. Day2 폴더를 만들고 거기에 01_ex.html 파일을 만들었다. 임의로 mp3 파일을 같은 위치에 넣었다. Day02 폴더 안에 기존에 있던 old_pop.mp3를 ogg 파일로 변환시키겠다. https://www.online-convert.com/ Online converter - convert video, images, audio and documents for free Convert files like images, video, documents, audio and more to other formats with this free and fast o.. 2019. 12. 4.
HTML (기초) 테이블 만들기 우선 04_table.html 파일을 만들자. 테이블의 형식은 2 robin nice to meet you. 20191203 테이블 제목 111 222 333 444 555 666 NAVER aaa bbb ccc 테이블 안에 어떤 요소든 넣을 수 있음. 한글은 자동 줄바꿈이 됨. jlfjalkgjkajglsalfjsallgjasggjlgjlkggjakdslgjdkalgjkdagjkd 2019. 12. 3.
HTML (기초) 리스트, 링크, 이미지 HTML에서 리스트, 링크, 이미지 사용에 대하여 알아보자. 맨 아래 복붙용 코드 있음 이제 만들어 보자. 하나의 파일을 만들고 여기에 하나하나 실행하면서 결과 화면을 보겠다. 새로 03_ex.html 파일을 만들었다. 링크를 걸어보자. 현재 작업 중인 Day01 폴더를 보면 02_text.html 파일이 있다. 같은 폴더의 다른 문서를 링크해보자. 이제 다른 폴더에 있는 것을 링크해보자. 보통은 요소 안에 요소를 넣어 사용한다. 클릭 시 이미지를 보여주는 이미지 링크도 가능하다. 자신이 원하는 위치에 이미지 파일을 넣는다. [예제에서는 같은 폴더에 넣었다.] 다운로드 링크도 가능하다. 클릭 시 다운로드가 되도록 해보자. 웹 페이지에 이미지를 넣어보자. 라인언 캐릭터 주소 https://encrypted.. 2019. 12. 3.
HTML (기초) 기본 구성 연습 2 (요소 다루기 ) 요소를 다뤄보는 간단한 예제를 해보겠다. 우선 새로운 파일을 만들자. 이름은 02_text.html으로 하겠다. title만 입력하고 결과 화면을 보자. 크롬으로 확인하겠다. 텝 이름이 Text인걸 확인할 수 있다. 안에 글씨를 써보자. 크롬에서는 잘보이나, 다른 브라우저에서는 다를 수 있다. Edge로 열어보겠다. 글씨가 깨지는 것을 볼 수 있다. 다른 브라우저에서도 한글이 잘 보이도록, 안에 를 항상 써주자. 파일을 저장하고, 새로고침 했을 때 한글이 잘 나오는 것을 확인할 수 있다. 부분에 태그 없이 한글을 써도 보이나, 띄어쓰기, 줄 바꿈은 적용이 안된다. 특수문자 중에 조심해야할 것은 이다. HTML은 태그문으로 이루어져 있기 때문에, 특수 문자 사용 시 이것만 기억하면 된다. 우선 다른 특수문.. 2019. 12. 3.
HTML (기초) 기본 구성 연습 1 (글자, 스타일) 우선 나는 D드라이브에 Web폴더를 만들었고, 그 하위 폴더에 Day01를 만들었다. 거기에 01_ex.html을 만들자. 코드를 작성하였다면 확인해보자. 크롬으로 열겠다. 만약 하나의 페이지에서 html 요소가 또 있다면 어떻게 될까? 해보자. 페이지가 열려 있다면, 새로고침으로 확인 가능하다. 작성한 파일을 저장(Ctrl+S)하고 웹페이지 새로고침(F5)하자. 이제 스타일을 적용해보자. 새로운 스타일을 또 적용하면 어떻게 될까? 요소 밖에 글씨를 쓴다면 어떻게 될까? 다른 것을 써봐도 요소 밖에 있어도 적용이 된다.. 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 30 31 32 33 34 35 36 37 3.. 2019. 12. 3.

티스토리툴바