Wise Computing Life

이번 포스팅은 깃허브를 이용해서 웹 호스팅하는 방법에 대하여 다루어 보겠습니다. 지난주에 html의 태그와 자바스크립트를 연습할때 todolist 웹 어플리케이션을 만들어 보았는데요 ㅎ.. 웹앱이라하기에도 부끄러운 수준이긴 하지만 마땅한 파일이 별로 없어서 이거로 한번 호스팅 해보겠습니다. 결과 링크는 아래와 같습니다. https://kimhaechan1022.github.io/web1/ Todo List kimhaechan1022.github.io 페이지의 컨텐츠는 별볼일 없으니, 위 링크는 "내가 만든 웹페이지가 하나의 도메인을 가지고 호스팅될 수도 있구나~" 하고 참고 해주세용 그럼 시작해 보겠습니다. 깃허브의 계정은 있다 생각하고 계정을 만드는 과정은 생략하겠습니다. 가장 먼저 아래의 그림에 나오..

이번 포스팅은 HTML의 input form 태그에 대하여 다루어 보겠습니다. form 이란 입력된 데이터를 서버로 전송할때 사용하는 HTML 태그입니다. 사용하는 프레임워크 언어에 따라서 속성값은 조금씩 변화될수 있습니다. 만약 php 언어를 사용하여 서버를 구성할때, input data를 로그인 서버로 보내고 싶다면 아래와 같습니다. 하지만 이번 카테고리를 진행함에 있어 프레임워크 또는 백엔드에 대한 내용은 자세히 다루지 않겠습니다. 때문에, action="" 라 선언한 채로 모든 인풋 타입을 다루어 보겠습니다. 1. text box 형태의 input form 첫번째로 다루어볼 input form은 텍스트박스 형태의 인풋 타입이며 구성완료시 화면은 다음과 같습니다. 위와 같은 양식의 form은 많이 ..

이번 포스팅은 HTML의 태그중 TABLE에 대하여 다루어 보겠습니다. 먼저 Table 태그를 이용해서 만들어볼 결과 페이지는 다음과 같습니다. 아래의 코드는 위의 테이블을 만들기 위한 HTML 코드이며 붙여둔 행번호를 통하여 테이블 태그를 다루어 보겠습니다. line 2 : 제목으로 테이블 태그 예제 라는 문구를 달아주었습니다. line 6, 32 테이블 태그의 기본 선언입니다. 태그를 통해 태그안의 내용이 테이블을 구성하는 요소임을 나타냅니다. 속성으로 들어간 border="2" 는 테이블을 구분하는 구분선들의 굵기를 나타냅니다. line 8, 10 테이블을 구분지어질 요소를 Table head 의 약자인 태그를 사용하여 선언하였습니다. 내부의 자식 태그인 태그의 경우 table data 태그와는 달..

안녕하세요 :) 이번에 해볼 내용은 지금까지 포스팅해온 것들을 활용하여 Webpage 를 링크로 엮은 Website를 만들어 보겠습니다. 지금까지 만든 페이지는 아래와 같습니다. 그런데 리스트를 보면 itzy의 노래 와 오마이걸의 노래도 있는데 현재 문서에는 스테이씨의 노래 밖에 없죠 ㅎ 이를 링크를 이용해서 각각의 문서를 따로 따로 만들어 연결해주고 제일 첫화면으로 사용할 index.html에는 welcome simple music info website 라는 문과와 함께 리스트가 표출되게 만들어 보겠습니다. 내용은 이전 포스팅에서 충분히 다루었기 때문에 코드와 결과 동영상, 디렉터리 구조만 첨부 하겠습니다. 결과 영상) 디렉터리 구조 & 코드) Webpage 를 링크로 엮은 Website Webpag..

안녕하세요 :) 이번에 다루어 볼 내용은 상위 태그에 속하는 다섯가지 태그인 html, head, body, meta, title 입니다. 언급한 순서대로 다루어볼 예정은 아닙니다! 이번에도 역시 지난 포스팅에서 마지막으로 다룬 내용에서 부터 시작해보겠습니다. 지난 포스팅에서 우리는 하나의 html 웹문서를 그래도 얼추 이쁘게 만들었습니다. 하지만 브라우저의 제목을 살펴보면 아직 이쁘지 않은것을 볼수있습니다. 비교가 되게 제블로그와 네이버 를 다른 tab에 띄어서 같이 보겠습니다. 어떤가요...? 다른웹페이지는 그들만의 이름을 가지고 있는데 지난 실습까지 만든 페이지는 그냥 파일의 경로와 함께 파일명이 표시되어 있습니다. 마음에 안드네요 ㅎ 그렇다면 이럴때 페이지의 이름을 부여해주는 태그가 바로 입니다...

안녕하세요 :) HTML을 주제로 한 다섯번째 포스팅에서 다루어 볼 내용은 속성 입니다. 지난번 포스팅때 까지 우리는 좋아하는 노래의 가사 정보를 출력하는 웹페이지에 여러가지 태그를 추가하여 보기 좋게 만들어 보았습니다. 태그를 이용한 문단 나누기 까지 한 결과가 아래와 같았죠 그런데 뭔가 텍스트 자료만 있으니... 생동감없이 휑~ 합니다. 그래서 이번에는 속성을 다루기위해 이미지를 추가해 보겠습니다. 마음같아선 스테이씨 사진을 넣고 싶지만 저작권이 있기 때문에 무료이미지 사이트에 music이란 키워드로 검색한 아무 이미지를 .html 파일이 있는 디렉터리내에 sample.jpg 라는 이름으로 넣어 주었습니다. 그런다음 이미지를 넣는태그는 입니다. 그런데 그냥 라고 한다면 어떻게 내가 저장한 이미지를 불..

안녕하세요 :) HTML을 주제로 한 네번째 포스팅 내용은 TAG 와 검색엔진에서의 입니다. 일단 TAG br 과 p에 대해서 다루기 위해 이전 포스팅에서 사용한 예제를 한번더 사용하겠습니다. 제가 요즘 관심을 가지고 있는 걸그룹 STAYC 의 ASAP 이라는 노래의 가사를 출력한 웹페이지 인데요, 1절과 2절사이의 구분이 없이 쭉 출력된것을 확인할수 있습니다 이번포스팅에서는 이런 단락과 단락 사이의 구분을 지어줄예정입니다. 방법은 두가지가 있습니다. 1. 줄바꿈 태그인 을 사용하여 시각적으로 단락을 구분지어 주기 2. 각 문단을 구분해주는 태그를 사용하여 문단을 구분해주기 1번 방법의 경우 구분이 필요한 부분에 줄바꿈태그 을 사용하는 것으로 사용예는 다음과 같습니다. 2번 방법의 경우 1절의 구문과 2..

안녕하세요 :) HTML을 주제로 한 세번째 포스팅은 TAG 에 대하여 다루어 보겠습니다. 지난 포스팅 개발환경을 구축하며 우리는 아주 간단한 웹페이지를 만들어 보았습니다. 사실 그냥 파일의 확장자를 .html로만 주더라도 웹브라우저로 실행했을 때 파일의 내용이 출력되는 것을 알수 있었습니다. 하지만 지난 포스팅의 hello world 에서 hello 부분에 굵은 글씨로 강조를 주는 태그를 사용했었죠 오늘부터 다룰 내용은 바로 이 태그입니다. 태그는 작성된 텍스트에 어떠한 성질이나 속성을 부여해주는 느낌? 으로 처음에 이해하면 될것 같습니다. 꼭 텍스트가 아니어도 나중엔 버튼이나 텍스트박스 리스트 등도 이 태그를 통해서 선언할수 있습니다. 그럼 일단 처음에는 텍스트에 속성을 부여해준다는 느낌으로 한번 시..