CSS 테두리(border) 와 문단 사이 간격 없애는 공부

border는 따로 color와 width style을 설정할 수 있지만 한 줄로도 설정이 가능합니다. 

border: width style color로 설정합니다.

그리고 제일 거슬리는 것은 바로 문단 사이의 공백입니다. 

역시나 구글에 계속 검색해서 알게 되었습니다.

line-height는 텍스트 테두리의 크기를 설정하고 margin-top과 bottom을 0으로 만들어 줍니다. top만 0으로 만들어 줘도 될 것 같은데 bottom 0이 없으면 원하는 결과를 얻지 못했습니다.

그리고 bottom이 겹쳐서 가운데 선만 굵게 보입니다.

 문단 사이 공백 참조 사이트

https://www.thesitewizard.com/css/change-space-between-paragraphs.shtml

border-style: solid solid none;으로 bottom 테두리를 없앴습니다. 

그리고 border-radius를 4면을 다 설정하는 식으로 해서 오른쪽 위에만 둥글게 만들어봤는데 예상되는 값이 나오진 않았네요. 좀 더 

이러한 느낌이 나오길 기대했는데.. ㅋㅋㅋ

최종적으로 여기저기 건드리면서 border를 알아보았네요. border는 div에서 text-align으로 center 해도 text만 center가 되었기에 다른 방법으로 center로 옮겨야 할것 같네요.

위의 라푼젤에 관한 설명은 나무 위키 참조 

 

 

border의 style 참조 사이트 

https://developer.mozilla.org/en-US/docs/Web/CSS/border-style