html의 공간에서 layout 잡는 방법은 정말 다양하다. 

flexbox를 사용해서 layout을 잡고 정렬을 하기도 하고  
극단적으로는 table로 잡기도한다. 

오늘은 html 페이지에서 가로 영역을 균등하게 

나누는  간단한 방법을 알아보자

 

다음과 같이 body 내에 존재하는 div박스 3개를

CSS를 이용하여 가로로 균등하게 채울 것이다. 

 

No.1
No.2
No.3
body

 

위의 3개의 박스를 가로로 채우기 위해서는 

다음과 같이 영역별로 sytle의 display 속성 값을 지정해주어야 한다.

 

최상위에 table

    그 하위에 table-row

        그 하위에 table-cell

 

이렇게 하면 cell은 상위의 row 영역을 cell 개수만큼 나눠 가진다.

 

 

 

 

 

 

적용 코드

 

 

 

코드는 다음과 같다.

 

<div style=“display:table;”> 최상위 div <!-- 테이블 영역 -->
    <div style=“display:table-row;”> <!-- 한 줄 영역 -->
        <div style=“display:table-cell;”> cell-1 <!-- 한 칸 영역 -->
            <div> No.1 </div>
        </div>
        <div style=“display:table-cell;”> cell-2 <!-- 한 칸 영역 -->
            <div> No.2 </div>
        </div>
        <div style=“display:table-cell;”> cell-3 <!-- 한 칸 영역 -->
            <div> No.3 </div>
        </div>
    </div>
<div>

 

기본적으로 table-cell안의 내용은 가운데 정렬이 된다. (table 태그의 상태와 유사하다.) 

 

 

div의 내용이 영역을 넘어가면 div의 width는 자동으로 늘어나는데

이를 막기 위해서는 table-cell의 style에

table-layout : fixed; 를 추가해주면 된다.

 

 

이렇게 하면 layout 은 고정되는데 내용은

자동 줄 바꿈이 되지 않아서 내용이 layout을 넘어간다.

 

자동 줄 바꿈을 설정해주어야 하는데 

table-cell의 style에 

word-break: break-all; 을 추가해주면 된다.

 

 





실제 코드

위의 이미지로 보여진 예제의

실제 코드는 다음과 같다.

 

참고하면 좋을 것 같다.

 

<!-- 테이블 방식으로 가운데 정렬하는 방법 -->
<div class="test_body" style ="width:230px; height:180px;background:skyblue;">
<div class="test_content" style="width:50px; height:50px; background:green;" >No.1</div>
<div class="test_content" style="width:50px; height:50px; background:red;" >No.2</div>
<div class="test_content" style="width:50px; height:50px; background:yellow;" >No.3</div>
body
</div>
<br>
<br>
<br>
<div class="test_body" style ="display:table;table-layout:fixed; word-break:break-all; width:230px; height:180px;background:skyblue">
  <div style="display:table-row; ">
    <div align=center style="display:table-cell; background:violet;" >
      <div class="test_content" style="width:50px; height:50px; background:green" >No.1</div>
      cell-1
    </div>
    <div align=center style="display:table-cell; background:orange;" >
      <div class="test_content" style=" width:50px; height:50px; background:red" >No.2</div>
      cell-2
    </div>
    <div align=center style="display:table-cell; background:pink;" >
      <div class="test_content" style="width:50px; height:50px; background:yellow" >No.3</div>
      cell-3
    </div>
  </div>
body
</div>
저작자표시 비영리 변경금지

'Web 개발 > HTML & CSS' 카테고리의 다른 글

jQuery로 움직이는 배너 만들기  (0) 2019.07.26
CSS의 position으로 배너 추가하기  (0) 2019.07.17

배너를 움직이게 하기위해서는 

페이지가 열린 후에도 동적으로 Element의 속성을 변경되어야한다.

 

이를 위해서는 당연히 javaScript가 필요한데, 

javascript를 통해서 HTML의 window 객체의 정보를 얻어서 동적으로 움직이게 하면 된다.

그렇지만 순수 JavaScript로 모든 것을 구현하기엔 애니메이션과 같은 너무 복잡한 부분들이 존재한다.

 

이러한 어려움은 JQuery를 통해 간단하게 해결하여 움직이는 배너를 구현할 수 있다.

 

 

1. 움직이는 기준 : 스크롤 이동

스크롤이 이동할 때마다 배너의 위치를 바꾸어 주어야 한다.

이를 위해선 가장 먼저 스크롤이 이동했는지 알려주고, 이동할 때마다 특정한 행동(함수)를 하게 만들어야한다.

이러한 기능을 가지는 JQuery 함수가 바로 $(window).scroll() 이다.

 

$(window).scroll(function(){ /* 실행할 함수 */ });

 

2. 멈추는 기준 : 스크롤 기준 일정 거리

스크롤을 기준으로 하기 때문에 현재 스크롤이 위에서부터 몇이나 떨어져있는지 알 수 있어야한다.

이러한 기능을 하는 것 역시 JQuery 함수  $(window).scrollTop() 이다.

현재 스크롤이 페이지 맨위에서 얼마만큼 떨어져있는지를 계산해준다.

즉, 여기서 나오는 값은 현재 보고 있는 페이지에서 제일 꼭대기라고 생각하면 편하다.

보통 배너는 페이지 중간쯤 나오기 때문에 나는 여기에 35를 더해서 변수에 저장해 둘 것이다.

 

var position = $(window).scrollTop()+35;

 

3. 움직이는 효과 : 부드럽게 이동해서 멈추는 효과

움직이기 시작하는 기준과 멈추는 지점을 선언했으니 이제 부드럽게 이동하게 만들면 된다.

이를 위해선 $(‘#banner’).stop().animate({속성명 :속성값},이동시간)를 사용한다.

배너 div의 속성이 지정해준 속성값까지 이동시간안에 변하도록 한다.

이동시간은 ms이며 1000가 1초이다.

 

4. 조립

이제 이 모든 내용을 합치면 다음과 같다

  $(window).scroll(function( ){
        var position = $(window).scrollTop()+35;
      $( "#banner" ).stop().animate({top:position+"px"}, 800);
   });

 

저작자표시 비영리 변경금지

'Web 개발 > HTML & CSS' 카테고리의 다른 글

[CSS] div 균등 분할 / 가운데 정렬 (display : table)  (0) 2019.08.08
CSS의 position으로 배너 추가하기  (0) 2019.07.17

홈페이지에 배너를 추가하려 할 때 배너만을 위해 padding을 변경하고 div를 추가하기가 난감하다.

잘못 바꾸었다가 좌우에 있는 메뉴의 위치가 틀어질 수가 있는데

배너를 추가한 페이지에서만 메뉴의 위치가 틀어져있으면 페이지의 통일감을 깨질 수 있기 때문이다.

 

그래서 position을 사용하여 기준이 되는 div 옆에 배너를 붙이기로했다.

 

배너가 잘릴경우 상위 엘리먼트의 overflow가 hidden이 아닌지를 확인해보아야 하며

그래도 최상위로 올라오지 않을시 style에 z-index값을 주는 방법도 있다.

 

Body
컨테이너
컨텐츠 (기준이되는 박스)
배너

 

 

 <div id="body" style="background: skyblue;">
  <body>
   <div id="container" style="background: yellow; ">
     컨테이너
       <div id="contents" style="background: green;">
         컨텐츠 (기준이되는 박스)
         <div id="banner" style="background: red;">
           배너
         </div>
       </div>
   </div>
 </div>

 <!-- 컨테이너 CSS -->
 #container { 
	width:250px; 
	height:350px; 
	overflow:visible;
 }

 <!-- 컨텐츠 CSS -->
 #contents { 
	width:200px; 
	height:300px; 
	position:relative;
 }

 <!-- 배너 CSS -->
 #banner { 
	width:100px; 
	height:200px; 
	position:absolute; 
	top:0px; 
	right:-110px;
 }
저작자표시 비영리 변경금지

'Web 개발 > HTML & CSS' 카테고리의 다른 글

[CSS] div 균등 분할 / 가운데 정렬 (display : table)  (0) 2019.08.08
jQuery로 움직이는 배너 만들기  (0) 2019.07.26

+ Recent posts

"여기"를 클릭하면 광고 제거.

티스토리툴바