안드로이드 환경설정


안드로이드 환경설정

1. www.oracle.com => jdk
2. www.eclipse.org => eclipse
2. www.android.com => sdk
4. www.android.com => ADT(plugin)
  http://developer.android.com/sdk/eclipse-adt.html
  adt-10.0.1.zip 다운

path 경로설정
1.jdkandroid.txt
C:\Program Files\Java\jdk1.6.0_24\bin
2. sdk

 

이클립스에서
help->install new software->add->name:androidplugin
->location: jar:file:/C:/asy/util/ADT-10.0.1.zip!/ 설정
-> 재실행->window->preference->android->android-sdk-windows
->android sdk and avd manager->available packages->sdk platform android 2.2 api 8, version 2
-> google.inc->google apis by google inc., android api 8, version 2 선택
->install selected->active all->install
->window에서 android선택 ->new->name에 test->target에 addroid 2.2선택->size 32 ->new버튼클릭
->sd card support선택 ->creade avd선택
->생성된 test선택후 스타트->runch

전화모양뜨면 이클립스에서 안드로이드 프로젝트생성하고 생성시 이름다넣어주고 버전 8

by 후아 | 2011/05/26 16:14 | 안드로이드 | 트랙백 | 덧글(0)

div세로정렬

by 후아 | 2011/04/21 17:33 | css | 트랙백 | 덧글(0)

게시판


===============================================================================================================

게시판 dao

package board.dao;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import board.vo.BoardVO;

public class BoardDao {
 Connection con;
 PreparedStatement pstmt;
 ResultSet rs;
 int chk;
 
 static BoardDao dao=new BoardDao();
 private BoardDao() {
  
 }
 
 static public BoardDao getInstance(){
  return dao;
 }
 
 public Connection getConn() throws Exception{
  Class.forName("oracle.jdbc.OracleDriver");
  String url="jdbc:oracle:thin://@127.0.0.1:1521:xe";
  String username="system";
  String password="1234";
  return DriverManager.getConnection(url,username,password);
 }
 
 public int insertMethod(BoardVO vo){
  chk=0;
  
  try {
   con=getConn();
   String sql="insert into board values(board_seq.nextval,?,?,?,?,sysdate,?,?,?,?,?,?)";
   pstmt=con.prepareStatement(sql);
   pstmt.setString(1, vo.getWriter());
   pstmt.setString(2, vo.getEmail());
   pstmt.setString(3, vo.getSubject());
   pstmt.setString(4, vo.getPasswd());
   pstmt.setInt(5, vo.getReadcount());
   pstmt.setInt(6, vo.getRef());
   pstmt.setInt(7, vo.getRe_step());
   pstmt.setInt(8, vo.getRe_level());
   pstmt.setString(9, vo.getContent());
   pstmt.setString(10, vo.getIp());
   chk=pstmt.executeUpdate();
  } catch (Exception e) {
   System.out.println(e.toString());
   chk=0;
  }finally{
   close();
  }
  return chk; 
 }
 
 public int totalCountMethod(){
  chk=0;
  int chkk=0;
  try {
   con=getConn();
   String sql="select count(*) from board";
   pstmt=con.prepareStatement(sql);
   rs=pstmt.executeQuery();
   if(rs.next())
    chk=rs.getInt(1);
   
  } catch (Exception e) {
   System.out.println(e.toString());
   chk=0;
  }finally{
   close();
  }
  return chk;
 }
 
 public List<BoardVO> listMethod(int startRow, int endRow){
  List<BoardVO> list=new ArrayList<BoardVO>();
  
  try {
   con=getConn();
   String sql="select b.* from ";
    sql+="(select rownum as rowm,a.* from(select * from board order by num desc) a)b ";
    sql+="where b.rowm>=? and b.rowm<=? ";
    sql+="order by b.ref desc , b.re_step asc";
   pstmt=con.prepareStatement(sql);
   pstmt.setInt(1, startRow);
   pstmt.setInt(2, endRow);
   rs=pstmt.executeQuery();
   while(rs.next()){
    BoardVO vo=new BoardVO();
    vo.setNum(rs.getInt("num"));
    vo.setWriter(rs.getString("writer"));
    vo.setSubject(rs.getString("subject"));
    vo.setReadcount(rs.getInt("readcount"));
    vo.setRe_step(rs.getInt("re_step"));
    vo.setRe_level(rs.getInt("re_level"));
    vo.setIp(rs.getString("ip"));
    list.add(vo);
   }
  } catch (Exception e) {
   System.out.println(e.toString());
   list=new ArrayList<BoardVO>();
  }finally{
   close();
  }
  
  return list;
 }
 
 public void readCountMethod(int num){
  try {
   con=getConn();
   String sql="update board set readcount=readcount+1 where num=?";
   pstmt=con.prepareStatement(sql);
   pstmt.setInt(1,num);
   pstmt.executeUpdate();
  } catch (Exception e) {   
   e.printStackTrace();
  }finally{
   close();
  }
  
 }
 
 public BoardVO getContents(int num){
  BoardVO vo=null;
  try{
   con=getConn();
   String sql="select * from board where num=?";
   pstmt=con.prepareStatement(sql);
   pstmt.setInt(1,num);
   rs=pstmt.executeQuery();
   if(rs.next()){
    vo=new BoardVO();
    vo.setNum(rs.getInt("num"));
    vo.setContent(rs.getString("content"));
    vo.setEmail(rs.getString("email"));
    vo.setIp(rs.getString("ip"));
    vo.setReadcount(rs.getInt("readcount"));
    vo.setReg_date(rs.getDate("reg_date"));
    vo.setSubject(rs.getString("subject"));
    vo.setWriter(rs.getString("writer"));
    vo.setRef(rs.getInt("ref"));
    vo.setRe_level(rs.getInt("re_level"));
    vo.setRe_step(rs.getInt("re_step"));
    
   }
  }catch(Exception e){
   System.out.println(e.toString());
  }finally{
   close();
  }
  return vo;
 }
 
 public int getMax(){
  chk=0;
  try {
   con=getConn();
   String sql="select max(num) from board";
   pstmt=con.prepareStatement(sql);
   rs=pstmt.executeQuery();
   if(rs.next()){
    chk=rs.getInt(1);
   }
  } catch (Exception e) {   
   System.out.println(e.toString());
  }finally{
   close();
  }
  return chk;
 }
 //답변글일때 re_step값 1증가
 public void getRestepMethod(int ref,int re_step){
  try {
   con=getConn();
   String sql="update board set re_step=re_step+1 where ref=? and re_step>?";
   pstmt=con.prepareStatement(sql);
   pstmt.setInt(1,ref);
   pstmt.setInt(2,re_step);
   pstmt.executeUpdate();
  } catch (Exception e) {
   System.out.println(e.toString());
  }finally{
   close();
  }  
 }
 
 public void updateMethod(BoardVO vo){
  try {
   con=getConn();
   String sql="update board set writer=?,subject=?,email=?,content=? where num=?";
   pstmt=con.prepareStatement(sql);
   pstmt.setString(1,vo.getWriter());
   pstmt.setString(2,vo.getSubject());
   pstmt.setString(3,vo.getEmail());
   pstmt.setString(4,vo.getContent());
   pstmt.setInt(5,vo.getNum());
   pstmt.executeUpdate();
  } catch (Exception e) {
   System.out.println(e.toString());
  }finally{
   close();
  }
  
 }
 //DB연결 종료
 public void close(){
  if(rs!=null)
   try{rs.close();}catch(SQLException ex){}
  if(pstmt!=null)
   try{pstmt.close();}catch(SQLException ex){}
  if(con!=null)
   try{con.close();}catch(SQLException ex){}
 }
}

========================================================================================================

게시판페이징처리부분


<%@page import="board.vo.BoardVO"%>
<%@page import="java.util.List"%>
<%@page import="board.dao.BoardDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>게시판 목록</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<%!
 int currentPage; //현재 페이지
 int totalCount;  //board테이블에 저장된 총 레코드 수
 int blockCount=5; //한 페이지에 보여줄 레코드 수
 int blockPage=3; //한 블록에 보여줄 페이지 수
 int totalPage;  //총 페이지수
 int startRow;  //한 페이지에 보여줄 시작번호
 int endRow;   //한 페이지에 보여줄 끝번호
 int startPage;  //한 블록의 시작페이지 번호
 int endPage;  //한 블록의 끝페이지 번호
 List<BoardVO> list;
%>

<%
 String pageNum=request.getParameter("pageNum");
 if(pageNum==null)
  pageNum="1";
 currentPage=Integer.parseInt(pageNum);
 
 BoardDao dao=BoardDao.getInstance();
 //board 테이블에 저장된 총 레코드수 반환
 totalCount=dao.totalCountMethod();
 if(totalCount>0){
  //시작레코드
  startRow=(currentPage-1)*blockCount+1;
  
  //끝 레코드
  endRow=startRow+blockCount-1;
  list=dao.listMethod(startRow,endRow);
 }
%>

 <div id="wrap">
  <%@ include file="top.jsp" %>
 
  <table>
   <tr>
    <td colspan="5" align="right">
     <a href="writeForm.jsp">글쓰기</a>
    </td>
   </tr>
   
   <tr>
    <td width="5%" class="title">번호</td>
    <td width="45%" class="title">제목</td>
    <td width="20%" class="title">글쓴이</td>
    <td width="20%" class="title">IP</td>
    <td width="10%" class="title">조회수</td>
   </tr>
   <%
    if(list!=null){
     for(BoardVO vo : list){
   %>
    <tr>
     <td class="title"><%=vo.getNum() %></td>
     <td> &nbsp;&nbsp;
     <%
      if(vo.getRe_step()>0){
     %>
     <img src="images/level.gif" width="<%=vo.getRe_level()*8%>"/>  
     <img src="images/re.gif"/> 
     <% }%>
     
     <a href="contents.jsp?pageNum=<%=currentPage%>&num=<%=vo.getNum()%>">
     <%=vo.getSubject() %></a>
     <%
      if(vo.getReadcount()>=5){
     %>
     <img src="images/hot.gif" />
     <%} %>
     </td>
     <td class="title"><%=vo.getWriter() %></td>
     <td class="title"><%=vo.getIp() %></td>
     <td class="title"><%=vo.getReadcount() %>     
     </td>
    </tr>
   <%
     }
    }else{
   %>
   <tr>
    <td class="title" colspan="5">게시판 글이 없습니다.</td>
   </tr>
   <% }%>
  </table>
  <%
   if(totalCount>0){
    //총 페이지수
    totalPage=totalCount/blockCount+(totalCount%blockCount==0?0:1);
    
    //시작페이지 번호
    startPage=(int)((currentPage-1)/blockPage)*blockPage+1;
    
    //끝페이지 번호
    endPage=startPage+blockPage-1;
    if(totalPage<endPage) endPage=totalPage;
    
    //이전출력
    if(startPage>1){
     out.print("<a href='list.jsp?pageNum="+(startPage-blockPage)+"'>이전</a>");
     out.print("\t");
    }else{
     out.print("이전\t");
    }
    
    //페이지 번호 출력
    for(int i=startPage;i<=endPage;i++){
     out.print("<a href='list.jsp?pageNum="+i+"'>"+i+"</a>");
     out.print("\t");
    }
    
    //다음출력
    if(endPage<totalPage){
     out.print("<a href='list.jsp?pageNum="+(startPage+blockPage)+"'>다음</a>");
     out.print("\t");
    }else{
     out.print("다음\t");
    }
   }
  %>
 </div>
</body>
</html>
========================================================================================================================

게시판 디비테이블
create table board(
num number,
writer varchar2(50),
email varchar2(30),
subject varchar2(50),
passwd varchar2(20),
reg_date Date,
readcount number default 0,//읽은수
ref number, //제목글과 답변글을 묶을변수로사용
re_step number, //답글이 달릴때마다 +1되는 객체
re_level number, //들여쓰기할때사용
content varchar2(100),
ip varchar2(20));

=======================================================
시퀀스
create sequence board_seq
start with 1
increment by 1
nocache
nocycle;

by 후아 | 2011/04/21 17:32 | java | 트랙백 | 덧글(0)

우편번호 설치법

1 우편번호
http://www.zipfinder.co.kr

2 테이블생성후 c:드라이브에  zipname.csv 저장

CREATE TABLE zipcode(
 zipcode             char(7)              NOT NULL  ,
 sido               char(10)             NULL      ,
 gugun               char(25)             NULL      ,
 dong               char(40)             NULL     
);

3 CONTROL FILE 생성
    C:\oracle\product\10.2.0\db_1\BIN>zipcode.ctl로 아래 내용 저장
load data infile 'c:\zipname.csv' replace into table zipcode fields terminated by "," trailing nullcols (zipcode,sido,gugun,dong)

4 오라클에 zipcode테이블 생성
 C:\oracle\product\10.2.0\db_1\BIN>
 sqlldr userid=[오라클아디]/[오라클비번] control=zipcode.ctl log=zipcode.log

예)sqlldr userid=scott/tiger control=zipcode.ctl log=zipcode.log


alter table zipcode modify gugun char(25);
delete from zipcode;


memberInfo_table.zip

by 후아 | 2011/04/20 15:06 | java | 트랙백 | 덧글(0)

css 박스모델,테두리스타일적용,float,div요소이용 레이아웃설정, 포지션, 폰트스타일, overflow, display, visibility, 수평 네비게이션, 팝업창

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<style type="text/css">
 *{margin:0;padding:0;border-width:0}
 .box1{
  border-width:5px;
  width:100px;
  height:100px;
  background:red;
  border-color:blue;
  border-style:dashed;
 }
 .box2{
  border-width:5px;
  width:100px;
  height:100px;
  background:green;
 }
 .box{
  width:110px;
  height:120px;
  border-width:0px;
  background:black;
 }
</style>
</head>
<body>
 <!--
 박스모델(Box Model)
 :화면에서 표시되는 박스의 크기는 width,height,border,margin,padding으로 결정된다
 :박스의가로크기 : width+margin-left+margin-right+border
    -left+border-right+padding-left+padding-right
 인터넷 익스플로러  호환모드에서는 padding이 width에 포함되어 계산된다.
 ex)
 width:100;
 margin-left:5;
 margin-right:5;
 border-left:5;
 border-right:5;
 padding-left:5;
 padding-right:5;
 
 표준모드에서 계산된 박스모델크기 : 130
 인터넷 익스플로러 호환모드에서 계산된 박스모델크기 : 120;
 -->
<div class="box">
 <div class="box1"> 
 </div>
 
 <div class="box2">   
 </div>  
</div>

</body>
</html>

===========================================================================================================

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>테두리 스타일 적용</title>
<style type="text/css">
 /-테두리 크기 설정*-
 *{margin:0; padding:0; border-width:0}
 .box1{
  width:100px;
  height:100px;
  background:red;
  border-color:black;
  border-style:dashed;
  /-border-width:5px;  위쪽,아래쪽,왼쪽,오른쪽 모두 5px*-
  /-border-width:5px 10px; 위쪽,아래쪽 5px 이고 왼쪽 오른쪽 10px*-
  /-border-width:5px 10px 15px;  위쪽 5px 왼쪽  오른쪽10px 아래쪽 15px*-  
  /-border-width:5px 10px 15px 20px  위쪽 5px, 오른쪽 10px, 아래쪽 15px, 왼쪽 20px이다*-
  border-top-width:5px;
  border-right-width:10px;
  border-bottom-width:15px;
  border-left-width:20px;
 }
 .box2{
  width:100px;
  height:100px;
  background:yellow;
  border-width:5px;
  border-style:dashed;
  /-border-color:black;*-
  border-top-color:#ff00aa;
  border-right-color:#aaf6dd;
  border-bottom-color:#ee9990;
  border-left-color:#bb8022;  
 }
 .box3{
  width:100px;
  height:100px;
  background:green;
  border:10px dashed black; /-크기 스타일 색상*-
 }
</style>
</head>
<body>
<div class="box1">
 
</div>
<div class="box2">
 
</div>
<div class="box3"></div>
</body>
</html>

=================================================================================================================

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>float(플로트)</title>
<style type="text/css">
 *{margin:0; padding:0; border-width:0}
 .box1{/-부모에 크기가지정안되잇으면 자식의 사이즈를 갖는다*-
  width:800px;
  height:200px;
  background:yellow;
 }
 .box2{
  width:100px;
  height:100px;
  background:red;
  float:left;
 }
 .box3{
  width:120px;
  height:100px;
  background:green;
  /-float:left;*-
 }
 .box4{
  width:100px;
  height:100px;
  background:blue;
  float:right;
 }
 img{
  height:100px;
 }
 .aa{
  float:right;
 }
 .cc{
  clear:right;/-float을 해지시켜준게 clear이다*-
 }
</style>
</head>
<body>
<!--
플로트(float)
플로트는 박스의 위치를 부모 요소의 안에서 왼쪽또는 오른쪽으로 이동시키는 기능이다.
플로트가 지정된 박스는 문서의 일반적인 흐름에 영향을 받지 않으면서 이동된 위치에 떠 있다.
-->
<div class="box1">
 <div class="box2"></div>
 <div class="box3"></div>
 <div class="box4"></div>
</div>
<div class="inline">
 <img src="images/aa.jpg" alt="하지원" class="aa"/>
 <p class="bb">
  박수근 님의 말 :
  아니 웹이고 어플이고
  박수근 님의 말 :
  수학은 잘하면 좋아
  박수근 님의 말 :
  알고리즘은 이해하니까
  박수근 님의 말 :
  을
  모윤일 ( /19/ ) 님의 말 :
  응  
 </p>
 <p class="cc">
  박수근 님의 말 :
  아니 웹이고 어플이고
  박수근 님의 말 :
  수학은 잘하면 좋아
  박수근 님의 말 :
  알고리즘은 이해하니까
  박수근 님의 말 :
  을
  모윤일 ( /19/ ) 님의 말 :
  응  
 </p>
</div>
</body>
</html>

===========================================================================================================
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>div요소를 이용한 레이아웃 설정</title>
<style type="text/css">
 .box1{
  width:900px;
  height:500px;
  background:yellow;
 }
 .box2{
  width:900px;
  height:100px;
  background:blue;
 }
 .box3{
  width:900px;
  height:300px;
  background:#ffaa00;
 }
 .sub{
  width:250px;
  height:300px;
  background:#ffaaff;
  float:left;
 }
 .content{
  width:620px;
  height:300px;
  background:red;
  float:right;
 }
 .box4{
  width:900px;
    height:100px;
    background:#99aa10;
 }
</style>
</head>
<body>
<div class="box1">
 <div class="box2"></div>
 <div class="box3">
  <div class="sub"></div>
  <div class="content"></div>
 </div>
 <div class="box4"></div>
</div>
</body>
</html>

============================================================================================================

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>포지션</title>
<style type="text/css">
 *{margin:0; padding:0; border-width:0}
 .box{
  width:500px;
  height:100px;
  background:black;
 }
 .box1{
  position:relative;
  width:500px;
  height:200px;
  background:yellow;
 }
 .box2{
  width:100px;
  height:100px;
  background:red;
 }
 .box3{
  width:100px;
  height:100px;
  background:green;
  position:fixed;
  top:0px;
  left:100px;
 }
</style>
</head>
<body>
<!--포지션
 1. 포지션은 박스에 대한 배치를 변경할때 사용한다
 2. position은 값으로 static,absolute, relative, fixed가 있다
 3. static :순서에 의한 기본위치를 지정한다
  absolute: 부모 요소를 기준으로 위치를 지정한다
  relateve:자기 자신을 기준으로 위치를 지정한다
  fixed:스크린을 기준으로 위치를 지정한
 4 absolute의 위치지정
 부모요소의 position이 static이면 기준점이 body가된다
 부모요소의 position이 absolute,relative이면 기준점이 부모요소이다
-->
<div class="box"></div>
<div class="box1">
 <div class="box2"></div>
 <div class="box3"></div>
</div>
<p>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/> 
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
</p>
</body>
</html>

====================================================================================================================

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>폰트스타일</title>
<style type="text/css">
 /-
  * 글꼴 종류 :  font-fafont-family
  * 1  글꼴을 여러개 지정할때,(쉼표)로 구분한다 .font-family
  * 2 글꼴명에 공백이 있거나 한글이면 큰따옴표로 묶는다
  *-
 .aa{
  font-family:"Comic Sans MS","돋움",Arial,Gadget;
  font-size:20px;/-크기*-
  font-style:italic;/-스타일*-
  font-weight:bold;/-굵기*-
  line-height:18px;/-세로크기*-
  text-decoration:underline;/-밑줄*-
  color:red;/-색상*-
  }
  /-
    * font속성을 이용한 텍스트 스타일지정
    * font:{font-weight font-style font-variant
    *       font-size /line-height font-family}
    * 여기에서 font-size와 font-family은 생략이 불가능하다.*-
 .bb{
  font:12px/30px "돋움","바탕채",sans-serif/-크기/세로크기 글꼴*-
 };
</style>
</head>
<body>
<p>웹 문서의 글꼴의<span class="aa"> 스타일</span>은 다양한 <span class="bb">방법을 제공한다.</span></p>
</body>
</html>

=================================================================================================================

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>overflow</title>
<style type="text/css">
 .box1{
  width:100px;
  height:100px;
  background:yellow;
  overflow:auto;
 }
</style>
</head>
<body>
 <!--
  overflow
  1 콘텐츠가 블록박스의 크기를 넘어가는 경우에 사용하는 속성이다
  2 visible,hidden,scroll,auto의 네가지의 값을 갖는다.
 -->
 <div class="box1">
  1 콘텐츠가 블록박스의 크기를 넘어가는 경우에 사용하는 속성이다
  2 visible,hidden,scroll,auto의 네가지의 값을 갖는다.
  
 </div>
</body>
</html>

==================================================================================================================

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>display</title>
<style type="text/css">
 .box1{
  background:yellow;
  display:inline;
 }
 .box2{
  background:green;
  display:none;/-요소 공간을 차지 하지 않는다*-
 }
</style>
</head>
<body>
<!--display
1 요소가 가지고 있는 박스의 성격을 변경할때 사용된다.
2 인라인 요소를 블록요소로 ,블록요소를 인라인 요소로 변경할 수가 있다
3 박스를 화면에서 감출수도 있다.display:none;
4 display:none으로 설정하면 모든 기기에서 접근이 불가능하므로 권장사항은아니다
-->
<div class="box1">
 1요소가 가지고 있는 박스의 성격을 변경할때 사용된다
</div>
<span class="box2">
 2인라인 요소를 블록요소로, 블록요소를 인라인요소로 변경할 수가 있다.
</span>
<input type="button" onclick="change()" value="클릭"/>
</body>
</html>

===============================================================================================================

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>visibility</title>
<style type="text/css">
 .box1{
  background:yellow;
  visibility:hidden;
  height:100px;
 }
</style>
</head>
<body>
<!--
 visibility
 1.요소박스를 표시하거나 감출때  visibility속성을 사용한다
 2.display:none과 비슷하기는 하지만 visibility:hidden은 공간을 확보한다
 3.visible,hidden,inherit값을 갖는다.
-->
<div class="box1">
 1 요소박스를 표시하거나 감출때 visibility속성을 사용한다
</div>
<input type="button" onclick="change()" value="클릭"/>
</body>
</html>

======================================================================================================================

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>수평 네비게이션</title>
<style type="text/css">
 *{margin:0; padding:0; border-width:0}
 a{
  text-decoration:none;
  color:#000000;
 }
 .menuList{
  width:296px;
  height:34px;
  border-left:2px solid #00bfff;
 }
 .menuList dd{
  float:left;
 }
 .menuList dd a{
  text-align:center;
  font:bold 16px/30px "nanumgothic",dotum,sans-serif;
  display:block;
  width:96px;
  height:30px;
  border:2px solid #00bfff;
  border-left:0;
  color:#00bfff;
 }
 .menuList dd a:hover{
  color:#000000;
  font-weight:bold;
  border-bottom:2px solid white;
 }
 .menuList dt{
  width:0;
  height:0;
  font-size:0;
  line-height:0;
  visibiliy:hidden;
  overflow:hidden;
 }
</style>
</head>
<body>
<dl class="menuList">
 <dt>메뉴목록</dt>
 <dd><a href="">교육센터</a></dd>
 <dd><a href="">교육안내</a></dd>
 <dd><a href="">교육서비스</a></dd>
</dl>
</body>
</html>

================================================================================================================

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>팝업창</title>
<style type="text/css">
 *{margin:0; padding:0; border-width:0}
 
 .popup{
  width:150px;
  height:100px;
  background:yellow;
  position:fixed;
  top:20px;
  left:300px;
 }
</style>
<script type="text/javascript">
 function hide(){
  document.getElementById("popup").style.display="none";
 }

 
</script>
</head>
<body>
<div class="main">
<p> 지난 2월 스페인 바르셀로나에서 개최된 ‘MWC 2011’에서 처음<br/> 공개된 삼성전자의 올해 전략 스마트폰 ‘갤럭시SⅡ’가 국내 출시 모델에는 DMB와 근거리무선통신(NFC)이 내장되는 것으로 확인됐다.

공개 당시 두께가 8.49㎜로 가장 얇은 스마트폰으로 소개됐던 갤럭시SⅡ는<br/> 두 가지 기능이 추가되면서 약 0.4㎜가 늘어나 국내 출시폰 중에서는 소니에릭슨의 ‘엑스페리아 아크(8.7㎜)’에 이어 두 번째로 얇은 폰이 될 전망이다.

13일 삼성전자에 따르면 이달 말 이동통신 3사에서 동시 출시될 예정인 갤럭시SⅡ가 <br/>해외 출시 제품과 달리 DMB와 NFC가 추가된다. 삼성전자 관계자는 “국내 스마트폰 이용자가 가장 선호하는 지상파DMB 기능을 추가해 외산 스마트폰과 차별화했으며 NFC 기능은 이통사의 서비스 요청에 따라 포함시켰다”고 설명했다.

이번 기능 추가로 애초 공개된 모델에 비해 두께가 0.4㎜ 두꺼워져 SK텔레콤과 KT에서<br/> 출시되는 제품은 두께가 8.89㎜로 늘어난다. 반면에 LG유플러스에서 선보이는 제품은 통신방식 차이로 보드 두께가 좀 더 두꺼워져 8.9㎜를 넘어설 것으로 예상된다.
</p>
<div class="popup"  id="popup">
 내가 팝업창이다.
 <input type="button" value="닫기" onclick="hide()"/>
</div>
</div>
</body>
</html>

===============================================================================================================

by 후아 | 2011/04/14 17:59 | css | 트랙백 | 덧글(0)

<< 이전 페이지다음 페이지 >>