< 포지셔닝 >
Position :
staitc
: 원래 있어야하는 위치에 있게 된다. (기본값)
<style> body > div { width: 200px; height: 200px; background-color: brown; } body > div > div:nth-child(1) { width: 100px; height: 100px; background-color:darkgoldenrod; position: static; } </style> <body> <div> <div></div> </div> </body>
relative
: position 속성 값이 static이었을떄의 위치를 기준으로 움직인다.
<style> body > div { width: 200px; height: 200px; background-color: brown; } body > div > div:nth-child(1) { width: 100px; height: 100px; background-color:darkgoldenrod; position: static; } body > div > div:nth-child(2) { top: 25px; width: 100px; height: 100px; background-color: darkkhaki; position:relative } </style> <body> <div> <div></div> <div></div> </div> </body>
absolute
: position 속성 값이 static이 아닌 가장 가까운 부모/선조를 기준으로 움직인다. (없다면 문서 자체가 기준이 된다.)
<style> body > div { width: 200px; height: 200px; background-color: brown; } body > div > div:nth-child(1) { width: 100px; height: 100px; background-color:darkgoldenrod; position: static; } body > div > div:nth-child(2) { top: 25px; width: 100px; height: 100px; background-color: darkkhaki; position:absolute; } </style> <body> <div> <div></div> <div></div> </div> </body>
fixed
: 부모/선조 관계 없이 문서를 기준으로 하며 스크롤에 영향을 받지 않고 그 자리에 있음.
- 이떄 absolute 및 fixed는 다른 요소의 요소의 흐름과 배치에 영향을 미치지 않는다.
<style> body > div { width: 200px; height: 200px; background-color: brown; position: relative; } body > div > div:nth-child(1) { width: 100px; height: 100px; background-color:darkgoldenrod; position: relative; } body > div > div:nth-child(2) { right: 25px; width: 100px; height: 100px; background-color: darkkhaki; position:absolute; } body > div > div:nth-child(3) { right: 25px; bottom:25px; width: 100px; height: 100px; background-color:violet; position: fixed; } </style> </head> <body> <div> <div></div> <div></div> <div></div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> </body>
- 스크롤을 하더라도 그 자리를 유지한다.
z-index
: 화면에 표시될 순위. 기본값0. 수치가 클수록 화면에 보이게 된다. 이 값이 같을 때에는 HTML상 보다 뒤에 명시된 요소가 우선 보이게 된다.
top <-> bottom
: 위쪽 벽을 기준으로 얼만큼을 띄워야하는가
: 아래쪽 벽을 기준으로 얼만큼을 띄워야하는가
overflow
- overflow : x y ;
- overflow-x : a ;
- overflow-y : a ;
overflow: auto hidden; 이렇게 사용가능하다.
< overflow 속성 >
- auto : 안넘치면 아무것도 안함, 넘치면 스크롤
- scroll : 안넘쳐도 스크롤바 보임
- hidden : 넘치는 것은 안보이게 함
- visible : 넘쳐도 그냥 보이게 함 (기본 값)
<style> body > div { width: 200px; height: 200px; background-color: brown; overflow: auto hidden; position: relative; } body > div > div:nth-child(1) { width: 100px; height: 100px; background-color:darkgoldenrod; position: relative; } body > div > div:nth-child(2) { top: 40px; left: 200px; width: 100px; height: 100px; background-color: darkkhaki; position:absolute; } </style> </head> <body> <div> <div></div> <div></div> <div></div> </div> </body>
- 부모에게
overflow: auto hidden;속성을 주게 되면 스크롤이 생기면서,
스크롤을 옆으로 넘기게 되면 부모의 크기를 벗어난 곳에 있던 div박스가 보이게 된다. (left : 200px 을 가지고 있는 두번쨰 자식 div 박스)
display
block
: 한 줄 다 차지
inline
: 필요한 만큼만 ( 단, 가로/세로 크기 지정 안먹힘 )
span과 div 의 display 기본값은 각 각 inline 과 block이다.
두개의 속성을 바꿔서 결과를 보자.
<style> span { display: block; } div { display: inline; } </style> </head> <body> <span>A</span><span>B</span> <div>A</div> <div>B</div> </body>
- 바뀐것을 확인 할 수 있다.
div { width: 100px; height: 50px; background-color: red; display: inline; }-> inline 속성을 가진 div에 색을 주고 가로 세로를 지정하였다.
- 색은 먹혔지만 크기는 먹히지 않는 것을 확인할 수 있다.
그러면 inline에서 크기는 따로 지정을 할 수 없는 것인가...
그래도 여기서 가로 세로 높이를 지정해야겠다 해서 만든게 inline-block이다.
inline-block
: 필요한 만큼만 ( 가로 / 세로 크기 Ok )
div { width: 100px; height: 50px; background-color: red; display: inline-block; }
- 지정한 가로 / 세로 크기만큼 늘어난 것을 볼 수 있다.
none
: 없음. ( 공간 차지도 안함 )
<style>
span {
display: none;
}
div {
width: 100px;
height: 50px;
background-color: red;
display: inline-block;
}
</style>
- 위의 span에 none을 적용시켜보았다.
- 사라진것과 동시에 '공간' 도 함께 사라졌다.
공간을 그대로 나둘순 없을까 ?? > 그래서 등장한게 visibility이다.
visibility
span {
visibility:hidden;
}
- span에 대한 공간을 살아있는 것을 확인할 수 있다.
Font
font-family
: 외부에서 가져온 폰트 혹은 serif, sans-sefit, monospace 중 사용 가능. 후술한 세개의 폰트는 브라우저에서 설정된 폰트를 사용하는 것.
- 즉 이 폰트가 실제로 존재하는 것은 아니고 브라우저 설정에 되어있는 폰트를 가져다 쓴다는 의미이다.
font-size
<style> a{ font-family: monospace; font-size: 50px; } </style> <body> <a>아무내용</a> </body>
font-weight
: 폰트의 굵기 설정
normal : 일반 굵기(기본값)
bold : 굵게
bolder : 더 굵게
lighter : 더 얇게
<style> a{ font-family: monospace; font-size: 50px; font-weight: bold; } </style> <body> <a>아무내용</a> </body>
rgb 함수 - rgb(r, g, b)
: 색상 선택. 각 r, g, b 순서대로 0~155 이며 빨간색, 초록색, 파란색의 정도를 지정한다. 0, 0, 0은 검은색, 255, 255, 255는 흰색이다.
border
: 굵기 스타일 색상
- border-top, right, bottom, left 사용가능
solid
<style> .button { border: 1px solid black; padding: 16px 24px; } </style> <body> <div class="button">버튼!</div> </body>
dashed
<style> .button { border: 1px dashed black; padding: 16px 24px; } </style> <body> <div class="button">버튼!</div> </body>
border-bottom
<style> .button { border-bottom : 5px solid red; padding: 16px 24px; } </style> <body> <div class="button">버튼!</div> </body>
< rgb 구할 수 있는 페이지 >
https://htmlcolorcodes.com/
Software Developer : -)