이진욱의코딩

이번 시간에는 table 태그를 정리하려고 합니다. table 태그는 문자열 또는 이미지를 [행]과 [열]로 표시하는 태그인데요. 웹화면의 구성 요소를 원하는 형태로 배치할 때, 데이터베이스에서 데이터를 가져와 출력할 때 많이 사용 됩니다. 그럼 태그 예제 형식에 대해 공부해봅시다. 태그는 테이블을 만드려면 선언해야 하는 태그에요. 태그 안에 이제 ,, 같은 행과 셀을 위한 태그가 있습니다. 은 한 행을 지배하는 태그로, 그 안에 나 를 가지고 있습니다. 는 한 셀을 지배하는 태그로, 문자가 자동으로 중앙 배치되고 글자가 두꺼워지는 특징이 있습니다. 도 한 셀을 지배하는 태그지만, 문자가 자동으로 왼쪽으로 배치되고 글자가 두껍지 않은 특징이 있습니다. 여기서 응용을 한 번 해봅시다. table을 선언할 ..

다음과 같이 와 이라는 두개의 태그가 있다고 봅시다. 그러면 이런식으로 표현할 수 있습니다. 여기서 태그를 이라고 생각하고, 태그를 라고 생각하고 바꿔봅시다. 그 전에 먼저 (목록/목차)라는 개념을 먼저 설명하겠습니다. (목록/목차)란 이런식으로 사이에 넣은 List라고 생각하면 된다. 아까 앞서 설명했던 것처럼 부모와 자식의 태그를 구분해서 사용해 보자 1,2,3등을 한 부모에 속하게 하고 나머지 4,5,6등을 다른 부모에 속하게 한 번 해보자. 훨씬 더 깔끔해진 모습을 볼 수 있다. 여기서 잠깐!!! 이런식으로 갯수가 얼마되지 않는 것들은 이런식으로 하면 되는데 만약 그 수가 수십,수백가지가 된다면? 이때 사용하는 태그가 태그이다. 이로써 우리는 부모와 자식태그까지 공부를 완료했음을 알 수 있다.

이전 시간까지는 태그를 배웠다면 이번 시간에는 심화버전인 속성에 대해 배워보도록 하자. 앞선 웹페이지를 만든 것들은 글씨만 있는게 답답하기도 한데, 여기서 사진을 한번 넣어봅시다. 이미지를 웹 페이지에 포함시킬 때 사용하는 태그의 이름은입니다. 1.태그에 src속성 추가 여기서 ""안에 원하는 이미지의 주소를 적으면 그곳에 위치한 이미지를 표시한다. 사이트에 들어가서 이미지파일을 하나 다운받아보자. 여기서 굉장히 좋은 서비스를 하나 소개시켜 준다면 언스플래시(https://unsplash.com/)라는 사이트인데 여기에 존재하는 모든 사진은 저작권에 구애받지 않는 공공재와 같은 역할을 합니다. 하지만 저는 구글에 있는 연예인의 사진을 사용해서 구현해 보겠습니다. 먼저 구글에 있는 사진을 찾은 뒤 마우스 ..

이번 시간에는 줄바꿈태그 에 대해 알아봅시다. 이것을 웹에서 한번 보도록 하자. 이 난잡한 문장을 보기 쉽게 만드는 것이 태그이다 태그는 처럼 세트로 쓰는 것이 아닌 말 그대로 독립적으로 하나만 존재해도 역할을 수행 할 수 있다. 이렇게 사용자가 필요로 하는 부분마다 태그를 삽입을 해서 줄바꿈을 할 수 있다. 결과를 한번 보도록 하자. 태그가 단순한 줄바꿈을 하는 태그라면 단락을 표현할 때 쓰는 태그가 HTML에 존재한다. 그것이 바로 paragraph 즉 단락이라는 의미가 있는 이다. 이번 포스팅 요약 1. 줄바꿈태그는 이며 닫는거 없이 혼자사용가능하다. 2. 단락을 표현하는 태그는이다.

제목이나 내용 중 강조하고 싶은 부분이 있다면 어떤 태그를 어떻게 사용하는지에 대해 알아보자. 우선, 태그란 무엇인가? 에 대한 대답을 먼저 해야겠죠. 웹 페이지를 만들 때 쉽게 사용할 수 있는 도구정도로만 생각하시면 될 것 같습니다. 이번 포스팅 내용은 과태그에 대해 설명하도록 하죠. 태그는 주로 제목을 적을때 많이 사용합니다. 위의 사진을 다시보면 h1, h2, h3, h4, h5등으로 되어 있는데 이 부분은 웹에서 볼 때 h뒤에 숫자가 붙고, 숫자가 올라갈수록 글씨가 작아지는 모습을 볼 수 있으며, 줄바꿈이 된다는 것을 볼 수 있다. 태그를 살펴보자면 태그는 문장에서 강조하고 싶은 부분을 나타낼때 사용 할 수 있다. 결과를 보자. 일반 태그 사이에 적은 문장은 강조되는 부분 없이 나오고 태그를 넣어..

우선 첫번째로 Visual Studio code(VS)라는 프로그램을 먼저 실행한다. 없으면 구글에 검색한 후 자신의 컴퓨터 사양에 맞는 파일을 다운 받으면 된다. 위의 사진처럼 기본적으로 세팅이 되어 있는 화면에서 코딩을 진행하면 된다.

설명하기에 앞서 먼저 구현된 화면을 보도록 하자. 여기서 사람이 하는일, 다시말해 원인을 가리키는 여러가지 표현이 있습니다. 부호or신호라는 의미에서 코드(code), 원천이라는 의미에서 소스(source), 그리고 기계도 이해할 수 있고 사람도 이해할 수 있는 공통의 약속이라는 의미에서 언어(language)라고 합니다 그중에서 프로그래밍 언어라는 표현을 씁니다. 웹을 만들기 위해 필요한 컴퓨터 언어는 HTML(HYPERTEXT MARKUP LANGUAGE)이라는 언어이다. HTML은 최대장점을 말하라고 한다면, 배우기 쉽고 쓰기가 쉽다는 것이다. 그러나 이렇게 쉬운 언어인데도 불구하고 우리가 일상생활에서 수십번 수백번을 보는 웹페이지의 기본이 되는 프로그래밍 언어인 것이다. 우리가 한글을 사용할 때에..