css

14 POSTS

  1. 2009/08/27 [15강] apple코딩&포지션
  2. 2009/08/25 [14강] 로그인폼
  3. 2009/08/20 [13강] 레이아웃&폼박스
  4. 2009/08/18 [12강] 포지션&레이아웃&테이블
  5. 2009/08/11 [10강] UL&LI&float
  6. 2009/08/06 [9강] 박스모델
  7. 2009/08/04 [8강] CSS-font&text
  8. 2009/07/30 [7강] CSS
  9. 2009/07/28 [6강] CSS
  10. 2009/07/23 [5강] XHTML & CSS

[15강] apple코딩&포지션

Posted 2009/08/27 21:58, Filed under: Study/css
* shift+alt+f : 코딩시 자동정렬
* 디자인 요소가 많은 사이트 : http://www.smileycat.com/

* position / float의 규칙
1. position:absolute > float: > position:relative 순으로 적용
2. position끼리는 레이아웃 잡는데 영향을 받음
3. static은 relative와 float에 영향을 주고 받음
4. 하나의 블록레벨 요소에서 한 요소의 자리를 주고 싶으면 마진, 패딩, 모두 사용가능
5. 하지만 여러개의 요소를 배치 시켜야 할 때는 상위 블록레벨 요소를 relative를 주고, 자식들을 모두 absolute로 positioning을 한 뒤, left, top, right, bottom등으로 정렬시킴

2009/08/27 21:58 2009/08/27 21:58
Tag : ,
Response : 0 trackback , 0 comment

Please leave a comment.

[14강] 로그인폼

Posted 2009/08/25 21:59, Filed under: Study/css

* 로그인 폼
1. fieldset 태그의 사용-html 4.1에서 생성
  ▢ 정보 입력박스들의 집합
  ▢ legend 태그 안에 설명을 기술
  ▢ title 속성으로 해당 필드에 대해 설명

2. 키보드만으로 접근이 가능하게 설계
  ▢ tabindex : tab버튼 누를 시 제대로 된 필드로 이동이 가능하게 함
  ▢ accesskey : 단축키로 접근이 가능하게 함

<!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" lang="ko" xml:lang="ko">
  <head>   
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>로그인 폼</title>
    <script type="text/javascript">
        function signIn() {
            alert("로그인 버튼을 눌렀네요. 잘해따!");
        }
    </SCRIPT>
    <style type="text/css">
        *{margin:0; font:12px/1.2 dotum, "돋움", sans-serif; }
        fieldset#loginForm {
            width:220px;
            height:80px;
            border:1px solid #00bfff;
            background:#999;
            padding:10px;
            margin:30px;
        }
        fieldset#loginForm legend { /*display:none;을 주게 되면 리더기에서 읽지 못하므로 아래처럼 넣어준다*/
            position:absolute;
            width:0;
            height:0;
            top:0;
            left:0;
            overflow:hidden;
            font-size:0;
            visibility:hidden;
            line-height:0;
        }
    </style>
  </head>
  <body>
      <form action="xxx.html" method="post">
      <fieldset id="loginForm">
          <legend>로그인폼</legend>
          <input type="text" id="id" name="id" title="아이디" tabindex="1" accesskey="i"/>
          <input type="password" id="password" name="password" tabindex="2" accesskey="p"/>
          <label for="password">현재 비밀번호 0자 입력</label>
          <input type="checkbox" id="remember" name="remember" tabindex="3" accesskey="r"/>
          <label for="remember">ID 저장</label>
          <input type="image" name="signIn" src="image/signIn.gif" alt="로그인버튼" tabindex="4" accesskey="l" onclick="signIn()" onkeydown="signIn()"/>
      </fieldset> /*label과 title은 중복되서 사용하지 않는다.*/
      </form>
  </body>
</html>

* 웹접근성 확인 사이트
http://wave.webaim.org/
http://wave.webaim.org/icons

* 브라우저 샷
http://browsershots.org/ -> 모든 브라우저에서 보이는 모습을 찍음

* 익스플로러 6에서 투명 png 쓰는 두 번째 방법
1. http://www.twinhelix.com/css/iepngfix/ iepngfix.zip 다운
2. 압축 해제후, iepngfix.htc를 열어 blank.gif 경로 수정(9번 라인)
3. 이미지가 사용될 요소에 behavior: url(image/iepngfix.htc); 지정

2009/08/25 21:59 2009/08/25 21:59
Tag :
Response : 0 trackback , 0 comment

Please leave a comment.

[13강] 레이아웃&폼박스

Posted 2009/08/20 22:09, Filed under: Study/css

* 레이아웃
* 여러 가지 커서와 파비콘(favicon)
1. 커서의 종류
  ▢ pointer, help, wait, progress, move, crosshair, resize, text
  ▢ 사용자가 직접 지정 가능
    - 익스플로러 : .cur 파일 / 그 외 브라우져 : .gif파일
    - 사용자가 직접 커서 지정시 기본 커서를 꼭 설정해야 함
-     <div style="cursor:crosshair">십자가 모양</div>
      <div style="cursor:ne-resize">북동쪽 모양</div>
      <div style="cursor:help">도와주는 마우스커서</div>
      <div style="cursor:move">움직이는 마우스</div>
      <div style="cursor:pointer">클릭모양</div>
      <div style="cursor:text">텍스트 입력</div>
      <div style="cursor:progress">진행모양표시</div>
      <div style="cursor:wait">기달리는 커서</div>
<div style="width:400px; height:200px; background:orange;cursor:url(image/qoo.gif), url(image/qoo.cur), pointer;"></div>-> qoo.gif가 안보이는 브라우저에서는 qoo.cur이 보이도록 지정
  ▢ 파비콘 설정
<link rel=“shortcut icon” href=“파비콘의 경로”/>
-><link rel="shortcut icon" href="http://c1img.cyworld.co.kr/img/favicon.ico">
* 라운드 박스
    <style type="text/css">
        *{margin:0; padding:0;}
        div#roundBox {
            width:300px;
            height:200px;
            background:white;
            position:absolute;
            left:20px;
            top:20px;
        }
        div#roundBox div {
            position:absolute;
            width:4px;
            height:4px;
            font-size:0;
            background-image:url(image/corner.gif);
            background-repeat:no-repeat;
            background-color:#ff6600;
        }
        #l_t_corner {
            left:0;
            top:0;
            background-position:left top;

        }
        #r_t_corner {
            right:0;
            top:0;
            background-position:right top;
        }
        #l_b_corner {
            left:0;
            bottom:0;
            background-position:left bottom;
        }
        #r_b_corner {
            right:0;
            bottom:0;
            background-position:right bottom;
        }
    </style>
  </head>
  <body>
      <div style="width:500px; height:500px; background:#ff6600;"></div>
      <div id="roundBox">
          <div id="l_t_corner"></div><div id="r_t_corner"></div>
          <div id="l_b_corner"></div><div id="r_b_corner"></div>
      </div>
  </body>
</html>
* 익스플로러 6에서 fixed와 png 파일 사용하는 js 파일 적용
- js파일을 이용한다.

* 그림자 효과 div 박스
- margin과 padding을 이용한다

* 제약기법의 팝업창
- 팝업띄웠을때 바탕의 텍스트들이 클릭이 안되게..비활성화 시키는 방법
- 익스플로러와 타 브라우져간의 투명도 조절이 다름
    - 익스플로러 : filter를 이용
    - 타브라우져 : opacity 속성을 이용

2009/08/20 22:09 2009/08/20 22:09
Tag :
Response : 0 trackback , 0 comment

Please leave a comment.

[12강] 포지션&레이아웃&테이블

Posted 2009/08/18 20:43, Filed under: Study/css
* 익스플로러 6 더블마진 버그 :
  1. float:left와 margin or padding을 같이 적용할 경우 발생
  2. 해결책 : float:left 속성이 있는 요소에 display:inline으로 선언

* background 이미지 지정 :
  1. background-position : 숫자 or 퍼센트 | 숫자 or 퍼센트
-> 네이버에서는 리스트로 된 형태들을 숫자별로 이미지를 자르지 않고 하나의 gif안에 넣은다음 좌표값으로 리스트에 따라 이미지가 노출되도록한다.
   ex) background:url(images/rank.gif) no-repeat 0 -17px;

* 웹접근성을 고려한 테이블 :
1. table내의 summary속성 : 테이블의 내용을 요약함
2. caption 태그 : 테이블의 제목을 지정
                 보여주지 않더라도 display:none 말고 visibility:hidden 사용
3. thead, tbody로 나누어 정확한 의미 전달
4. th를 이용해 head 셀임을 표시
5. scope 속성을 이용해 열, 혹은 행에 적용되는지 표시
-> 테이블을 쓸때는
<thead></thead>
<tfoot></tfoot>
<tbody></tbody>순으로 작성해줘야 한다.
->테이블에 보더를 주고싶을때는 table#hackTable th,tr,td{ border:1px solid silver; } 이런식으로 모두 줘야한다.
->테이블의 cellspace같은 개념 : table#hackTable { border-collapse:collapse; }
-><caption>익스플로러 6에도 통하는 핵 정보</caption>를 안보이게 하고 싶은경우에는 display:none를 주게 되면 리더기가 읽지 못하게 되므로 다음처럼 지켜줘야 한다. table#hackTable caption {visibility:hidden;}
-> 테이블 링크 주는 방법
        table#hackTable tbody tr {
            cursor:hand; /*파폭에서는 안됨*/
            cursor:pointer; /*모든브라우저에서 적용*/
        }
        table#hackTable tbody tr:hover { /*테이블 행에 마우스 오버하면 백그라운드에 색을 줌*/
            background:#00bfff;
            color:white;
            font-weight:bold;
        }
-> 마우스 오버시 폰트가 bold일경우 테이블이 와따가따 할경우table-layout:fixed;를 주면 됨

* 포지션(position)
1. 포지션의 속성 : static, relative, absolute, fixed
2. static (자리를 차지하고 있는것임)
  ▢ 보통의 배치를 의미(기본값)
  ▢ top, right, left, bottom을 지정해도 무효가 됨
3. relative
  ▢ 상대배치를 의미함
  ▢ 본래의 박스를 생성하여 배치되지만 본래 위치에서 상대적으로 이동되어 배치
  ▢ 뒤의 요소 박스는 이 박스가 원래 위치에서 이동되지 않은 것으로 여김
-> static보다 위에 떠 있다고 봄, relative두개일경우에는 아래코딩된 relative가 위로 뜸
* 배너나 쇼핑몰의 하단에 장바구니(bottom에 위치한것)등은 fixed를 줘서 스크롤해도 고정위치에 위치할수 있도록 한다.
4. absolute
  ▢ 절대적인 위치를 의미함
  ▢ 다른 요소들의 레이아웃에 전혀 영향을 주지 않음

* z-index 속성
-> 크면클수록 위로 올라간다.

* 익스플로러 6에서도 통하는 크로스브라우징 핵
언더스코어핵 - html {_color:..  } - IE 4~6등에서만 스타일 적용
2009/08/18 20:43 2009/08/18 20:43
Tag : ,
Response : 0 trackback , 0 comment

Please leave a comment.

[10강] UL&LI&float

Posted 2009/08/11 22:15, Filed under: Study/css
웹접근성 연구소 자주보기

*음수마진 :0806 참고
* Ul & li : list-style-type:none; -> 동글뱅이 없앰
* floating (플로팅) : float은 원래 이미지 옆으로 텍스트를 흘려 가도록 하는 목적
* dl / dt/ dd
2009/08/11 22:15 2009/08/11 22:15
Tag : , ,
Response : 0 trackback , 0 comment

Please leave a comment.

[9강] 박스모델

Posted 2009/08/06 22:03, Filed under: Study/css
p.test {border:blue 1px solid; } p .test {border:fuchsia 2px solid; } =>앞에껀 p의 class, 뒤에껀 p를 제외한 p안에 있는 class가 적용

181~206page 수업

* 박스모델
- 인라인요소에서의 가운데 정렬은 text-align:center;
- 블록요소에서의 가운데 정렬은 margin:auto;
* overflow속성
- 넘치는 텍스트 박스 안보이게 해주거나 스크롤생기게 해주는 명령 : overflow:hidden; / overflow:scroll; / overflow:auto;
* 겹치는 margin
- 형제/아버지랑도 겹치는 margin현상이 일어남
- 아버지랑 겹치게 되면 padding-top:1px;를 주면 상단과 떨어지게 된다.
2009/08/06 22:03 2009/08/06 22:03
Tag :
Response : 0 trackback , 0 comment

Please leave a comment.

[8강] CSS-font&text

Posted 2009/08/04 21:35, Filed under: Study/css

오늘까지 절반완료: 문법 완료
*URL : 상대/절대경로
*NebBeans IDE 단축키- shift+Alt+F : css 정렬정리하기
                                      Alt + space : 자동완성기능 보이기
p a{color:green; } => p안의 a의 컬러가 바뀌게 설정됨
* font-weight속성 - 두께 줄이기 : lighter
* em박스란? 소문자 m을 기준으로 활자디자이너가 박스를 만듦.
* font-size :
  xx-small, x-small, small, medium, large, x-large, xx-large로 되는 절대크기는 브라우저들마다 약간씩 다르게 보여진다.
* emChart : http://aloestudios.com/tools/emchart/ ->px->em변환 or em->px변환 차트임
* font 속성
  .a1 {font:bold italic 40px NanumGothi; }
  .a2 {font:40px serif; } /*앞의 속성 3가지는 생략 가능 적용됨*/
  .a3 {font:20em; } /*font-family가 없어서 적용 불가*/
  .a4 {font:sans-serif; } /*사이즈가 없어서 적용 불가*/
* text-indent : 텍스트의 들여쓰기
  div {text-indent:20px; } ->텍스트 첫줄이 20px안으로 들여쓰기가 된다. 음수값도 가능
* text-align: left보다는 justify가 좌측정렬이 더 예쁘고 보기좋게 정렬이 됨. justify를 사용할것.
* text-decoration : blink는 firefox와 opera에서만 깜빡임
                           p {text-decoration:underline overline blink}-> 여러가지 함께 사용가능
                           underline, overline, line-throungh, blink, none 등이있음
* vertical-align : baseline, sub(아랫첨자), super(윗첨자), top, middle, text-top, text-bottom, bottom
* white-space :
* direction : 글자가 좌측or우측으로 흐르는 방향 지정 -> rtl, ltr

2009/08/04 21:35 2009/08/04 21:35
Tag : ,
Response : 0 trackback , 0 comment

Please leave a comment.

[7강] CSS

Posted 2009/07/30 21:14, Filed under: Study/css

선택자. 28~72page

* class와 id를 같이 사용했을때 id가 우선순위로 읽힌다.
* 텍스트: title=""
  이미지: alt=""     지켜주자.
* 인접선택자 : 익스6에서는 안된다.
* input:focus {
            border:2px deepskyblue solid;
        } => 익스6/7에선 안됨
* h1:before { content : "안"; color:blue; } h1:after { content : "세"; color:green; }
  => 요소 앞뒤의 color를 css에서 바꿔줄수 있음. 단 익스 6/7은 안됨

* 구체성 : h1 {color:red; } h1 {color:blue; } => 뒤의 h1의 color로 읽히게 된다.
               body h1 {color:red; } h1 {color:blue; } => 앞의 h1의 color로 읽히게 된다.
3. 구체성의 표현 : 0(inline), 0(id), 0(class, 속성, 가상클래스), 0(태그, 가상요소)
  ▢ 선택자에 있는 모든 id 속성값에 0, 1, 0, 0 값이 추가됨
  ▢ 선택자의 모든 class 속성값과 기타 속성, 가상 클래스에 0,0,1,0 추가
  ▢ 모든 요소와 가상 요소에 0,0,0,1
ex)
body h1 {color:yellow} => 0,0,0,2
a[href] {color:yellow} => 0,0,1,1
a:hover {color:yellow} => 0,0,1,0
h1 ul li > a {color:yellow} => 0,0,0,4
h1.strike {color:yellow} => 0,0,1,1
#id2 {color:yellow} => 0,1,0,0
p:first-line {color:yellow} => 0.1,1,1 ?? 0011??
* important 선언 : important선언한 부분이 먼저 읽힌다.

*상속
1. 상속은 자식으로 상속 : 조상으로는 상속되지 않음
2. margin, border, padding, background 등은 상속되지 않음
3. 상속된 값은 구체성이 없음(0도 아님)
4. 구체성이 없기 때문에 브라우져의 하이퍼링크 스타일이 우선됨

*위키 안전색상
http://ko.wikipedia.org/wiki/%EC%9B%B9_%EC%83%89%EC%83%81
폰트는 em으로
레이아웃은 px로

2009/07/30 21:14 2009/07/30 21:14
Tag :
Response : 0 trackback , 0 comment

Please leave a comment.

[6강] CSS

Posted 2009/07/28 20:15, Filed under: Study/css
pmania@nate.com

4page~71page
프로그램다운로드 : http://www.my-debugbar.com/wiki/IETester/HomePage

doctype 권장
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

인라인안에 블록을 넣을수 없다.
Shift+Alt+F : CSS에서 자동정렬이 됨.중요!!
@import url(default.css); =>권장하지 않음 5.0이하 버전에서 안읽을 수 있음
@import url(default.css) screen; 이 제일 먼저 오도록 한다.
css 명령이 중복될경우 마지막것으로 적용된다. 하지만 id는 처음 id것으로 적용이 됨

다음시간...<선택자의 종류> 시작
2009/07/28 20:15 2009/07/28 20:15
Tag : ,
Response : 0 trackback , 0 comment

Please leave a comment.

[5강] XHTML & CSS

Posted 2009/07/23 22:08, Filed under: Study/css

* 하드코딩 프로그램 권장
- http://java.sun.com/javase/downloads/index.jsp 에서
  JDK 6 Update 14 with NetBeans 6.7 설치하면 java와 코딩프로그램 설치완료
- 나눔고딕코딩 폰트 사용권장

2009/07/23 22:08 2009/07/23 22:08
Tag : , ,
Response : 0 trackback , 0 comment

Please leave a comment.

  1     2  

Total: 218068 (Today: 10, Yesterday: 38)