CSS의 Overflow와 position을 배워보았다

안녕하세요 개발적금입니다.

 

오늘은 수업중에 div 엘리먼트 안에 이미지를 넣어보았습니다.

 

사실 별거 아닌데 이미지의 크기에 따라서 화면에 보여지는게 달라질수가있습니다.

 

큰 이미지를 넣을때 생각해야할것이

 

1. 가운데 정렬

 

2. 스크롤이슈 입니다.

 

제가 실습했을때는 div의 넓이를 1200px로 하였고 그안에 이미지의 크기는 1920px이었습니다.

 

영역설정한 div에 이미지를 넣으니 가운데 정렬도 안될 뿐더러 , 확대나 축소를 할경우에

 

담지를 못하니 스크롤이 옆에 생겨서 보기 불편했습니다!

 

그래서 가운데정렬 할때

 

<div id = "visual">

	<img src ="1920px이미지" />

</div>


---------------------------------------------

CSS

#visual {
	max-width : 1920px;
    height : 500px
	position : relative;
	overflow : hidden;
}

 

visual 부분에 최대넓이 1920px , 높이 500px 영역을 설정해주었고

position : relative

overflow : hidden

으로 설정하였습니다..

 

position 속성은 위치지정할때 많이 쓰입니다

속성요소는 이것저것 많지만 많이쓰는것은 absolute와 relative입니다.

 

absolute 속성은 z-index를 사용하여 우선순위를 둘수있습니다.

보통

z-index : 5;

z-index : 1;

숫자가 높을수록 우선순위를 갖게 됩니다.

 

제가 position 속성은 위치지정할때 쓰인다고 말씀드렸습니다.

위치를 이동할때에는 

position : absolute; 선언을 해주시고

top / right / bottom / left 를 사용하여 움직일수있습니다(px단위)

 

top : 50px;

left : 100px;

 

하면 이미지가 위에서부터 50px , 왼쪽으로 100px 떨어져서 배치가됩니다.

그렇게 이미지를 떨어트려서 z-index로 우선순위를 매겨주면 겹치는 이미지효과를

줄수도있습니다

 

하지만 이렇게 쓰게되면 나중에 유지보수쪽에서도 힘들수가 있고 편집할때 조금

힘들수가있다! 그래서 제가 배운것은

 

position : absolute를 사용할때, relative를 상위레벨에 두어서 같이쓴다고 합니다.

 

 

relative는 쉽게말해서 absolute를 잡아주는 역활이라고 보면됩니다.

 

그 다음 

Overflow : hidden은 그 부분을 잘라낸다고 이해하시면 될것같습니다.

 

무슨말이냐? 우리는 visual div를 max-width(브라우저가 아무리 커져도 1920px로

하겠다) 1920px / height 500px을 주었고

 

position : relative 속성을 사용하여 visual 1920 X 500을 고정시켰고

 

그부분을 잘라내어 이미지를 넣었습니다.

 

이때 잘라내는 역활을 overflow : hidden이 하게됩니다.

 

그리고 오늘 또 배운것이 css를 사용하여 투명화된 리스트를 만드는걸 배웠습니다..

 

위에서 말했듯이 position :relative는 부모역활 , absolute를 잡아주기위한 역활이라 하였습니다.

 

저는 1920px 이미지 최하단에 메뉴바를 넣어서 1920px 이미지 위에 투명하게 보이게하고싶습니다.

 

<div id="visual">
            <ul>
                <li><img src="1920px 이미지1"/></li>
                <li><img src="1920px 이미지2" /></li>
                <li><img src="1920px 이미지3" /></li>
            </ul>
            <div>투명도 메뉴테스트</div>
</div>

--------------------------------------------------------------------

CSS

#visual > ul > li {
	position : absolute;
    top : 0px;
}

#visual > div {
	position : absolute;
    z-index : 5;
    width : 100%;
    height : 60px;
    background : rgba(0,0,0,0.5);
    bottom : 0px;
}

 

이 코드를 해석해보면 visual안에 1920px이미지가 3개가 있습니다.

visual > ul > li 이미지들을 position : absolute; 로 설정 , top : 0px 

top에서 0px떨어지라는 의미입니다

 

그리고 visual > div 안에 투명도 메뉴 테스트라는 텍스트도

position : absolute; / z-index : 5; 를 주어서 이미지안에서 맨앞에 표시되게 하였고

background : rgba(0,0,0,0.5); 는 red,green,blue,alpha의 약자입니다 마지막

alpha값이 1일수록 짙어지고 0에 가까워질수록 얕아집니다. 0.5를 주었으니 중간만 보이게해달라고

하였고 bottom : 0px;은 밑에서 0px떨어져라 즉 밑에 붙으라는 의미입니다.

 

이렇게 오늘 배운 CSS들을 두서없이 리뷰해보았습니다.

 

1. position의 의미와 성질 (absolute,relative)을 잘 사용하자

 

2.overflow : hidden 이미지를 넣을때 이쁘게 정렬하기

 

였습니다 감사합니다