Front-end/HTML&CSS (4) 썸네일형 리스트형 Do it! HTML5 + CSS3 : 5장 CSS 기초 스타일과 스타일 시트 왜 스타일을 사용할까? 웹문서에서 스타일이란 HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정 짓는 내용들을 가리킨다. 줄간격이나 표의 테두리 모양을 바꾸는 것도 스타일의 예가 된다. HTML뿐만 아니라 스타일도 사용하는 이유는 다음과 같다. 웹문서의 내용과 상관없이 디자인만 바꿀 수가 있다. HTML은 웹문서의 내용을 나열하고, CSS는 웹문성의 디자인을 구성하므로, 웹문서의 내용과 디자인이 구분되어있다. 따라서 내용만 수정해야 하거나, 디자인만 수정해야할 때, 서로의 영역에 영향을 미치지 않고, 원하는 부분만 수정할 수 있다는 편리함이 있다. 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수가 있다. CSS를 이용하면 HT.. Do it! HTML5 + CSS3 : 3장 이미지와 하이퍼링크 이미지 웹에서 사용하는 이미지 형식 웹 페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서도 화질이 좋아야하기 때문에 몇가지 파일 형식만 사용할 수 있다. 만약 다른 형식으로 된 이미지 파일에서 사용하려면 다음과 같은 파일 형식으로 변환해야 한다. 파일 형식 설명 GIF(Graphic Interchange Form) 표시할 수 있는 색상 수가 256가지 뿐이나, 다른 이미지 파일 형식에 비해 파일 크기가 작아 작은 이미지로 사용되며, 투명한 배경이나 움직이는 이미지를 만들 수 있다는 장점이 있다. JPG/JPEG(Joint Photographic Experts Group) 사진을 위해 개발된 형식으로 GIF보다 다양한 색상과 명암을 표현할 수 있다. 저장을 반복하다보면 화질이 떨어질 수 .. Do it! HTML5 + CSS3 : 2장 텍스트 관련 태그들 텍스트를 덩어리로 묶어 주는 태그 태그 - 제목 표시하기 제목 텍스트는 일반 텍스트보다 굵고 진하게 표시된다. 태그는 제목을 뜻하는 heading의 줄임말인 h와 제목 크기를 나태는 숫자(1~6)을 사용해서 에서 까지 표현한다. 이 가장 큰 제목이고, 이 가장 작은 제목이다. 제목 제목 제목 제목 제목 제목 태그 - 단락 만들기 태그의 p는 paragraph의 줄임말로 텍스트 단락을 만드는데 이때 단락이란, 앞뒤에 줄바꿈이 있는 텍스트 덩어리를 말한다. 태그로 표시되는 텍스트 단락은 줄바꿈 없이 한줄로 표시되는데, 텍스트 줄이 브라우저 창의 너비보다 길어질 경우 줄이 자동으로 바뀐다. 텍스트 태그 - 줄 바꾸기 텍스트 단락에서는 한줄로 표시되지만, 웹 브라우저 창에서 줄바꿈을 하려면 줄을 바꿀 위치에 태.. Do it! HTML5 + CSS3 : 1장 HTML 기본 다지기 HTML과의 첫 만남 HTML이란 무엇일까? 웹 사이트에서 사용되는 문서는 웹에 맞는 형식인 html 파일이다. 웹 문서는 다른 일반 문서와 달리 문서를 작성하는 프로그램과 그 내용을 보는 프로그램이 서로 다르다. 웹 문서 작성 프로그램을 웹 편집기라고 하고, 웹 문서를 보는 프로그램을 웹 브라우저라고 한다. HTML(HyperText Markup Language) : 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어 HyperText : 웹사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능 Markup : 태그(tag)를 이용해 문서에서 어느 부분이 제목이고 본문인지, 어느 부분이 사진이고 링크인지 표시하는 기능 웹 표준이란 무엇일까? 웹 표준이 필요한 이유는 어떤 브라우저에서.. 이전 1 다음