[css] border로 간단하게 제목을 꾸며보자

안녕하세요. 개자이너 씸플레이입니다. 이미지처럼 제목에 꾸밈을 넣어보겠습니다. 이미지를 넣어서 꾸미기 귀찮을 때 사용하고는 합니다. 1. html 이것은 제목 이것은 내용 아무 내용 아무말 와랄랄라 이것은 내용 아무 내용 아무말 와랄랄라 이것은 내용 아무 내용 아무말 와랄랄라 이것은 내용 아무 내용 아무말 와랄랄라 이것은 내용 아무 내용 아무말 와랄랄라 ① html 입력하기 예시니까 적당히 아무 내용이나 넣어주었습니다. 제목은 꼭 태그를 사용해주세요. 2. border-left h3{ border-left:4px solid darkred; } ① 태그에 border-left를 이용해 꾸밈을 넣어준다. left에만 선을 넣어서 테두리가 아니라 제목에 넣는 이미지처럼 보이게 해 줍니다. 4px 정도면 적당하..

coding/html + css · 2020. 12. 28. 09:30

[css] 테이블 테두리 한 줄로 만들어 보자

안녕하세요. 개자이너 씸플레이입니다. 테이블에 보더를 넣으면 한 줄이 아니라 두 줄로 보일 겁니다. 위의 이미지처럼 안쪽과 바깥쪽 테두리가 따로 생기는 경우입니다. 여기서 선을 한 줄로 만들어보겠습니다. 1. 테이블에 테두리 넣기 See the Pen LYZwROL by ssimplay (@ssimplay) on CodePen. table{ border:1px solid black; } th, td{ border:1px solid black; } 일단은 두 줄이 생겨도 테두리를 넣어주도록 하겠습니다. 테이블 전체와 th, td 모두 넣어줍니다. 2. border-collapse : collapse See the Pen wvWVzOb by ssimplay (@ssimplay) on CodePen. 테이블에..

coding/html + css · 2020. 11. 24. 07:30

[css] border-style 종류

안녕하세요. 플입니다. 오늘은 border-style 종류를 알아보겠습니다. border 보더는 테두리를 말합니다. css에서 border 값을 설정하면 테두리 디자인을 할 수 있습니다. 오늘은 그중 style에만 중점을 두고 살펴보겠습니다. 1. dotted 도티드는 점선이라고 생각하시면 됩니다. 테두리가 점선으로 처리됩니다. p{ border-style: dotted; } 2. dashed 대쉬드는 짧은 선이 연속으로 나옵니다. 점선과 비슷하지만 점보다는 조금 긴 모양이죠. p{ border-style: dashed; } 3. solid 솔리드는 가장 많이 사용하는 형태로 선 타입입니다. p{ border-style: solid; } 3. double 더블은 두줄이 나옵니다. 주의할 점은 두줄이기 때..

coding/html + css · 2019. 8. 7. 07:30