CSS3 - CSS 스타일 - position(포지션)속성의 상대 위치 설정 (relative positioning) (26)
오늘은 CSS3의 스물 여섯번째 내용으로는 position(포지션)속성의 상대 위치 설정 (relative positioning)에 대해서 알아 보도록 하겠습니다.
CSS도 HTML처럼 기초부터 알아보기 전에
압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.
(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)
굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.
css 스타일 - position(포지션)속성의 상대 위치 설정 (relative positioning)이란?
2. 두번째 위 첫번째 내용이 완성 되었다면 head 부분의 style 태그(요소)안에
위 와 같이 태그(요소)에 부여된 클레스를 선택 한 뒤 css를 작성한다.
- 여기서 두번째 부분에만 position 속성의 relative 값이 들어간다.
- 추가로 각 클레스 one, two, three 의 background(배경색)은 임의로 아무거나 설정한다.
- 단 width(너비, 폭), height(높이)는 전체 동일하게 300px, 60px을 준다 (차이는 없지만)
3. 여기까지 위 html 부분과 css부분을 동일하게 작성 하고
웹 브라우저로 출력 했을때 위 와 같이 나와야 정상 적으로 만들어진 것이다.
4. 이 다음은 위에서 작성한 css에서 선택된 .two에 위와 같이 "position: relative;", "left: 50px"
속성과 속성 값을 추가 하고 다시 웹 브라우저로 출력해 본다.
이상 position(포지션)속성의 상대 위치 설정 (relative positioning) (26)에
관련된 포스팅을 마치도록 하겠습니다.
'웹 공부 > 3. CSS3' 카테고리의 다른 글
CSS3 - CSS 스타일 - position(포지션)속성의 고정 위치 설정 (fixed positioning) (28) (0) | 2017.08.12 |
---|---|
CSS3 - CSS 스타일 - position(포지션)속성의 절대 위치 설정 (absolute positioning) (27) (0) | 2017.08.08 |
CSS3 - CSS 스타일 - position(포지션)속성의 정적 위치 설정 (static positioning) (25) (0) | 2017.07.25 |
CSS3 - CSS 스타일 - 태그(요소) 위치 지정하기 (24) (0) | 2017.07.24 |
CSS3 - CSS 스타일 - display 속성 변경 (23) (0) | 2017.07.13 |
댓글