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 이미지를 넣을때 이쁘게 정렬하기
였습니다 감사합니다