본문 바로가기

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

HTML+CSS (기초) html파일에 스타일을 css로 적용하기{외부,내부,이인라인} [짧음] 이번 예제에서는 스타일을 적용하는 3가지 방법을 짧게 알아볼 것이다. (외부, 내부, 인라인) 우선 내용이 있을 html파일을 만든다. 내용은 엄청 짧다. 텝 이름이 Test이고, 화면에 Hello world 글자가 보인다. 이제 여기에 스타일을 적용할 css파일을 만들자. 내용은 p요소에만 색을 파란색으로 적용하겠다. (p요소는 Hello world 임) 그리고 head 안에 link로 연결해주면 된다. 내부로 스타일을 적용할 수도 있다. css파일 없이 인라인으로도 적용이 가능하다. 글씨를 쓸때 그때 스타일을 주는 방식 [우선순위 제일 높음] 02_test.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 Test p{color: re.. 2019. 12. 5.
HTML+CSS (기초) style 적용, [내부, 외부 스타일 시트 적용] 처음에는 html문서에 style을 써서 컬러, 폰트를 적용하고, 나중에 css파일을 만들어서 적용을 할것이다. 이제 처음부터 차근차근 하나씩 적용하며 봐보자. 8가지 경우를 하나하나 살펴보겠다. 우선 기본 틀을 만들자. (주석은 딱히 안써도 됨. 혹시몰라 사진 밑에 복붙용 코드 있으니 따라해봐도 됨.) 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 CSS 기초 /* 이 영역안에서는 css언어의 문법을 따라야 함. */ /* 이 영역에서는.. 2019. 12. 5.
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.

티스토리툴바