2021. 7. 5. 17:21ㆍHTML_CSS
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
'HTML_CSS' 카테고리의 다른 글
| 메뉴 옆에 내용 배치하기, overflow, position,gif, 유튜브 영상 삽입하기 (0) | 2021.07.21 |
|---|---|
| CSS _ 왼쪽 세로 메뉴 만들기 ,o1 숫자 없애기, a 스타일 적용 (0) | 2021.07.20 |
| CSS 선형 그라데이션(linear-gradient), background 색상만 불투명하게 만들기 (after, rgba) (0) | 2021.07.07 |
| CSS border(테두리)가운데 정렬 , 문단 공백 없애기 ,글자수 제한하기, 이미지 옆에 글 배치하기 (flex) (0) | 2021.07.07 |
| CSS_img 중앙(center)정렬 하기 공부 (block, flex,text-align) (0) | 2021.06.25 |