CSS _ border 속성에서 내가 실수한 것들

1.

테두리를 만들고 싶을 때 쓰는 속성인 border!!

width, style, color를 모두 한 번에 적을 수 있는데 중요한 건

쉼표를 넣으면 안 된다는 것이다...

이걸 발견한다고 얼마나 많은 시간을 썼던지..

<style>
  div{
     border: solid, 5px, red
     }
</style>

이렇게 하면 적용이 안 된다....

<style>
  div{
     border: solid 5px red
     }
</style>

그리고 style에 대한 정보는 꼭 넣어줘야 실행된다.

두께나 색에 대한 정보는 없어도 작동하는데 solid가 없으니까 작동하지 않았다...

(이건 심심해서 이렇게 저렇게 해보다가 발견...!)

 

2.

위, 아래, 왼쪽, 오른쪽 테두리를 설정할 때

border-top이렇게 작성해야 한다

border - top이렇게 작성하면 안 된다...!

띄워쓰기 하지 말 것!

 

3.

heading에 테두리를 설정하고, 그 옆에 버튼을 두고 싶은데

어떻게 해야할지 고민을 하다가

display inline으로 할 것인지, 그냥 width만 지정할 것인지 고민이 되었다.

(왜냐면 보여지기에는 제목 크기에 맞게 테두리가 설정되니까...어떻게 해야하는 건지 헷갈렸다)

 

그래서block level element에 테두리를 설정할 때width를 지정하는 것과 display : inline으로 설정하는 것의 차이가 무엇일지 시도를 해보았다

 

시도를 해본 결과,inline으로 바꾸면 

제목

버튼

 

줄 바꿈이 안 돼서 이런 식으로 나타나고

 

width를 지정하면

제목

버튼

자동으로 줄 바꿈이 돼서 이렇게 설정된다.

 

생각보니 당연한 것이었다! width를 지정해도 block level이니 당연히 줄바꿈이 된다...!!!

 

 

열심히 공부해서 이런 게 당연해지는 시기가 오면 좋겠다...파이팅