JaguarPaw Note: HTML

레이블이 HTML인 게시물을 표시합니다. 모든 게시물 표시

2014년 4월 27일 일요일

CSS box-sizing

박스의 사이즈 정의

특정 영역에 컨텐츠를 놓고 사이즈를 지정할때 padding이나 border가 포함된 width값을 지정하느냐 아님 제외한 지정하느냐가 고민 이다.

이때 정확한 값을 위해 box-sizing이 쓰이게 되는데

content-box일때

width는 padding,border크기를 포함하지 않는다

border-box일때

width는 padding,border크기를 포함한다

예를들어

div

{

width:300px;

height:100px;

border:50px solid #ff0000;

min-width:100px;

min-height:100px;

margin:10px;

}

라고 가정할때

"margin:10px; 밑줄에 box-sizing:content-box"를 입력하면

"margin:10px; 밑줄에 box-sizing:border-box"를 입력하면

위에 그림 처럼 나오게 된다

CSS 랜더링 엔진

랜더링엔진

브라우저 마다 페이지를 랜더링 하는 기준이 달라서, 특정 브라우저에서만 동작하는 CSS를 기립하기 위해 CSS HACK을 사용한다.

예)

-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .2s;
transition: opacity .25s ease .2s;

-webkit : 사파리 크롬에서만 동작
-o : 오페라에서만 동작
-moz : 파이어폭스에서 동작
transition : 전체 브라우저 동작

*transtion은 마우스 오버시 자바스크립트나 플래쉬 없이 div에 어떠한 액션을 줄때 사용한다

참조링크

http://www.w3schools.com/cssref/css3_pr_transition-property.asp
http://linuxism.tistory.com/1677

HTML 구분선

구분선 hr

html에서 구분선을 사용할때는 <hr>요소를 사용
-블록레벨요소
-종료태그는 없음 대신 <hr />로 표시

코딩
<hr />
<div>구분선</div>
<hr />

결과

구분선

HTML 동영상 삽입

html 동영상 삽입 방법

1.embed 태그를 이용한 동영상 삽입
- 웹표준에서는 사용되지 않음.

2.object 요소를 이용한 동영상 삽입

CSS 메뉴만들기

css로 메뉴만들기

css만으로 간단히 메뉴를 만들수 있다.
가상클래스 :hover, display 사용

예시

HTML 원하는 위치로 이동

원하는 위치로 이동
#id명

html 작업중 원하는 위치로 이동하는 간단한 방법은 id값을 이용하는것.
원하는 위치에 id값을 주고 #id명을 링크로 걸어주면 링크가 걸린 id값으로 이동함.

예시

같은 방법으로 맨 상당으로 이동하기 원한다면
링크에 #top을 넣어주면됨.

HTML id&class

id, class
특정 요소를 선택하여 스타일을 줄때 사용됨.

<div id="idName" class="className">id와 class</div>
id : html문서 안에서 딱 1번만 선택될때 사용함.
      header나 content 등 한번만 들어가는 요소에 사용하면 좋음.
      스타일 사용할때 #idName
      ex)div #idName { background:#ff0000; }

class : 복수로 선택할때 사용.
      같은 스타일을 사용하는 경우 사용하면 좋음.
      스타일 사용할땐 .className
      ex)div .className { color:#ff0000; }

id와 class는 한 요소에서 동시 사용 가능하다.
id명와 class명은 알파벳 소문자, 대문자, 숫자, '_'가 사용가능하나 숫자가 먼저올 순 없다.

ex)id="0div" (X)

HTML 문서의 기본구조

html 문서의 기본구조

html이란?
html은 Hypertext Markup Language의 약자로, 월드 와이드 웹(www)에서 볼수 있는 페이지를 만들때 사용하는 프로그래밍의 언어의 한 종류.
현재 많은 웹페이지들은 대부분 html을 쓰고 있음.
가장 보편적인 언어라고 보면 될듯.

- html에서 사용되는 요소를 사용할때는 "<",">"를 사용함.
   ex) <h1>블로그에 오신걸 환영합니다!</h1>
- 이때 첫번째나오는 요소명이 시작태그이고, 끝에 나오는 요소명은 종료 태그임. 종료태그엔 반드시 슬러시('/')가 들어감.

- 일부 요소는 종료태그가 없이 < ... /> 이렇게 들어가는 경우가 있는데. 이런 요소를 빈요소라고 함.
   ex)<img src="이미지경로" />

- 요소들에는 속성이 들어감.
   ex) <a href=http://gela_studio.blog.me>블로그</a>
- 이때 <a>는 요소, href는 속성, http://gela_studio.blog.me는 속성값이 된다.
- 속성을 쓸땐 요소에서 한칸 띄운뒤 사용(스페이스바). 속성과 다른 속성을 쓸때도 스페이스바로 구분을 해줘야함.

html 기본구조
<html>
<head>웹페이지의 기본정보</head>
<body>
     웹페이지의 내용
</body>
</html>

<html></html> : html문서의 시작과 끝을 알림. html문서임을 알려줌.
<head></head> : 헤드 사이에는xml선언, 타이틀, 메타태그, 언어선언, 스타일링크 등 페이지에 필요한 기본정보들이 들어간다.
<body></body> : 웹페이지에서 보여주려는 내용이 들어가는 부분. 실질적으로 웹페이지에 출력되는 내용들이 들어간다.

HTML 절대경로와 상대경로

절대경로와 상대경로

웹상에서 링크를 걸거나, 이미지 삽입할때 꼭 알아야할 절대경로과 상대경로.

절대경로
http// <-요것까지 모두다 쓰인게 절대 경로.
예를들면.
<a href="http://jaguarkim2108.blogspot.kr/">블로그</a>
<img src=http://jaguarkim2108.blogspot.kr/img.jpg />
이런식으로 주소 모두가 쓰이면 절대경로이다.

상대경로
어떠한 파일이나, 폴더를 기점으로 한 경로이다.
예를들면
<a href="/index.html">블로그</a>
<img src="../img/img.jpg" />
이런식으로 들어간 게 상대경로다.
여기서 중요한건 "../"와 "." "/"의 차이다.
"../"는 지금 파일의 윗폴더.
"."은 현재 같은 폴더 내에서(생략이 가능)
"/"의 최상의 위치에서 찾게된다.(http://jaguarkim2108.blogspot.kr/와 같음)

HTML 표

table, tr, th, td
표를 작성할때 사용.

표의 기본은 셀(cell), 가로 셀을 행(row), 세로 셀을 열(column)이라고 함.
table : 표의 전체. 표를 감싸고 있음.
tr : 행(row)
th : 제목 셀
td : 내용 셀

표 그룹화
thead : 헤더행 그룹
tbody : 내용 행 부분 그룹
tfoot : 푸터 행 그룹
colgroup : 열 그룹. 구조적인 그룹화를 위해 사용
col : 열의 속성값과 스타일을 지정하기 위해 사용.

표에 들어가는 요소들
caption : 표의 제목
summary : 표의 요약문

표 디자인 속성
width : 가로길이
border : 표 전체를 감싸고 있는 테두리의 두께
frame : 표를 감싸고 있는 테두리를 어디에 표시할지 지정
void(없음), rhs(오른쪽), lhs(왼쪽), above(위쪽), below(아래쪽), hsides(상하), vsides(좌우), box(상하좌우), border(상하좌우)
rules : 셀의 구분선
none(없음/기본값), group(그룹화 된 행 또는 열), rows(행 사이), cols(열 사이), all(모든 셀에 표시)
cellspacing : 셀사이의 간격. "px", "%"로 표시
cellpadding : 셀 안의 간격. "px", "%"로 표시

샐 결합
rowspan : 행(가로) 결합
colspan : 열(세로) 결합

예시

<table cellpadding="0" cellspacing="0" width="500" rules="all" border="1" summary="표내용을 간략하게 설명">
    <caption>표의 제목</caption>
    <col width="100px" />
    <col width="" />
    <col width="100px" />
    <col width="100px" />
    <thead style="background:#e3e3e3;">
    <tr>
        <th>상단1</th>
            <th>상단2</th>
            <th>상단3</th>
            <th>상단4</th>
        </tr>
    </thead>
    <tbody align="center" style="height:30px; background:#fff;">
    <tr>
        <td>내용1</td>
            <td>내용2</td>
            <td>내용3</td>
            <td>내용4</td>
        </tr>
        <tr>
        <td colspan="2">내용5</td>
            <td>내용6</td>
            <td rowspan="2">내용7</td>
        </tr>
        <tr>
        <td>내용8</td>
            <td>내용9</td>
            <td>내용10</td>
        </tr>
    </tbody>
</table>

결과

표의 제목
상단1	상단2	상단3	상단4
내용1	내용2	내용3	내용4
내용5		내용6	내용7
내용8	내용9	내용10	내용7

CSS display

display
요소을 인라인, 블록박스로 보일지 결정해줌.

div { display:값; }
· none : 요소가 보이지 않음.
· block : 요소를 블록박스로 만듬
· inline : 요소를 인라인요소로 만듬.
· inline-block : 배치는 블록박스로 되지만, 요소는 인라인임.
· list-item : li요소와 같이 블록 박스와 목록 항목의 인라인 박스로 만듬.
· run-in : 런인박스로 만듬.
· 다음 요소들은 테이블 관련 요소와 비슷한 형태로 만듬.
   inline-table
    table
    table-row-group
    table-column
    table-column-group
    table-header-group
    table-footer-group
    table-row
    table-cell
    table-caption
· compact, marker는 삭제됨.

HTML img

img
이미지 삽입할때 사용
<img src="이미지경로" width="가로" height="세로" alt="이미지 소개" />

이미지의 종류
gif
-compuServe사가 개발.
-하나의 이미지에 265색까지 사용 가능.
-아이콘이나 색이 단순한 이미지에 적합함(이미지가 깨져보임)
-투명, 애니메이션이 가능하다.

jpg
-사용가능한 색수가 약1,677만 색 가능
-복잡한 이미지에 적합함.
-이미지 크기가 큼.
-투명, 애니메이션 기능은 불가능하다.
-가장 많이 사용됨.

png
-W3C가 개발.
-단순한 이미지에서 복잡한 이미지까지 저장가능.
-gif보다 가벼울수도 있으나 색이 많아지면 jpg보다 이미지가 무거움.
-투명 저장이 가능하다.(ie6이하에서는 불투명하게 나옴.)

CSS strong

strong
글씨 강조, 볼드체

- 글씨를 강조할때 사용.
- 인라인 요소
- font-weight의 bold의 굵기

예시

글씨를 <strong>굵게</strong> 할때 사용합니다.

결과
글씨를 굵게 할때 사용합니다.

- <b>요소와 비슷함. (<b>요소는 텍스트 스타일요소, <strong>는 강조 요소로 사용됨.)

CSS box-shadow

box-shadow
요소(박스)의 그림자 효과

- 박스에 그림자 효과를 넣고 싶을때 사용
- 문법
div { box-shadow:h-shadow v-shadow blur spread color 그림자위치}
· h-shadow : x축 그림자. 길이로 표현해준다(ex. 10px, 2em, 5%). 마이너스값 사용가능
· v-shadow : y축 그림자. 역시 길이로 표현. 마이너스값 가능
· blur : 흐린정도. 생략 가능.
· spread : 퍼지는 정도. 생략 가능
· color : 그림자색. red,#ff0000,rgb(255,255,255) 등 다양한 방법이 가능하다.
· 그림자위치 : 기본은 박스 바깥쪽 그림자. inset을 넣으면 박스 안쪽으로 그림자가 생김.

예시

div { box-shadow:5px 5px; }

div { box-shadow:10px 10px 20px blue; }

div { box-shadow:10px 10px 20px 20px blue; }

div { box-shadow:10px 10px 20px blue inset; }

CSS 글자간격

글자간격

letter-spacing
글자의 문자간격

글자 하나하나의 간격을 조절할때 사용
문법 div { letter-spacing:0.2em; }
0은 normal 기본 간격임.
보통 px,em으로 표시
마이너스 값도 가능하지만, 특정범위를 넘어서면 더이상 값이 반영되지 않는다.

div {font:normal 12px '나눔고딕', '돋움', '굴림'; background:#fff; letter-spacing:2em;}
<div>글자 사이사이 간격을 조절해 줍니다.</div>

결과

글자 사이사이 간격을 조절해줍니다.

div {font:normal 12px '나눔고딕', '돋움', '굴림'; background:#fff; letter-spacing:-0.5px;}
<div>글자 사이사이 간격을 조절해 줍니다.</div>

결과

글자 사이사이 간격을 조절해줍니다.

word-spacing
단어 간격

단어와 단어 사이 간격을 조절할때 사용
문법 div {word-spacing:5px;}
0은 normal 기본 간격
보통 px, em으로 표시
마이너스 값도 가능하지만, 특정범위를 넘어서면 더이상 값이 반영되지 않는다.

div {font:normal 12px '나눔고딕', '돋움', '굴림'; background:#fff; word-spacing:5px;}
<div>단어와 단어 사이 간격을 조절해 줍니다.</div>

결과

단어와 단어 사이 간격을 조절해 줍니다.

div {font:normal 12px '나눔고딕', '돋움', '굴림'; background:#fff; word-spacing:-2em;}
<div>단어와 단어 사이 간격을 조절해 줍니다.</div>

결과

단어와 단어 사이 간격을 조절해 줍니다.

CSS text-shadow

text-shadow
텍스트에 그림자 넣기

- 텍스트에 그림자를 넣고 싶을 때 사용.
- 문법
div {text-shadow: h-shadow v-shadow blur color;}
    · 첫번째 길이는 x축 (가로)
    · 두번째 길이는 y축 (세로)
    · 세번째 길이는 흐린정도
    · x축과 y축 길이는 마이너스도 가능함.
    · 네번째 색은 그림자색을 나타냄.
    · 색이 첫번째에 와도 무방하다.
    · red,#ff0000,rgb(255,255,255) 등 다양한 방법이 가능하다.
    · 흐린정도와 색상은 생략 가능.
    · 그림자 복수지정도 가능하다. ','이용

예시

h1 {text-shadow:5px 5px 3px red; }

h1 {text-shadow:5px 5px; }

h1 { text-shadow:5px 5px 2px #666, -5px -10px 2px #C30; }

- ie9 이하 브라우저에선 적용되지 않음.

HTML sup,sub(위첨자,아래첨자)

sup
위첨자

<p>위첨자는 <sup>이렇게</sup> 사용해요</p>

결과▼
위첨자는 ^이렇게 사용해요

sub
아래첨자

<p>아래첨자는 <sub>이렇게</sub> 사용해요</p>

결과▼
아래첨자는 _이렇게 사용해요

CSS opacity

opacity
요소의 투명도 조절.

적용방법
opacity : 0.5;
- '0, 0.1~0.9,1' 숫자로 표시
- '1'은 100%
- '0'은 투명함.
- 투명도가 들어간 요소안의 내용물도 함께 투명해짐.
- ie8이하에서는 적용 안됨. 적용할땐 아래방법 사용
filter: alpha(opacity=50) -> 50은 0~100까지 숫자. 0은 투명, 100은 완전 다보임.

예시

opacity:1;	opacity:0.9;	opacity:0.8;
opacity:0.7;	opacity:0.6;	opacity:0.5;
opacity:0.4;	opacity:0.3;	opacity:0.2;
opacity:0.1;	opacity:0;

CSS text-overflow

text-overflow
긴 글 줄이기 ("..."처리)

clip : 끊김 없음.

ellipsis : "..."처리

- width가 정해져야 함.
- overflow:hidden;과 white-space:nowrap;이 함께 사용.
- ...은 브라우저마다 다름.

CSS white-space

white-space

공백문자 처리방법

normal
정해진 영역에 따라 줄이 바뀜. 일반적인 것

ex)
동해물과 백두산이 마루고 닳도록 하느님이 보우하사 우리나라만세
무궁화 삼천리 화려강산 대한사람대한으로 길이 보전하세

pre
마크업에서 엔터 친 부분에서 줄이 바뀜.
정해진 영역에서 벗어날수도 있음.

ex)
동해물과 백두산이 마루고 닳도록 하느님이 보우하사 우리나라만세
무궁화 삼천리 화려강산 대한사람대한으로 길이 보전하세

nowrap
줄바뀜없음.

ex)
동해물과 백두산이 마루고 닳도록 하느님이 보우하사 우리나라만세
무궁화 삼천리 화려강산 대한사람대한으로 길이 보전하세

pre-wrap
pre와 같이 엔터 친 부분에서 줄바뀜이 일어나고, 정해진 영역에서도 줄바뀜이 일어남

ex)
동해물과 백두산이 마루고 닳도록 하느님이 보우하사 우리나라만세
무궁화 삼천리 화려강산 대한사람대한으로 길이 보전하세

pre-line
정해진 영역에서 줄이 바뀌고, 엔터친 부분에서도 줄이 바뀜.

ex)
동해물과 백두산이 마루고 닳도록 하느님이 보우하사 우리나라만세
무궁화 삼천리 화려강산 대한사람대한으로 길이 보전하세

2014년 4월 27일 일요일

-webkit : 사파리 크롬에서만 동작-o : 오페라에서만 동작-moz : 파이어폭스에서 동작transition : 전체 브라우저 동작

-webkit : 사파리 크롬에서만 동작
-o : 오페라에서만 동작
-moz : 파이어폭스에서 동작
transition : 전체 브라우저 동작