자신의 일은 스스로하자

입력 양식 태그 입력 양식을 만들 때 사용하는 태그입니다. 위 사진과 같은 회원가입 form이 대표적인 입력 양식입니다. 입력 양식은 form태그를 사용해 생성합니다. form 태그 속성 -> 입력 데이터의 전달 위피를 지정합니다. ( 프로그래밍과 관련된 내용으로 다루지 않음) -> 입력 데이터의 전달 방식을 선택합니다. method에서 자주사용되는 속성 값은 post와 get입니다. 위 코드처럼 get방식으로 전송했을 경우 여기서 제출을 누르면 위 사진처럼 주소가 변경된 것을 볼 수 있습니다. get방식은 주소에 데이터를 입력해서 보내는 방법입니다 post방식으로 실행했을 경우 앞에 get방식처럼 제출 버튼을 누르면 get과는 달리 url주소가 변하지 않는 것을 볼 수 있습니다. post방식은 공개되서..

오디오 태그 오디오 태그는 웹 브라우저에서 플러그인의 도움 없이 음악을 재생할 수 있게 만들어주는 HTML 태그입니다. 이 기능은 HTML5에서 추가된 기능이어서 인터넷 익스플로러 8 이하에서는 사용할 수 없습니다. audio 태그 속성 : 오디오 태그에 속성이 많습니다. 이 중에서 중요 속성만 설명드립니다. -> 음악파일의 경로 지정 -> 음악을 재생하기 전에 모두 불러올지 지정 -> 음악을 자동 재생할지 지정 -> 음악을 반복할지 지정 -> 음악 재생 도구를 출력할지 지정 재생 시킬 노래는 브레이브걸스의 Rollin입니다. * 오디오 파일을 미리 HTML 파일과 같은 폴더 안에 넣어두었습니다. 위 코드를 실행시키면 아래와 같이 컨트롤러와 함께 음악이 출력됩니다. 동영상 입니다. loop속성을 넣으면 ..

이미지 태그 HTML은 img태그를 사용해 이미지를 넣습니다. img태그에서 가장 중요한 것은 속성입니다. img 태그 속성 -> 이미지의 경로 지정 ->이미지가 없을 때 나오는 글자 지정 -> 이미지의 너비 지정 -> 이미지의 높이 지정 위 코드를 실행시키면 아래 사진처럼 고양이 그림이 출력된 것을 볼 수 있습니다. 하지만 출력된 이미지가 원하는 크기가 아닐 수 있습니다. width, height 속성을 사용해 원하는 크기로 변경할 수 있습니다. img 태그사용 시 src경로와 이미지 이름을 확인 후 출력해주세요. 사진을 찾기 쉽게 아래 사진처럼 실행파일 안에 img파일을 만들었습니다. 위 코드처럼 src경로가 없는 상태로 출력하게 되면 아래처럼 이미지가 없을 떄 실행되는 alt속성의 글이 출력됩니다...

테이블 태그 테이블테그는 HTML 페이지에서 표를 만들 때 사용하는 태그입니다. 테이블 요소 태그 -> 표 내부의 행 태그, table row를 의미 -> 행 내부의 제목 셀 태그, table header를 의미 -> 행 내부의 일반 셀 태그, table data를 의미 header1 header2 1 1 2 2 위 코드를 실행하면 아래의 표형식 배치만 나오게 됩니다. 표처럼 테두리를 만들기 위해서는 속성이 필요합니다. 테이블 태그 속성 ->표의 테두리 두께 지정 위 코드에 border 속성을 추가해 테이블을 만들면, 아래 사진처럼 실행됩니다. border 속성 값이 커질 수록 겉 테두리가 두꺼워지는 것을 확인할 수 있습니다. th 태그와 td 태그 속성 -> 셀의 높이 지정 ->셀의 너비 지정 tabl..

목록 태그 웹 페이지의 내비게이션 메뉴를 만들 때 목록 태그를 사용합니다. 기본 목록 -> 순서가 없는 목록 태그입니다. -> 순서가 있는 목록 태그입니다. -> 목록의 요소를 나타냅니다. ol 태그 red blue yellow ul 태그 red blue yellow 위 코드들를 실행하면 아래 사진처럼 출력돼 ol태그와 ul태그의 차이를 알 수 있습니다. 중첩해서 목록 Color red blue yellow Fruit apple peach grape 중첩해서 목록을 만들 때는 li태그 안에 목록 태그를 입력하면 아래 사진처럼 출력됩니다. 정의 목록 : 정의 목록은 특정 용어와 그 정의를 표현할 때 사용하는 태그입니다. -> 정의 목록 태그입니다. -> 정의 용어 태그입니다. -> 정의 설명 태그입니다. ..

2021.06.27 - [HTML, CSS] - [HTML] #3_1 HTML 기본용어/ 구조/ 글자 태그 [스마트인재개발원] [HTML] #3_1 HTML 기본용어/ 구조/ 글자 태그 [스마트인재개발원] HTML기본 용어 / 구조 HTML은 태그, 요소, 속성으로 이루어져 있습니다. 태그는 HTML 페이지에서 객체를 만들 때 사용하는 것입니다. 사용할 수 있는 태그는 모두 미리 정해져 있습니다. 이 태그를 사 oneself.tistory.com 이전 글과 이어집니다. 글자 형태 태그 : 글자 형태 태그를 사용해 웹 페이지의 글자 형태와 의미를 부여합니다. -> 굵은 글자를 나타냅니다. -> 기울어진 글자를 나타냅니다. -> 작은 글자를 나타냅니다. Hyper Text Markup Language Hyp..

HTML기본 용어 / 구조 HTML은 태그, 요소, 속성으로 이루어져 있습니다. 태그는 HTML 페이지에서 객체를 만들 때 사용하는 것입니다. 사용할 수 있는 태그는 모두 미리 정해져 있습니다. 이 태그를 사용해 만들어진 객체를 요소라고 부릅니다. 태그에 추가 정보를 부여할 때는 속성을 사용합니다. 사용할 수 있는 속성 또한 W3C재단에서 정의해두었습니다. HTML구조는 아래 사진을 참고해 주세요. Hello HTML -> 태그는 웹 브라우저 현재 웹페이지가 HTML5 문서 임을 인식하게 해 줍니다. 반드시 문서의 첫 번째 줄에 있어야 합니다. ->모든 HTML페이지의 루트 요소입니다. lang 속성은 실제 웹 브라우저가 동작하는데 어떤 영향도 끼치지 않습니다. (검색엔진이 웹페이지를 탐색할 때 해당 웹..

2021.06.01 - [HTML, CSS] - [HTML] #1 Visual Studio Code 다운로드/기본 설정[스마트인재개발원] [HTML] #1 Visual Studio Code 다운로드/기본 설정[스마트인재개발원] HTML이란? HTML(HyperText Markup Language)하이퍼텍스트 마크업 언어는 윕 페이지를 위한 지배적인 마크업 언어입니다. HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아 oneself.tistory.com Visual Studio Code의 기본 설정 방법은 위 포스팅을 확인해주세요. Visual Studio Code의 기본 설정을 다 했다면 이번에는 본격적으로 HTML 페이지 생성과 페이지 작성, 페이지 실행하는 방법에..