Border
- 여러 종류 있지만 보통 한 종류만 사용(solid)
div {
border: 2px solid black;
}- inline에도 적용이 가능하다
모든 tag에 적용시키기 위해서는 * 사용
* {
border: 3px rebeccapurple;
}inline은 height width가 없음.
사방에 padding을 가질 수 있지만 margin은 좌우에만 가질 수 있다.
Class
같은 tag중에 특정한 것은 다른 속성을 적용하고 싶다면 어떻게 해야할까?
id는 identical 해야하기 때문에 비효율적.
이 때 사용되는 것이 class
- class는 identical 할 필요가 없다.
.tomato {
background-color: tomato;
}- 여러 class를 한 요소에 다중적용할 수 있다.
<span class="tomato brick posco">hello</span>- 되도록이면 코드 줄을 줄일 수 있게, 한 속성을 하나의 클래스로 적용하는 것이 좋다. 즉 구분을 하는 것이 필요하다.
.btn {
padding: 5px 10px;
border-radius: 5px;
}
.teal {
background-color: teal;
}
.tomato {
background-color: tomato;
}inline-block
block에 display로 지정해줌.
오래되서 여러 문제가 있다.
- default 값으로 이상하게 적용된 것들이 많음
- 반응형 불가(크기 변경에 따라 비율 줄어드는 것)
flexbox
inline block 사용하는 것 대신!
박스를 어떤 곳이든 둘 수 있게 해주며 유연하다.
Rule
- 자식 엘리먼트가 아닌 부모 엘리먼트에만 명시한다.(부모를 flex로 만들어야 한다.)
<body>
<div></div>
<div></div>
<div></div>
</body> body {
background-color: fuchsia;
margin: 20px;
display: flex;
}위와 같은 경우 div를 움직이기 위해서는 그의 부모인 body를 조작해야 한다.
부모 엘리먼트가 자식 엘리먼트를 control한다고 생각하면 된다.- main axis / cross axis
main axis는 수평선, cross axis는 수직선이다.
justify-content는 main axis 위에서, align-items는 cross axis 위에서 움직인다.(default, 바뀔 수 있음)
body {
background-color: fuchsia;
padding: 50px;
height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
}vh는 view height로 스크린 크기이다.- flex-direction
해당 요소를 column으로 하면 main axis가 수직, cross axis가 수평이 된다.
body {
background-color: fuchsia;
padding: 50px;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}- flex-child 관계는 중첩할 수 있다.
- flex-wrap를 통해 화면크기 조정에 따른 줄바꿈, 크기 바꿈등을 조정할 수 있다.
body {
height: 100vh;
display: flex;
flex-wrap: nowrap;
}nowrap은 default로 화면 크기를 줄이면 비율에 따라 요소의 크기도 줄어든다. body {
height: 100vh;
display: flex;
flex-wrap: wrap;
}wrap으로 지정하면 화면 크기를 줄이더라도 크기를 유지하다가 아랫줄로 넘어간다.position property
position은 해당 요소의 화면상에서 위치를 의미한다.
.dif {
position: fixed;
}위와 같이 fixed의 경우 스크롤하더라도 고정되어 있는다.- static
디폴트 값 - relative
element를 시작한 위치에서 수정을 할 수 있음. 즉 기준점이 element 위치이다.
.dif {
position: relative;
top: -10px;
left: -5px;
}위의 경우 원래 요소가 있었던 위치에서 부터 움직인다.- absolute
absolute는 가장 가까운 relative 부모를 기준으로 움직인다.
따라서 relative 지정이 중요하다.
<body>
<div>
<div class="dif"></div>
</div>
</body> div {
position: relative;
background-color: aquamarine;
width: 50px;
height: 50px;
}
.dif {
position: absolute;
top: -10px;
left: -5px;
}위의 경우 dif의 가장 가까운 relative parent는 바로 위의 div이기 때문에 해당 div를 기준으로 위치를 조정한다.top, left, right, bottom
이 네가지 property는 요소를 다른 레이어로 지정하게 하여 다른 레이어를 무시하게 한다.
.dif {
top: 5px
position: fixed;
}이 경우 위에 div가 있더라도 dif class에 있는 요소는 위의 div를 무시하고 위에서 부터 5px인 곳에 놓인다.
갈팡질팡 공부하는 중입니다