내 대학생활이 담길 블로그

gdyoshi.egloos.com

포토로그 마이가든

글자관련 태그의 기능과 사용법 KUT1-1웹설계

글자관련태그의 기능과 사용법

문자의 크기나 색상, 글꼴, 기울이기, 밑줄 긋기 등은 글자 관련 태그를 이용해 표현하고
이 태그를 얼마나 적절하게 사용하는가에 따라 내용을 전달하는 효과가 달라진다.

<font>요소

  • <font> 태그에 정의된 여러 속성을 이용해 텍스트의 크기, 색상, 글꼴 등을 제어할 수 있다.
     <font> ... </font>
     기능 글자를 제어한다.
     속성

     size : 글자 크기(1~7, 기본값은 3)
     color : 글자 색상(값은 색상 코드나 색상명을 사용)
     face : 글꼴

     사용예 <font size=“5” color=“##ff0000” face=“궁서체”></font>
  • 글자 크기 설정하기
    • <font size="4">문자 크기 4</font> : 문자 크기를 4로 설정한다.
    • <font size="+1"> .... </font> : 기본값이 3보다 1만큼 큰 크기이므로 4가 된다.
       
  • 글자 색상 설정하기
    • 문자의 색상 조절은 <font> 태그의 color 속성을 이용한다.
    • 속성값으로 색상 코드와 표준 색상명을 사용할 수 있다.
      색상코드, 색상명 사용 방법(교재 참조)
      <font color=“#0000FF”>
      <font color=“red”>
       
  • 글꼴 설정하기
    • face 속성을 이용해 설정한다.
      <font face="바탕체">바탕체</font> =>       바탕체
      <font face="굴림체">굴림체</font>=> 굴림체
      <font face="돋움체"> 돋움체</font>=>       돋움체
    • 윈도우에서 윈도우 [제어판]에서 [글꼴]을 더블클릭하면 컴퓨터에 설치되어 있는 글꼴을 확인할 수 있다.
      이 글꼴을 모두 사용할 수 있으나,
      홈페이지를 방문한 사용자의 컴퓨터에 해당 글꼴이 없으면 기본 글꼴로 표시된다.
      그래서 일반적으로 특수한 글꼴은 이미지로 만들어 사용한다.

기타 글자 모양 꾸밈 태그들

 태그

기능

 예

 <b> 글자를 굵게 한다. 굵게
 <i> 이탤릭체를 만든다. 이탤릭
 <u> 선택한 부분에 밑줄을 긋는다. 밑줄
 <tt> 글씨의 폭이 일정하다.(고정폭) 고정폭 타자체
 <sub> 아래첨자 아래첨자
 <sup> 윗첨자 윗첨자
 <strike> 글자를 가로 질러 취소선을 긋는다. 취소선
 <dfn> 단어를 정의할 때 사용하며 이탤릭체로 표현된다. 단어 정의
 <em> 글자를 강조하며 이탤릭체로 표현된다. 강조구문
 <cite> citation으로 인용했음을 나타낸다. 인용출처
 <kbd> 고정폭 글자체로 코드용 문자 표현에 사용된다. code sample
 <address> 주소를 나타내며 이탤릭체로 표현된다.
hungje@kut.ac.kr
 <strong> 글자를 강조하여 굵게 표현한다. 글자 작게
 <big> 글자를 조금 크게 한다. 글자 크게
 <small> 글자를 조금 작게 한다. 글자 작게
 <abbr> 축약어, 한글자씩 읽는다. (ex : html, css) html, css
 <q> inline요소의 인용문을 표시한다. 
 <blockquote> block요소의 인용문을 표시한다.
 하위에 블록요소를 포함해야 한다.		 
 <pre> 미리 형식을 가지고 있는 내용을 나타낸다. NATO,  KOTRA
 <ins> 추가한 내용을 표시할 때 밑줄로 나타낸다. 추가된 내용
 <del> 삭제된 내용을 표시할 때 취소선으로 나타낸다. 삭제된 내용

특수문자

특수문자

 기호

 설명

 &amp;

 &

 엠퍼센드

 &lt;

 <

 작은

 &gt;

 >

 큰

 &nbsp;

 

 공백

 &copy;

 ⓒ

 저작권

태그 : , , , , , , ,

공유하기 버튼

 
트랙백(0)덧글(0)

html의 기본구조 KUT1-1웹설계

HTML의 기본구조

 소스

 설명

 <html>
 <head>
  <title> 웹 문서의 제목 </title>
 </head>
 <body>
     본문 내용
 </body>
</html>		 HTML 문서의 시작
 HTML 문서의 헤더 시작
 HTML 문서의 제목 작성
 HTML 문서의 헤더 끝
 HTML 문서의 본문 시작
 HTML 문서의 본문 내용 작성
 HTML 문서의 본문 끝
 HTML 문서의 끝

<html></html>

  • 작성된 문서가 HTML로 작성되었음을 알려준다.

<head></head>

  • 문서의 정보를 기술하는 곳이다.
  • 문서에 관련된 저자, 키워드, 언어, 문서 제목 등을 기술한다.
  • 문서의 제목을 작성하는 부분에는 <title>...</title> 태그와 함께 사용한다.

<body></body>

  • 화면에 출력할 내용을 모두 나열하는 곳이다.
  • 웹 페이지 안의 모든 본문(보여지는 부분)을 지정한다.

※ 주의사항

  • 계층구조의 준수 : Overrappng이 되지 않도록 한다.
    <body><p>.......</p></body>       (o)
    <body><p>.......</body></p>       (×)

여기까지의 예제파일 index0311.html

태그 : , , , , , , ,

공유하기 버튼

 
트랙백(0)덧글(0)

html의 정의와 특징, 구성요소 KUT1-1웹설계

인터넷은 여러 가지 통신 서비스를 수행할 수 있는 네트워크이다.

그 중 WWW 서비스는 하이퍼텍스트로 이루어진 웹 문서로 구성된 홈페이지를 전송하는 방법으로

최근 가장 활발한 발전을 보여주고 있다.


Ⅰ. HTML의 정의

HTML(Hyper Text Markup Language)은 웹 문서를 표현하는 기술이다.

다시 말해 WWW에서 볼 수 있는 문서를 만드는 표준 언어다. (문서의 확장자는 .html이나 .htm)

Ⅱ. HTML의 특징

  • HTML은 웹 문서의 표준 형식이다.
  • HTML 문서는 마크업(Mark up) 언어다.
  • HTML 문서는 ASCII 코드로 구성된 일반적인 텍스트 파일이다.
  • 컴퓨터 시스템이나 운영체제에 독립적이다.
  • HTML 문서는 한 칸이상의 공백이나 줄 바꿈을 인식하지 않고 대소문자를 구분하지도 않는다.
  • 종료 태그에는 항상 슬래시(/)를 붙여준다.

Ⅲ. HTML의 구성요소

태그(Tag)

  • 태그란 <와 > 기호로 둘러싸인 일종의 표현 명령어
  • 시작 태그와 종료 태그 두 종류가 있다.
  • 단독 태그도 있다.
  • 속성을 포함하기도 한다.

요소(Element)

  • 시작태그 + 내용(contents) + 종료태그

속성(Attribute)

  • 속성은 요소의 시작 태그 내에 사용해 명령을 구체화시킨다.
    예를 들어, 텍스트의 글꼴을 지정하기 위해 사용하는 font 태그는 size, color, face 등의 속성을 가지고 있다.
    예)<font size="5">

변수(Argument)

  • 변수는 속성과 관련된 값이다.
    <body bgcolor= "yellow">인 경우 yellow는 속성 bgcolor의 변수다.
    속성과 변수는 = 부호로 구분한다. 

Ⅳ.HTML작성시 주의사항

  • HTML은 대소문자를 구분하지 않는다. 하지만 서버 환경을 감안하여 소문자로 작성하기를 권한다.
  • HTML에서는 2칸이상의 공백은 허용하지 않는다.
  • HTML코드에 주석을 붙일 때는 <!-- 과 -->사이에 쓴다. 주석의 목적은 소스 내용의 설명이나 임시로 감춰야하는 경우에 사용한다.
  • element가 오버래핑되어서는 안된다.
태그 : , , , , , , ,

공유하기 버튼

 
트랙백(0)덧글(0)

웹사이트 제작 목적과 과정 KUT1-1웹설계

Ⅰ. 홈페이지 제작 목적

  • 기록 / Blog
  • 개인 및 기업 홍보
  • 정보 교환 및 공유
  • 상거래 등

Ⅱ. 홈페이지 제작 과정

  • 기획 단계
    홈페이지를 제작하기 전에 제작 목적, 주제, 대상층 등을 명확히 정해야 한다.
    관련 사이트 벤치마킹
    공통의 목적은 "정보의 공유"이다.
     
  • 제작 단계
    시안 : 시행착오를 줄이고 관계자간의 원활한 커뮤니케이션을 목적으로 한다.
    몇가지 시안중 최종안을 선정한다.
    홈페이지 기획이 끝나면 실제로 홈페이지를 제작한다.
     
  • 배포와 관리, 평가 단계 
    지정된 계정에 홈페이지를 올린 후 원하는 대로 제작되었는지, 효용성 등을 체크해 본다.
    베타 테스트 / 모니터링 평가
     
  • 홍보 단계
    검색사이트에 등록, 배너등록 등을 이용하여 홍보한다.
    상거래 사이트의 경우 사업의 성패를 좌우하는 중요한 단계이다.
     
  • 유지보수 단계
    일정한 주기로 디자인은 리뉴얼하거나 컨텐츠를 업데이트한다.
    웹로그를 분석하여 사용자의 변화하는 요구에 적극적으로 대응한다.

Ⅲ. 홈페이지 제작 관련 기술

  • 웹 프로그래밍 분야
    • HTML
    • CSS
    • 자바스크립트
    • CGI, ASP, PHP, JSP   
  • 웹 디자인 분야
    • 일러스트레이터
    • 포토샵
    • 플래시  
  •  홈페이지 제작 준비물
    • FTP 전용 프로그램 : Ws-Ftp, CuteFtp, LeapFtp
      • 웹브라우저로 개인계정에 업로드하는 법
             ftp: //사용자 아이디:비밀번호@호스트주소
      • 웹서버 계정 : 유.무료 계정
      • 이미지 제작 툴 : 포토샵, 일러스트레이터
      • 애니메이션 제작툴 : 플래시
      • 웹 에디터 : 메모장, 에디터플러스, 나모,드림위버
    • 태그 : , , , , , , ,

    공유하기 버튼

    		 
    트랙백(0)덧글(0)

    2009/01/16 인터넷의 이해2 KUT1-1웹설계

    Ⅱ. 웹페이지 동작 원리

    • 클라인언트측 페이지 동작 원리

    • 서버측 페이지 동작 원리


     구분

     클라이언트측 페이지

     서버측 페이지

     문서

    정적 페이지 (static page) 

    동적 페이지(dynamic page) 

     처리방식

     수동적, 고정적

    사용자 입력을 실시간으로 처리 

     통신방식

    클라이언트에서 고정페이지를 전송받는 단방향 통신 

    서버와 클라이언트 사이의 양방향 통신 

     해석위치

    클라이언트측 

     서버측

     웹사이트운영면

    내용을 변경하려면 일일이 편집해야 하므로 비효율적

    내용이 추가되어도 문서를 재편집할 필요가 없어 효율적 

     활용 분야

     내용이 변하지 않는 일반 문서

    내용이 수시로 변하는 게시판, 설문조사, 회원가입, 검색엔진 등 

     제작 기술

    HTML, CSS, Javascript 

    PHP, ASP, JSP 

    태그 : , , , , , , ,

    공유하기 버튼

    		 
    트랙백(0)덧글(0)
    1 2
    gdyoshi.egloos.com is powered by Egloos. Subscribe to RSS Skin design by egloos.