공부하는 남자   



  • Key log

    • 공부 하는 남자
    검색 하는 남자

  • Log in out

  • 관리자

  • 편집

  • 글 쓰기

  • Link

  • Home
    • 감성 목수일지 세상살이 코딩공부 html/CSS공부 직업 블로그팁 이따구 정치판

    블록의 위치를 결정 하는 position 요소와 도형의 수직 구조 를 결정 하는 z-index 요소총정리

    2020. 12. 27. 21:43   html과css공부


    a
    b
    c
    d
    수직 도형 꾸미기


    지난 글에서 블록 레이어 들의 위치를 지정 하는 방법 으로 margin속성 과 float속성 그리고 clear속성 을 이용 해 위치를 지정 해 주는 것을 알아 봤습니다.

    이제 부터는 position element의 속성으로 레이 아웃 해 보도록 합니다.

    position 엘리먼트의 속성자 종류

    position 엘리먼트의 속성자로  static , absolute ,  relative , fixed , 4가지의 속성자를 가지고  있으며 각각의 사용 목적에 따라 이용 합니다.
    static :현재 배열한 자리 기준으로 고정 되며 아무런 위치값을 가지지 않습니다.
    absolute :절대 위치로 결정 되며  body를 기준으로 top, bottom, left, right 속성자로 위치를 결정 해 주게 됩니다.
    relative :상대위치로 결정되며 상위의 값을 기준으로 top, bottom, left, right속성자로 위치를 결정 해주게 됩니다.
    fixed :절대위치인 body값이 기준이 되며 left와 right의 속성자만이 위치를 결정 해주게 되며 스크롤이 움직여도 항상 고정된 값을 가지게 됩니다.

    현재 제 블로그에 설명용으로 만든 레이 아웃들은 설명을 위해 제가 임의대로 결과를 조금 조작해 만든 것으로 바같의 빨간 실선으로 된 큰 사각을 바디라고 가정하여 꾸민 레이아웃들 입니다. 

    깨끗한 문서에 position 속성자를 적용 했을 경우 나타나게 되는 레이 아웃 입니다. 

    아래는 기본적인 html 문서의 모습대로 마크업 시켜 속성별로 각 각 개별적인 문서들을 만들어 보았습니다.

    순서는 div레이어에 적용될 스타일과  div태그 와  그리고 레이아웃된 결과로 나타내게 됩니다.

    참고로 layout:fixed 라는 소스는 원래 table- layout:fixed 로 테이블 테그에 사용 되는 속성값 으로 셀안의 텍스트나 콘텐츠에 의해 셀이 늘어 나는 것을 방지 하도록 만든 속성값이고요 제가 이 값을 div태그에 적용한 것으로 여기서는 div 크기가 텍스트나 콘텐츠에 영향을 받지 않도록 방지한 것입니다.

    이속성의 경우 확실하지는 않지만 일부 브라우져의 경우 적용이 되지 않는 것 같습니다.

    참고 해 주시길 바랍니다.

    position  속성자 레이 아웃 예제 

    

<html>
<meta charset="UTF-8">
<title> 속성값 없는기본배열
</title>
<head>
<style>
body{
margin:0px; padding:0px;
}
#da,#db,#dc,#dd,#de{
width:100px; height:100px; 
border:1px solid red; 
text-align:center; 
padding-top:35px; 
layout:fixed;
}
#da{
background-color:red;
}
#db{
background-color:green;
}
#dc{
background-color:blue;
}
#dd{
background-color:gray;
}
#de{
background-color:lime;
}
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
</body>
</html>


    결과)
    a
    b
    c
    d
    e


    위에 만들어진 레이아웃의 기본 배열은 넓이와 높이 값으로 면적을가진 레이어를 에디터의 글쓰기 순서에 의해 배치한 레이어 들인데요 div태그의 속성은 블록레벨 속성으로 마크업되는 순서에 따라 좌측 상부를 기준으로 해서 아래로 따닥 따닥 붙어서 자리를 잡게 됩니다. 


    그럼 이 레이어 들에 position속성자를 사용 하지 않고 margin속성 값 만으로 위치를 배열 해 보도록 합니다.

    전체 레이어에 margin left:50px; top:50px;의 값을 각 레이어에 줘 보도록 하겠습니다.     


    

<html>
<head>
<meta charset="UTF-8">
<title> 기본배열 에margin:left:50px; top:50px;설정
</title>
<style>
body{
margin:0px; padding:0px;
}
#da,#db,#dc,#dd,#de{
width:100px; height:100px; 
border:1px solid red; 
text-align:center; 
padding-top:35px; 
layout:fixed;
display:block;
margin:50px 0px 0px 50px;
}
#da{
background-color:red;
}
#db{
background-color:green;
}
#dc{
background-color:blue;
}
#dd{
background-color:gray;
}
#de{
background-color:lime;
}
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
<div style="clear:both;">
</div>
</body>
</html>

    결과)
    a
    b
    c
    d
    e

    위의 결과에서 알 수 있는 것 처럼 상위의 레이어들을 기준으로 각 레이어 들이 적용한 값 만큼 이동 한 것을 알수 있습니다.
    참고로 margin속성은 레이어 외부의 타 레이어에 대한 공간을 의미 하며 margin 50px 0px 0px 50px;  이렇게 값을 준 경우 적용되는 값들은 상.우.하.좌에 각각 대응 하게 됩니다.
    따라서 상부에서 50픽셀 우측은 값이 없음 하부 역시 값이 없음 으로 현상태가 유지 되며 좌측으로부터 50픽셀 거리 만큼 각 레이어 들에 적용 됩니다.
    이때 margin속성이 가지는 것과 relative속성이 가지는 값을 비교 해보면 margin은 바로 위의 레이어가 기준이 되므로 각각의 레이어들이 자신들이 타 레이어들에 대해 주체와 객체로 작용하여 공간을 가지게 된다는 것 을 알수 있습니다.

    반면 relative의 경우 상위 레이어가 아닌 현재의 위치를 기준으로 각각 이동 하므로 모두 똑같은 값 만큼 이동 한 것을 아래 relative 예제에서 확인 할수 있습니다.

    padding 속성은 레이어 내부에 존재하는 텍스트나 콘텐츠와의 간격을 의미 하는 것입니다.

    이번엔 기본값에 position: static; left:50px; top:50px;의 값을 각 레이어에 줘 보도록 하겠습니다. 

    

<html>
<head>
<meta charset="UTF-8">
<title>기본배열에 position:static;left 50px top 50px값 설정</title>
<style>
body{
margin:0px; padding:0;
}
#da,#db,#dc,#dd,#de{
width:100px; height:100px; 
border:1px solid red; 
text-align:center; 
padding-top:90px; 
layout:fixed;
position:static;
left:50px; top:50px;
}
#da{
background-color:red;
}
#db{
background-color:green;
}
#dc{
background-color:blue;
}
#dd{
background-color:gray;
}
#de{
background-color:lime;
}
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
</body>
</html>


    결과)
    a
    b
    c
    d
    e


    static :현재 배열 한 자리 기준으로 고정되며 아무런 값을 가지지 않습니다.
    위에 서 확인 해본 결과는  static 의 속성은 아무런 변화를 일으키지 않는 다는 것을 알수가 있겠네요

    이번에는 기본값에 absolute left:50px top 50px의 값을 각 레이어에 줘 보도록 하겠습니다. 

    

<html>
<head>
<meta charset="UTF-8">
<title>position:absolute; left 50px top 50px설정</title>
<style>
body{
margin:0px; padding:0px;
}
#da,#db,#dc,#dd,#de{
width:100px; height:100px; 
border:1px solid red; 
text-align:center; 
padding-top:35px; 
layout:fixed; 
position:absolute;
left:50px; top:50px;
}
#da{
background-color:red;
}
#db{
background-color:green;
}
#dc{
background-color:blue;
}
#dd{
background-color:gray;
}
#de{
background-color:lime;
}
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
<div style="clear:both;"></div>
</body>
</html>


    결과)

    a
    b
    c
    d
    e


    absolute :절대 위치로 결정되며  body를 기준으로 top, bottom, left, right 속성자로 위치를 결정 해 주게 됩니다.  
    결과를 보면 알수 있듯이 절대 위치인 body를 기준으로 top, bottom, left, right 속성자로 위치를 결정 해 주게 된다 는 걸 알 수 있습니다.
    현재 모든 레이어들은 바디를 기준으로 위치를 이동 함으로 맨 아래쪽 레이어 나 상위 쪽의 레이어 모두 한 좌표로 이동 하여 모두 같은 좌표 위에 포개져 있어 가려진 레이어들은 볼수가 없는 상태 가 되었죠.

    이번에는 기본값에 relative left:50px top 50px의 값을 각 레이어에 줘 보도록 하겠습니다. 

    

<html>
<head>
<meta charset="UTF-8">
<title> position:relative left50px top50px설정</title>
<style>
body{
margin:0px; padding:0px;
}
#da,#db,#dc,#dd,#de{
width:100px; height:100px; 
border:1px solid red; 
text-align:center; 
padding-top:35px; 
layout:fixed; 
position:relative;
left:50px; top:50px;
}
#da{
background:red;
}
#db{
background:green;
}
#dc{
background:blue;
}
#dd{
background:gray;
}
#de{
background:lime;
}
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
<div style="clear:both;"></div>
</body>
</html>


    결과)

    a
    b
    c
    d
    e


    위의 결과에서 알수 있는것처럼 모든 레이어들이 상위 요소를 기준으로 현재 각 레이어 에게 주어진 값 만큼 레이어 들이 이동 하는 것을 알 수 있는데요 상대 위치를 나타내는 relative  속성자의 영향으로 상위 레이어의 영향을 받아 relative 값 인 왼쪽에서 50px거리만큼 상부에서 50px 거리 만큼 적용한 값으로 각각 이동 한 것 을 알 수 있습니다.

    기본값에 fixed left:75px top:340px의 값을 각 레이어에 줘 보도록 하겠습니다. 

    

<html>
<head>
<meta charset="UTF-8"> 
<title>
position:fixed;left:75px; top:340px;설정</title>
<style> 
body{
margin:0px; padding:0px;
}
#da,#db,#dc,#dd,#de{
width:60px; height:30px; 
border:1px solid red; 
text-align:center; padding-top:35px; 
layout:fixed; 
position:fixed;
left:75px; top:340px;
}
#da{
background-color:red;
}
#db{
background-color:green;
}
#dc{
background-color:blue;
}
#dd{
background-color:gray;
}
#de{
background-color:lime;
}
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
</body>
</html>


    결과)

    fixed 결과


    위의 결과에서 보는것 처럼 fixed값은 절대 위치인 body를 기준으로 상,하,좌,우 방향의 값을 가지게 되는 것은 absloute와 동일 하지만 스크롤이 움직여도 바디의 탑 위치에서 고정 되어 있다는 것 을 알 수가 있습니다.

    그린색에 빨간 글씨로 click이라고 적혀 있는 메뉴 버튼이 왼쪽 스크롤 에도 상단에 그대로 고정 되어 있는 것을 볼수 있습니다.

    스크롤을 상하로 움직이면 바탕만 움직일뿐 버튼은 항상 그자리에 고정 되어 있다는 것을 확인 할수가 있는데요 바로 절대 위치 fixed 속성 때문 입니다.

    이 메뉴버튼을 클릭하면 스크립트 토글에 의해 슬라이드 창이 열리고 링크 메뉴들이 펼쳐 지게 됩니다만 아래 쪽 마크업 과 충돌이 되는 관계로 레이어 컷 합니다.
    position속성자를 사용해 지금 까지는 레어어 전체에 공통으로 설정 한 값들을 이번에는 각각의 레이어 들에 다른 값 을 주어 위치의 변화를 살펴 보도록 합니다.
    그리고 고정된 값을 가지고 속성값에 아무런 영향을 받지 않는 static 속성자는 생략 하도록 하겠습니다.
    우선 absolute의 위치 변화를 살펴 보도록 하겠습니다

    이번에는 기본값에 absolute; left:50px의 값을 주고 top 의 값은 각 레이어 마다 레이어 크기인 100px을 증가 하여 다르게 줘서 숨겨진 레이어들을 펼쳐 보도록 하겠습니다. 

    

<html>
<head>
<meta charset="UTF-8">
<title>left 50px top 의 값을 100px  증가 하여 각각  다르게 설정</title>
<style>
body{
margin:0padding:0;
}
#da,#db,#dc,#dd,#de{
width:100px; height:100px; 
border:1px solid red;
text-align:center; 
padding-top:35px;
layout:fixed;
}
#da{
background-color:red;
position:absolute;
left:50px; top:0px;
}
#db{
background-color:green;
position:absolute;
left:50px; top:100px;
}
#dc{
background-color:blue;
position:absolute;
left:50px; top:200px;
}
#dd{
background-color:gray;
position:absolute;
left:50px; top:300px;
}
#de{
background-color:lime;
position:absolute;
left:50px; top:400px;
}
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
</body>
</html>


    결과)

    a
    b
    c
    d
    e

    absolute :절대 위치로 결정되며  body를 기준으로 top, bottom, left, right 속성자로 위치를 결정 해 주게 됩니다.
    결과를 보면 알수 있듯이 절대 위치인 body를 기준으로 top, bottom, left, right 속성자들로 위치를 결정 해 주게 된다는 걸 알 수 있겠습니다.

    기존의 한 좌표 위에 포개져 있어 가려진 레이어들은 볼 수가 없었습니다만  숨겨진 상태 의 레이어 들에 절대 위치를 기준으로 각각 다른 값을 주어 레이어 들의 펼쳐진 모습을 볼수 있게 되었 습니다.


    이번에는 기본값에 relativeleft:100px; top: 0px;부터 50px씩 증가 한 값을 각 레이어에 줘 보도록 하겠습니다. 

    

<html>
<head>
<meta charset="UTF-8">
<title> relative left:100px top은 0px 부터 50px씩 증가 한 값으로 설정</title>
<style>
body{
margin:0px; padding:0px;
}
#da,#db,#dc,#dd,#de{
width:100px; height:100px; 
border:1px solid red; 
text-align:center; 
margin:0;
padding-top:35px; 
layout:fixed;
}
#da{
background:red;
position:relative;
left:100px; top:0px;
}
#db{
background-color:green;
position:relative; 
left:100px; top:50px;
}
#dc{
background-color:blue;
position:relative;
left:100px; top:100px;
}
#dd{
background-color:gray;
position:relative; 
left:100px; top:150px;
}
#de{
background-color:lime;
position:relative;
left:100px; top:200px;
}
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
</body>
</html>


    결과)
    a
    b
    c
    d
    e


    위의 결과에서 알수 있는 것 처럼 현재 위치에서 각 레이어 들이 상위의 요소의 좌표를 기준으로 적용한 값 만큼 이동 한 것 을 알 수 있습니다.


    도형의 수직 구조를 결정 하는 z-index 속성


    이번에는 수직 층을 이루는 구조 z-index에 대해 알아 보고 값을 각 레이어에 줘 변화를 살펴 보도록 하겠습니다. 
    

<html>
<head>
<meta charset="UTF-8">
<title> relative left100px top100px설정</title>
<style>
body{
margin:0px; padding:0px;
}
#da,#db,#dc,#dd,#de{
width:100px; height:100px; 
border:1px solid red; 
text-align:center; 
padding-top:35px; 
layout:fixed; 
position:relative;
left:100px; top:100px;
}
#da{
background-color:red;
position:absolute;
left:100px;top:100px;
z-index:600;
}
#db{
background-color:green;
position:absolute;
left:120px;top:120px;
z-index:700;
}
}
#dc{
background-color:blue;
position:absolute;
left:150px;top:150px;
z-index:800;
}
}
#dd{
background-color:gray;
position:absolute;
left:180px;top:180px;
z-index:900;
}
}
#de{
background-color:lime;
position:absolute;
left:200px;top:200px;
z-index:1000;
}
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
</body>
</html>

    결과)
    a
    b
    c
    d
    e


    위의 결과에서 z-index의 속성은 레이어를 수직으로 쌓아 올릴때 상하 위치 또는 순서를 결정 하는 속성 입니다.
    결과에서 확인 한벗 처럼 index수치가 높을 수록 상위에 위치 하게 됩니다.     위의 결과에서 알 수 있는 것 처럼 모든 레이어들이 현재의 위치에서  각 상위 레이어의 위치에 대응하여 relative  속성자가 가르키는 상대 좌표 값인 왼쪽에서 100px거리만큼 상위 요소에서 100px 거리 만큼씩 적용한 값으로 이동 한 것을 알수 있습니다.

    이번 에는기본값에 fixed left:75px top:340px의 값을 각 레이어에 줘 보도록 하겠습니다.     

    

<html>
<head>
<meta charset="UTF-8">
<title> fixed left 75px top 340px설정</title>
<style>
body{
margin:0px; padding:0px;
}
#da,#db,#dc,#dd,#de{
width:60px; height:30px; 
border:1px solid red; 
text-align:center; 
padding-top:35px; 
layout:fixed; 
position
:fixed;
left:75px; top:340px;
}
#da{
background-color:red;
}
#db{
background-color:green;
}
#dc{
background-color:blue;
}
#dd{
background-color:gray;
}
#de{
background-color:lime;
}
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
</body>
< /html>

    결과)
    fixed 결과




    위의 결과에서 보는것 처럼 fixed값은 절대 위치인 body를 기준으로 상,하,좌,우 방향의 값을 가지게 되는 것은 absloute와 동일 하지만 스크롤이 움직여도 바디의 탑 위치에서 고정 되어 있다는 것 을 알 수가 있습니다.

    click 버튼 과 메뉴가 왼쪽 상단에 고정 되어 있는 것을 볼수 있습니다.
    스크롤을 상하로 움직이면 바탕만 움직일뿐 버튼은 항상 그자리에 고정 되어 있다는 것을 확인 할수가 있죠 바로 fixed 속성 때문입니다.
    이 메뉴버튼을 클릭하면 스크립트 토글에 의해 슬라이드창이 열리고 링크 메뉴들이 펼쳐 지게 됩니다.

    이번에는 절대 좌표를 갖는 absolute 로 각각의 레이어 마다 다른 값을 주어 위치 변화를 살펴 보도록 하겠습니다
    absolute left:100px의 값을 주고 top 의 값을 레이어 마다 각 각 다르게 줘서 숨겨진 레이어들을 펼쳐 보도록 하겠습니다.
     

    

<html>
<head>
<meta charset="UTF-8">
<title> absolute left 100px top은 0px부터 100px씩 값을 증가 시켜 각각 다르게 설정</title>
<style>
body{
margin:0px; padding:0px;
}
#da,#db,#dc,#dd,#de{
width:100px; height:100px; 
border:1px solid red; 
text-align:center; 
padding-top:35px; 
layout:fixed;
}
#da{
background-color:red;
position:absolute;
left:100px; top:0px;
}
#db{
background-color:green;
position:absolute;
left:100px; top:100px;
}
#dc{
background-color:blue;
position:absolute;
left:100px; top:200px;
}
#dd{
background-color:gray;
position:absolute;
left:100px; top:300px;
}
#de{
background-color:lime;
position:absolute; 
left:100px; top:400px;
}
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
</body>
</html>


    결과)


    a
    b
    c
    d
    e

    absolute :절대 위치로 결정되며  body를 기준으로 top, bottom, left, right 속성자로 위치를 결정 해 주게 됩니다.

    결과를 보면 알수 있듯이 절대 위치인 body를 기준으로 top, bottom, left, right 속성자들로 위치를 결정 해 주게 된다는 걸 알수 있습니다.

    기존의 한 좌표 위에 포개져 있어 가려진 레이어들은 볼수가 없었습니다만  숨겨진 상태 의 레이어 들에 절대 위치를 기준으로 각각 다른 값을 주어 레이어 들의 펼쳐진 모습을 볼수 있게 되었 습니다..

    이번에는 기본값에 relativeleft:100px;top 은 0px 부터 50px 간격으로 값을 더해 각 레이어에 줘 보도록 하겠습니다. 

    

<html>
<head>
<meta charset="UTF-8">
<title> relative left:100px; top;0px;설정</title>
<style>
body{
margin:0px; padding:0px;
}
#da,#db,#dc,#dd,#de{
width:100px; height:100px; 
border:1px solid red; 
text-align:center; 
padding-top:35px; 
layout:fixed;
}
#da{
background-color:red;
position:relative; 
left:100px; top:0px;
}
#db{
background-color:green;
position:relative; 
left:100px; top:50px;
}
#dc{
background-color:blue;
position:relative;
left:100px; top:100px;
}
#dd{background-color:gray;
position:relative; 
left:100px; top:150px;
}
#de{
background-color:lime;
position:relative; 
left:100px; top:200px;
}
</style>
</head>
<body>
<div id="da">a</div>
<div id="db">b</div>
<div id="dc">c</div>
<div id="dd">d</div>
<div id="de">e</div>
</body>
</html>


    결과)

    a
    b
    c
    d
    e

    위의 결과 에서 알 수 있는것처럼 현재 위치에서 각 레이어 들이 적용한 값으로 이동 한 것을 알 수 있습니다.
    오늘은 여기까지 하고 다음시간에는 inline-block과 span의 차이에 대해서 알아보도록 하겠습니다.


    저작자표시 비영리 변경금지
    T,back:     Comment:

    티스토리툴바