자신의 일은 스스로하자

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

이번 포스팅 주제는 "내가 스마트인재개발원을 다니면서 느낀 점"입니다. (솔직 후기) 스마트인재개발원을 다니게 된 계기는 인공지능이라는 것을 배워보고 싶다는 생각 때문이었습니다. 그래서 이곳저곳을 알아보다. 기초 코딩부터 딥러닝까지 배울 수 있다는 점이 좋았고, 프로젝트를 수행한다는 점도 마음에 들었습니다. 무엇보다 광주에 연고가 없는 저는 숙소비용 지원이라는 점도 상당히 매력적이었습니다. 초반에는 java, python, hrml/css 등의 여러 언어의 기초를 배웠습니다. 처음에는 인공지능에 왜 java, html 같은 언어를 배우나 싶었지만, 앞서 말한 프로젝트를 수행하기 위해서는 필요한 언어들이었습니다. 또한 이러한 언어들을 배우면서 무조건 인공지능이 아닌 다른 분야도 생각해보는 계기가 되었습니다..

이미지 태그 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 페이지 생성과 페이지 작성, 페이지 실행하는 방법에..