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

스타일시트는 내부 스타일시트, 인라인 스타일시트, 외부 스타일시트 방법으로 사용 할 수 있다. 1. 내부 스타일 시트 내부 스타일시트는 해당 문서의 사이에 선언합니다. 태그로 선언하며 태그 사이에 스타일을 작성하면 됩니다. 스타일 작성 방법은 아래와 같습니다. 선택자{속성: 속성값;} 1개 이상의 속성과 속성값 사용도 가능합니다. 선택자{속성: 속성값; 속성: 속성값;} 2. 인라인 스타일 시트 인라인스타일시트는 html 태그에 스타일을 직접 지정하는 방법입니다. 단,

CSS(Cascading Style Sheets)는 웹 문서의 디자인적인 부분을 서술해주는 언어입니다. 스타일시트는 html이 세워둔 구조에 디자인적인 작업을 하기 위해 사용합니다. html과 CSS를 분리함으로써 문서 구조(html)의 수정 없이 CSS문서 하나만 수정하면 해당 스타일 시트를 참조하는 모든 페이지의 구성요소를 일괄적으로 수정 할 수 있다는 장점이 있습니다.

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

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

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

글자태그(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..

개발자 컴퓨터가 신기하고 재밌어서 컴퓨터를 좋아했던 어린 시절의 나.. 컴퓨터와 함께 하는 일을 하며 행복한 미래를 상상했던 학창 시절의 나.. 그랬던 나의 꿈을 이루기 위해 준비하는 지금의 나.. 좋아한다는 마음만 가지고 '잘 되겠지!' 하며 세월을 낭비하던 지난날들을 돌아보게 되는 요즘이다. 어느덧 벌써 25살의 나이가 되었지만, 나에겐 준비된 것이 아무것도 없다. 결코 빠르다고 할 수는 없지만, 늦었다고 생각하지도 않는다. 이제 이 공간에 나의 기록들을 남겨보려고 한다. 처음부터 쉬우리라 생각하진 않는다. 하지만 아주 어린 나와 약속했던, 행복한 미래를 위해 절대 포기하지 않을 것이다. 프론트엔드를 시작으로 웜업을 한 뒤 2달 뒤쯤부터 백엔드도 병행하여 같이 공부해보려고 한다. 예전엔 Front-E..