똥글이 되고싶은 네모의 IT.log

xhtml에서는 table태그 사용이 금지되었다가 html5로 넘어오면서 table태그를 다시 사용하기 시작했다고 합니다. table로는 웹 구조를 잘 짜지 않습니다. html5에서는 시멘틱 태그들을 이용해 구조 잡는게 중요하다고 합니다. 저는 지난시간에 공부했던 table태그에 대해 좀 더 연습해 보기 위해 table태그를 이용해 홈페이지 layout을 구성 해 보았습니다. 공부를 도와주고 계신 강사님께서 제공 해 주신 예시 홈페이지 입니다. 먼저 어떻게 구조를 짤 지 고민 해 보았습니다. 큰 테이블을 하나 생성 한 후 테이블 내부에 필요한 테이블들을 추가로 생성하고 colspan과 rowspan태그를 활용해 만들어보면 되겠다 생각했습니다. table태그만 사용하면 화면에 시각적으로 보여지지 않습니다...

테이블태그 이전까지는 div로 공간을 나눠서 사용했다면, html5 에서는 테이블을 사용해 공간을 나눠 사용합니다. 테이블은 레이아웃을 구성할 때 중요한 틀이 됩니다. 네이버 홈페이지를 보면 검색창, 뉴스, 로그인, 오늘 읽을만한 글, 트렌드쇼핑 등 여러 공간으로 나뉘어 있습니다. 테이블 태그는 이처럼 각종 콘텐츠들을 원하는 위치에 배치하기 위해서 큰 하나의 화면을 구역별로 나누고, 원하는 구역에 콘텐츠를 배치하는 방식으로 웹 설계를 할 때 사용합니다. 이해가 쉽도록 빨간 선으로 가상의 테이블 구조로 나눠 보았습니다. 테이블을 생성하고, 행과 열의 병합을 거쳐 각 구역에 콘텐츠를 배치합니다. 테이블 생성 width와 height속성으로 테이블의 크기를 지정 해 줄 수 있습니다. 단위를 생략하면 px로 지..

하이퍼링크 태그 하이퍼링크란 원하는 문서 또는 웹사이트로 이동, 메일보내기 등 링크를 통해 다른 사이트 또는 서비스와 연결해 주는것을 말합니다. 태그의 사용법은 아래와 같습니다. 나타낼 문구(이미지파일도 가능) 특정 사이트 링크 특정 사이트 새탭으로 열기 이미지보기 메일보내기 href 속성에는 네이버, 다음 등 다른 웹 사이트 링크를 걸어 둘 수도 있고, 나의 다른 파일들을 링크 해 둘 수도 있습니다. 연결 될 상대의 주소를 적어주는 속성입니다. target 속성은 새창으로 링크를 연결 할 지, 현재 창에서 링크를 연결 할 지 지정해주는 속성입니다. 기본값은 현재창에서 링크를 연결 해 주는 blank로 설정되어 있으며 생략시 기본값으로 지정됩니다. 새창으로열기 설정을 하기 위해서는 self 속성을 지정 ..

이미지태그 이미지태그는 웹페이지에 이미지 파일을 표시해주는 태그입니다. 이미지 파일을 가지고 있어야 하며, 이미지 파일이 저장된 위치를 알고 있어야 합니다. html문서 파일이 저장된 디렉토리에 images라는 폴더를 새로 생성하고 그 안에 이미지 파일을 저장해 두었습니다. html 에디터로 돌아와 아래와 같이 코딩합니다. 이미지 태그에 여러가지 속성값을 사용 할 수 있지만, 필요한 두가지의 속성만 사용 해 보았습니다. 이미지 가 저장된 경로를 알려주는 src와 대체글을 작성 할 수 있는 alt가 있습니다. src="이미지가 저장되어 있는 경로" alt="대체글" src에는 본인이 지정한 폴더 이름과 이미지 파일의 이름을 적어 두면 됩니다. 이미지 파일 폴더명으로 다양한 이름을 사용하는데, images가..

글자태그(h, br, span, ul, ol) 1. 줄바꿈, 띄어쓰기(공백) 웹 페이지에 아래 사진과 같은 문구를 작성하려 합니다. html문서 내 태그안에 아래와 같이 코딩하여 확인 해 봅니다. 웹브라우저에 실제로 보이는 부분 웹브라우저에 실제로 보이는 부분 웹브라우저에 실제로 보이는 부분 웹페이지에 글을 작성 할 때 한글이나 워드에서처럼 띄어쓰기와 줄바꿈을 하여도 다른 결과가 나온걸 볼 수 있습니다. html문서에서 띄어쓰기는 한 칸만 인식, 줄바꿈은 엔터를 쳐도 띄어쓰기 한 칸 으로 간주합니다. 따라서 줄바꿈과 한 칸 이상의 띄어쓰기를 할 때는 태그가 필요합니다. 줄바꿈태그 워드에서 엔터와 같은 역할을 합니다. 태그의 위치에서 갯수만큼 줄바꿈이 이루어집니다. 추가공백(띄어쓰기)태그 한 칸 이상 띄어..

1. 에디터 설치 - 비주얼 스튜디오 코드 Visual Studio Code 서브라임텍스트, 이클립스 등 많은 에디터가 있지만, Visual Studio Code를 사용하려 한다. 설치 방법은 딱히 설정 할 것 없이 다음다음 눌러주면 된다. 설치는 공식홈페이지에서 하면 되고 아래 링크를 누르면 공식 홈페이지로 연결된다. https://code.visualstudio.com/Download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to ex..