* block과 inline
- block : 한 줄에 한개만 배치
h, p, ul, li, table, div, form 등의 태그에 적용됨
태그 { display:block; }
- inline : 한 줄에 차례대로 배치
a, img, input, span 등의 태그에 적용됨
태그 { display:inline; }
* 좌표값 지정
태그 { top:100px; left:200px; right:100px; bottom:200px; }
- 정적 위치 설정(static) : 페이지의 정상적인 흐름에 따라 배치
태그 { position:static }
- 상대 위치 설정(relative) : 정상적인 흐름을 기준으로 상대적인 좌표에 배치
태그 { position:relative }
- 절대 위치 설정(absolute) : 전체 페이지를 기준으로 절대 좌표에 배치
태그 { position:absolute }
- 고정 위치 설정(fixed) : 스크롤에 관계없이 고정된 좌표에 배치
태그 { position:fixed }
* 배치 방향(float)
태그 { float:left; } 왼쪽에 배치
태그 { float:right; } 오른쪽에 배치
* 레이어( z-index ) : 레이아웃이 겹칠 경우 사용
태그 { z-index:값 } z-index가 클 경우 위에 표시되고 z-index가 낮으면 가려짐
* overflow
- hidden : 숨김
태그 { overflow:hidden }
- scroll : 항상 스크롤
태그 { overflow:scroll }
- auto : 늘어나면 스크롤
태그 { overflow:auto }
* 투명도 ( opacity )
태그 { opacity:0.0~1.0 } 0.0 완전투명, 1.0 완전불투명
* 가시성(visible)
태그 { visibility:visible; } 표시
태그 { visibility:hidden; } 숨김
* 애니메이션 효과
- 이동(transition)
태그 { transition:전환속성 시간; }
div { transition: width 5s; } div 태그의 가로길이를 5초동안 변경시킴
- 평행이동(translate)
translate(100px, 0px) x축 100px, y축 0px 이동
scale(1.2, 1.2) x축 1.2배, y축 1.2배 확대
rotate(30deg) 30도 회전
- 비틀기(skew)
skew(30deg, 20deg) x축 30도, y축 20도 비틀기
1. [css 기초] float 속성에 대하여
float를 그대로 번역하자면 '띄우다'라는 뜻입니다.
float는 css에서 정렬하기 위해 사용되는 속성입니다.
예를 들어, 문서에 사진과 그림이 있을 때, 그림을 왼쪽이나 오른쪽으로 띄워서 정렬하거나
각 객체를 오른쪽이나 왼쪽으로 정렬하여 전체 문서를 배치(layout)할 때도 사용할 수 있습니다.
지난 시간에 줄 속에 넣는 태그(inline element)와, 묶음 태그(block element)에 대해 배웠는데
[inline element&block element] - span, div 태그
묶음 태그에만 float 속성을 적용할 수 있습니다.
묶음 태그:
-
- 등..
[float 속성값]
float 속성값은 left,right, none 밖에 없습니다.
left- 왼쪽에 띄움
right- 오른쪽에 띄움
none-띄우지 않음 (기본값)
[float 속성 사용법]
(1) inline 으로 float 속성 넣기
>
(2)internal : html
(3)external : css 파일을 별도로 만들어, html 문서에 연결
① .css로 저장(예: text.css)
img
{
float:left;
}② .htm으로 저장(예:main.htm)
동해물과 백두산이 마르고 닳도록하느님이 보우하사 우리나라 만세.
(
HTML과 CSS의 차이, CSS 작성법) 참조해주세요~
그럼 지금부터 자세한 html/css 작성법과 실행 예문을 알아볼 건데요
먼저 float가 없을 경우 그림이 어떻게 표시되는지 확인해 볼게요.
[float 속성이 없는 경우]
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.
(후렴) 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세
남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세.
(후렴) 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세.
(후렴) 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세.
(후렴) 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세그림 바로 옆 맨 마지막 줄에서 글자가 붙습니다.
[float: left로 지정할 경우]
사용 예:
<img src="flower.png" width="200px" height="200px" >
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.
(후렴) 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세
남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세.
(후렴) 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세.
(후렴) 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세.
(후렴) 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세float: left로 설정하면 그림 주위로 문자가 이렇게 둘러싼 형태가 됩니다.
[float :right로 지정할 경우]
사용 예 :
2. z-index 적용
처음 예제에서(z-index가 없는 경우의 쌓임) 엘리먼트들이 기본적으로 어떻게 쌓이는지 설명했다. 만약 다른 쌓임 순서를 적용하고 싶다면 먼저 엘리먼트에
position속성을 지정하고z-index속성을 지정해야한다.z-index 속성은 하나의 정수 값을 가질 수 있다(양수, 음수 모두 가능하다). 이 값은 해당 엘리먼트의 z축 상의 위치를 나타낸다. 만약 당신이 z축에 익숙하지 않다면 여러 레이어가 쌓여있는 페이지를 상상해보라. 각 레이어는 번호가 붙어있고 높은 번호를 가진 레이어는 낮은 번호를 가진 레이어 위에 렌더링된다.
다시한번 경고! z-index는 position 속성이 설정된 엘리먼트에 대해서만 의미를 갖는다.
- 가장 아래(사용자로부터 가장 멀다)
- ...
- Layer -3
- Layer -2
- Layer -1
- Layer 0 기본 렌더링 레이어
- Layer 1
- Layer 2
- Layer 3
- ...
- 가장 위(사용자로부터 가장 가깝다)
노트:
- z-index 속성을 지정하지 않으면 엘리먼트는 기본 렌더링 레이어(레이어 0)에 렌더링된다.
- 만약 몇개의 엘리먼트들이 같은 z-index 속성 값을 가지면 (엘리먼트들이 같은 레이어에 위치한다) z-index가 없는 경우의 쌓임 쌓임 규칙을 적용한다.
다음 예제에서는 레이어들의 쌓임 순서가 z-index를 이용하여 바뀌어있다. DIV#5는 position 속성이 지정되지 않았으므로 z-index 속성 값은 쌓임 순서를 결정하는데에 아무 영향을 미치지 않는다.
Example source code
CSS Overflow와 Text-overflow 속성
CSS 속성중에 요소의 크기를 넘어서는 부분을 통제하는 overflow 속성에 대하여 알아봅니다.
overflow
요소의 박스에 콘텐츠가 넘칠때 표현방법을 지정한다.
CSS
div { width: 150px; height: 150px; overflow: scroll; }- overflow-x와 overflow-y 속성에 대한 축약 속성이다.
- 이 속성의 두 번째 값은 선택적이며, 하나의 값만 지정할 경우 overflow-x와 overflow-y 속성에 모두 적용된다.
속성값
- visible : 넘치는 콘텐츠를 자르지 않고 요소의 박스를 넘어 표시한다. 기본값이다.
- hidden : 넘치는 콘텐츠를 자르고 보이지 않게 한다.
- scroll : 넘치는 콘텐츠를 자르지만 스크롤바를 표시한다.
- auto : 넘치면 콘텐츠를 자르지만 스크롤바가 표시된다.
- inherit : 부모 요소로부터 값을 상속 받는다.
overflow 데모 보기
자바스크립트 문법
JAVASCRIPT
object.style.overflow="scroll"지원 현황
인터넷익스플로우 파이어폭스 사파리 크롬 오페라 지원 지원 지원 지원 지원 inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.
overflow-style
CSS3에 추가된 속성으로 브라우저의 지원 정도 및 사용자의 선호에 따라 스크롤 방법을 결정하는 overflow 속성의 실행 방식을 지정한다. 기본적으로 값이 상속된다.
CSS
.class1 {overflow-style: marquee-block;}속성값
- auto : 브라우저가 스크롤 방식을 결정하고 콘텐츠가 잘렸다고 판단되면 스크롤 바를 표시한다.
- move : 마우스 포인터에 의해 콘텐츠를 드래그 가능하게 한다.
- scrollbar : 일반적인 스크롤 바를 표시한다.
- marquee : 콘텐츠가 사용자 이벤트와는 독자적으로 움직인다.
- panner : 두 개의 중첩된 사각형이 생성된다. 작은 사각형은 콘텐츠가 보이는 영역이며, 큰 사각형 내에서 사용자에 의해 이동이 가능하다.
지원 현황
인터넷익스플로우 파이어폭스 사파리 크롬 오페라 미지원 미지원 미지원 미지원 미지원 overflow-x, overflow-y
CSS3에 추가된 속성으로 콘텐츠가 수평 혹은 수직 방향으로 넘칠 때의 처리 방식을 결정한다.
CSS
div {overflow-x: hidden;}속성값
- visible : 콘텐츠가 잘리지 않지만 잠재적으로 보이지 않을 수 있다.
- hidden : 콘텐츠가 잘리며 스크롤 기능이 지원되지 않는다.
- scroll : 콘텐츠가 잘리며 항상 스크롤이 지원된다.
- auto : 브라우저가 스크롤 방법을 결정하며, 필요한 경우 스크롤 바를 표시한다.
- no-display : 콘텐츠가 박스 크기에 맞춰지지 않으면
display:none속성이 적용된 것처럼 박스가 보이지 않게 된다. - no-content : 콘텐츠가 박스 크기에 맞춰지지 않으면 visibility:hidden 속성이 적용된 것처럼 콘텐츠가 보이지 않게 된다.
overflow-x, overflow-y 데모 보기
자바스크립트 문법
JAVASCRIPT
object.style.overflowX="scroll" object.style.overflowY="scroll"지원 현황
인터넷익스플로우 파이어폭스 사파리 크롬 오페라 지원 지원 지원 지원 지원 IE8 이하 버전은 overflow-x, overflow-y 속성을 지원하지 않는다.
text-overflow
CSS3에 추가된 속성으로 요소 내에 문자열의 넘침 현상을 처리하는 방법을 결정한다.
CSS
div {text-overflow: ellipsis;}속성값
- clip : 텍스트를 잘라낸다.
- ellipsis : 텍스트가 잘렸다는 것을 표현하기 위해 말줄임표(...)를 표시한다.
- string(문자열) : 지정된 문자열을 출력한다.
자바스크립트 문법
JAVASCRIPT
object.style.textOverflow="ellipsis"지원 현황
인터넷익스플로우 파이어폭스 사파리 크롬 오페라 IE6 FF7 SFf, iOS3 CH9, An2 O11 이 속성이 비공식적으로 과거부터 존재했던듯 싶다.
출처: http://webdir.tistory.com/347 [WEBDIR]
- 등..
영역에
DIV #1
position: absolute;
z-index: 5; DIV #2
position: relative;
z-index: 3; DIV #3
position: relative;
z-index: 2; DIV #4
position: absolute;
z-index: 1; DIV #5
no positioning
z-index: 8; 
댓글 ( 4)
댓글 남기기