AI Platform / Web

HTML 작성을 하고, js css를 넣어서 웹을 구성을 한다. 그리고 Reactjs 나 nextjs에서도 라이브러리를 이용해서 데이터를 넣는다. 이때 동기적으로 Javascript 파일을 가지고와서 핸들링을 많이한다. 오늘은 HTML 자체에서 js파일을 불러오는 방식에 대해 알아보도록 하자. 기초지만 쉽게 지나치는 부분이라 할 수 있다. 0. javascript 파일 불러오기 기본적으로 아래와 같이 javscript를 부르는 코드는 아무 위치에서나 사용이 가능하다. Hanpy javascript Test html 밖에서 사용해도 가능하다. javascript 파일을 불러오는 방식은 위와 같이 src를 사용해서 javascript 코드를 가져올 수 있다. 아니면 javascript 코드를 아래와 같이 직..

Links( tag) 링크를 달 때는 a 태그를 주로 사용한다. 는 "anchor"의 줄임말이다. 구글 이때 핵심은 https://를 꼭 적어줘야 한다. href 안에 이동할 주소를 적어준다. 위의 내용은 우리는 href를 통해 기존의 존재하는 네이버나, 구글과 같은 페이지 이동을 위해 사용한다. django, larabel, sping, react 등의 내부 view를 사용하는 경우에는 달라 질 수 있다. title 속성 구글 title에 적은 글에 마우스를 가져다 대면 정보가 뜬다. href="#" 링크 링크 설정은 귀찮은데 관련 모양은 잡아야 하는 경우에 #을 붙여준다. 눌러도 페이지 이동이 일어나지 않는다. 아래는 h1, img a 태그를 넣은 코드이다. Hanpy a tag에서 알 수 있듯이 공..

html의 form tag에 대해 알아보자. 어려운 내용은 아니니 중요 개념 위주로 적겠다. 기본 부터 확인하자. 기본 form 결과값은 아래와 같다. action="/" : 현재 페이지로 이동한다는 말이다. method="get" : get방식으로 보낸다는 말이다. type: reset : 은 적힌 값들이 사라진다 type: submit : 값들을 전달한다. 이때 name 값을 안적으면, 값이 전달하지 않는다. abc/123을 누르고 제출을 누르면 결과값은 아래와 같다. name을 꼭 적어줘야 값들이 위와 같이 key value 형식으로 들어간다. checkbox와 radio 축구 음악 게임 여성 남성 우선 결과 값 부터 확인하자. 아주 깔끔하게 잘 나왔다. 네모가 checkbox이다. 복수 선택이 가..

html으로 표만드는 방법에 대해 알아보자. table 부분은 쉽지만, 어렵다. 관련 부분을 잘 확인하고 이해해 보자. : 행 table row : 각각의 칸 table data : thead와 tbody로 제목줄과 데이터 줄을 분리 시, thead 부분에 들어가게된다. colspan : 열을 합친다.(가로로 합치기) rowspan : 행을 합친다.(세로 합치기) : columns 라는 것을 아타내기 위해 thead 내부에 tr과 td 를 넣어준다. 이때 td 부분을 th로 변경해준다. th는 table header라는 뜻이다. 그러면 굵어지고 가운데 정렬로 변경된다. : thead에 대한 data 부분을 나타내 준다. : table 제목이 생성된다. 셀 병합 속성: colspan, rowspan sco..

html에서 영상을 넣는 방법은 아래와 같이 어렵지않다. 기본적으로 아래와 같이 적으면, 영상은 발생하지 않고 시작 이미지만 발생한다. 여기에 아래와 같이 controls만 붙여주면 우리가 아는 이미지 파일이 작동하는 것을 알 수 있다. 다른 속성들도 알아보자. controls : 이 값을 넣어줘야 사진이 아니라 영상으로 보여진다. (이거 하나만 적어도 작동한다.) muted : 음향의 디폴트를 무음으로 만들어 준다. autoplay : 접속 시 바로 시작하게 한다. loop : 영상을 다보면 자동으로 다시 재생한다. 위와 poster를 넣으면 영상 시작전에 img 를 넣어서 썸네일을 넣을 수 있다. 시작 전에는 jpg 파일이 뜨고 재생을 누르면 mp4가 실행된다.

html의 image tag에 대해 알아보자 src에는 현재 위치에서의 경로를 넣어준다. 위의 예시는 img 파일에서 hanpy.jpg 이미지를 가져온다는 뜻이다. alt는 안 적어도 에러가 나지 않는다. 다만 시각장애인 분들이 음성으로 웹을 이해하기위한 설명이다. 크기 조정 > 기본적으로 width, height 속성을 정하지 않으면 이미지 원본 크기가 그대로 나온다. # 픽셀 기준 설정 # 브라우저 창의 퍼센트로 비율 설정 이미지가 잘리는 것이 아니라 찌그러지가나 늘어나면서 사이즈가 변경된다. 이 때 파일의 용량이 줄어드는 것은 아니기 때문에 처음부터 적절한 크기의 이미지가 필요하다. 위와 같이 width나 height 하나만 설정할 경우 설정 한 값은 변경이 되고, 나머지는 비율만 변경된다. 이미지..

0. 들어가면서 HTML5를 우리가 배워야 하는 이유는 웹 애플리케이션 개발을 하기 위함이다. 이것을 통해 우리는 웹 개발뿐만 아니라 전반적인 SW 개발 방법 및 학습 과정을 익힐 수 있을 것이다. html을 배운 후에 CSS를 배우고, 추가적으로 Javascript를 배우면 될 것이다. [Web/JAVASCRIPT] - [DOM_1] DOM이란 [Web/JAVASCRIPT] - [DOM_2]자바스크립트 역사와 기초문법[web] [Web/JAVASCRIPT] - [DOM_3]Javascript과 DOM 심화(Event) [Web/Django] - 1. django 시작하기 [Web/Vue.js] - [Vue.js] 1. 시작하기 [인공지능(Artificial Intelligence)/머신러닝] - AI_..

섹션이란 의미가 연결되는 콘텐츠의 집합을 나타낸다. 1. 구조적 마크업의 이해 구조적 마크업은 문서의 구조를 정의 콘텐츠의 종속관계 표현적 마크업은 문서의 외형을 정의 디자인 구조적 마크업과 표현적 마크업의 혼용(하지마) 문서의 구조는 HTML을 사용, 문서의 표현은 CSS를 사용 문제점 접근성 저해 높은 유지비용 문서 크기 비대화 블록 레벨 요소와 인라인 레벨 요소 블록 레벨 요소: 줄 바꿈이 일어나는 레벨요소 제목, 문단, 인용문 인라인 레벨 요소: 줄 바꿈이 일어나지 않는 행의 일부 요소 강조, 링크, 이미지 2. HTML5의 섹션 요소 의미가 연결되는 콘텐츠의 집합 section 졸업 예식 시작 행렬 교장 폐회사 졸업생 Moliy Susan> section요소로 내용을 분리 섹션 요소는내용적으로 ..