PDF 다운로드
PDF 다운로드
웹 페이지 상에 그림을 첨부하고 싶다면, HTML이면 된다. 웹페이지의 배경화면으로 그림을 설정하고 싶으면, HTML과 CSS가 필요하다. HTML은 ‘하이퍼텍스트 마크업 랭귀지(Hypertext Markup Language)’의 약자이며, 브라우저가 웹페이지상에 어떻게 보일지를 결정한다. [1] X 출처 검색하기 CSS는 캐스캐딩 스타일 쉬트(Cascading Style Sheets)의 약자이며, 웹페이지 상의 레이아웃이 어떻게 보일지 결정한다. [2] X 출처 검색하기
단계
-
HTML파일과 배경화면 이미지를 저장할 폴더를 만든다. 컴퓨터로 찾기 쉬운 장소에 만든다.
- 폴더 이름은 자신이 원하는 이름으로 지정하되, HTML에서 작업 시, 늘 짧고 간결한 이름으로 짓는 것이 중요하다.
-
HTML폴더에 배경화면 이미지를 넣는다. 배경화면으로 마음에 드는 것을 고른다.
- 인터넷 커넥션이 느리고 오래된 장치에서 이미지가 잘 나타날지 고민이 된다면, 화상도가 높은 이미지를 선택한다. 빛이 있고 반복된 패턴의 이미지 역시 좋다. 이런 이미지 위에서는 어떤 글자도 잘 보이기 때문이다.
- 이미지가 따로 없다면, 무료 이미지를 다운 받으면 된다. 다운로드 시, 생성한 HTML폴더에 저장하자.
-
HTML파일을 생성한다. 텍스트 편집 프로그램을 열어 새로운 파일을 만들자. 이 파일을 index.html 형식으로 저장한다.
- 텍스트 프로그램의 종류는 상관없다. 윈도우나 노트패드(Notepad), 맥 OS X, 텍스트에딧(TextEdit) 등에서 제공하는 시스템 등 모두 가능하다.
- HTML과 호환이 가능한 텍스트 편집 프로그램을 사용코자 한다면, 이곳을 클릭 해 Atom을 다운받자. 이는 윈도우, 맥 OS X나 리눅스 환경에서 모두 사용이 가능한 프로그램이다.
- 텍스트에딧 프로그램을 사용한다면, HTML 파일을 만들기 전, 포맷(Format) 메뉴를 클릭해 플레인텍스트 만들기(Make Pain Text)를 클릭하자. 이렇게 하면, 웹 브라우저 상에서 제대로 보이는 HTML파일 형태로 코드를 쓸 수 있다.
- 마이크로소프트 워드와 같은 워드 프로세서는 HTML 코드를 쓰기에 적당하지 않다. 글자들이 보이지 않고 포맷 역시 HTML과 상충해 다 깨지고 만다. 결국, 웹 브라우저 상에서 잘 보이지 않는다.
광고
-
기본 HTML코드를 복사 후 붙여넣기 하자. 아래 제시된 HTML 코드를 복사 후 위에서 새로 연 index.html 형태의 파일에 붙여넣기 한다.
<!DOCTYPE html> < html > < head > < title > 페이지 제목 </ title > < style > body { background-image : url ( " " ); } </ style > </ head > < body > </ body > </ html >
-
배경화면 URL 주소를 입력한다. 새로 연 HTML 파일에서, background-image: url(" “) 라고 씌여진 라인을 찾자. 괄호 안에 놓인 마우스 커서를 움직여 저장한 배경화면 파일의 이름을 입력한다. 확장 파일 형식도 꼭 포함한다.광고
- 다 완성되면 아래처럼 보여야 한다.
background-image: url("background.png");
- URL 주소나 파일 경로 없이 파일 이름만 달랑 쓰면, 해당 이름을 가진 이미지를 웹페이지 상에서 찾을 것이다. 파일 시스템에서 다른 폴더에 이미지가 저장되어 있다면, 파일 경로를 모두 적어주자. [3]
X
출처 검색하기
-
웹브라우저에서 HTML파일을 연다. index.html 형식에서 오른쪽을 클릭해 선호하는 웹브라우저 상에서 열면 된다.
- 브라우저가 열렸을 때, 이미지가 안 보인다면, 이미지 파일의 이름이 텍스트 편집 프로그램에서 제대로 쓰여졌는지 확인하자.
- 브라우저가 열렸을 때, 배경화면 이미지 대신 HTML코드가 보인다면, 파일이 텍스트 형식으로 저장된 것이다. 이 HTML파일을 다른 텍스트 편집 프로그램에서 수정할 수 있다.
-
HTML파일을 수정하자. 텍스트 편집 프로그램에서, <body></body>태그 사이에 마우스 커서를 두고 ‘안녕, 세상아!(Hello world!)’ 라고 친다. 브라우저를 다시 켜면, 배경화면 이미지 맨 위에 해당 글이 나타날 것이다.광고
-
HTML와 CSS 태그를 이해하자. HTML코드는 열고 닫는 태그 전용이다. <body>태그는 본문을 열고 </body>태그는 본문을 닫는다. HTML페이지 상 여는 태그를 쓰면 닫는 태그를 써야 한다. 그래야 제대로 코드가 화면 상에 나타난다.
-
DOCTYPE 태그를 이해하자. 잘 쓰여진 HTML페이지는 <!DOCTYPE html>로 시작되기 마련이다. 이는 HTML파일이 해당 파일임을 웹브라우저에게 미리 알려주는 코드이다.
-
HTML파일을 수정하자. 텍스트 편집 프로그램에서, <body></body>태그 사이에 마우스 커서를 두고 ‘안녕, 세상아!(Hello world!)’ 라고 친다. 브라우저를 다시 켜면, 배경화면 이미지 맨 위에 해당 글이 나타날 것이다.
-
HTML와 CSS 태그를 이해하자. HTML코드는 열고 닫는 태그 전용이다. <body>태그는 본문을 열고 </body>태그는 본문을 닫는다. HTML페이지 상 여는 태그를 쓰면 닫는 태그를 써야 한다. 그래야 제대로 코드가 화면 상에 나타난다.
-
제목 태그를 이해하자. <title>(제목)태그는 브라우저 창 상 제목 바에 나타난다. 브라우저 탭에도 글씨가 나타난다.
-
스타일 태그를 이해하자. <style>태그는 CSS 영역이다. <style> 사이에 위치한 모든 코드는 CSS 코드이다.
-
본문 태그를 이해하자. <body>태그 사이에 위치한 글씨는 모두 쓰여진 그대로 나타난다. HTML코드가 CSS코드가 아니면 말이다.
-
HTML파일을 수정하자. 텍스트 편집 프로그램에서, <body></body>태그 사이에 마우스 커서를 두고 ‘안녕, 세상아!(Hello world!)’ 라고 친다. 브라우저를 다시 켜면, 배경화면 이미지 맨 위에 해당 글이 나타날 것이다.광고
-
CSS 코드를 이해한다. index.html 코드에서, <style>태그 사이에 있는 코드는 웹 페이지가 부여한 <body>x태그에 특정 이름과 배경화면 이미지를 부여한다.
-
CSS 코드를 검토한다.
-
CSS코드의 일부를 이해한다. CSS 스타일은 선택자(Selector)와 선언부(declaration)의 두 부분으로 이뤄져 있다. [4] X 출처 검색하기
- 예를 들면, body
는 선택자이고
background-image: url("background.png") 는 선언부이다.- 선택자는 HTML태그 어느 것도 된다.
- 선택부는 { }과 같이 물결무늬 괄호 안에 있는 것이다.
-
CSS 선언부를 이해하자. CSS 선언부는 속성(property)과 속성값(value)의 두 부분으로 이뤄져 있다. 물결무늬 괄호 사이에 있는
background-image 는 속성이고 url("background.png") 는 속성값이다. [5] X 출처 검색하기- 속성은 스타일이 무엇인지 나타내주고 속성값은 속성이 어떻게 스타일 되었는지 보여준다.
- 속성과 속성값은 항상 콜론(:)으로 구분된다.
- CSS 선언부는 늘 세미콜론(;)으로 끝난다.
광고
출처
이 위키하우에 대하여
이 문서는 32,014 번 조회 되었습니다.
광고
