'coding/html + css' 카테고리의 글 목록 (10 Page)

[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] 그림자를 넣어보자 box-shadow

안녕하세요. 개자이너 씸플레이입니다. box-shadow를 이용해 그림자를 살짝 넣어보겠습니다. 1. 그림자를 넣을 컨텐츠 준비 개인 프로젝트로 진행 중인 사이트입니다. 여기에 그림자를 살짝 넣어보겠습니다. 2. box-shadow li{ box-shadow: 5px 5px 5px rgba(0,0,0,0.55); } box-shadow를 이용해서 그림자를 넣어주시면 됩니다. 값은 순서대로 x-position y-position blur color 입니다. 여기서 x-position이란 x좌표. 즉, 가로 위치를 말합니다. 수학 시간에 좌표를 찍어보신 기억 다들 있으시죠? x는 가로 y는 세로 위치를 의미하고, px단위로 위치를 조정할 수 있습니다. 기준은 그림자를 넣는 컨텐츠가 기준입니다. color에 ..

coding/html + css · 2020. 11. 29. 08: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] 도형을 회전시키는 애니메이션을 만들어보자

css 만으로도 약간의 애니메이션 기능을 넣을 수 있답니다. 신기하죠? 그럼 바로 시작해볼까요? 1. transform div:hover{ transform: rotate(45deg); } transform 기능을 이용해 도형을 회전시켜보겠습니다. 사실 css의 속성 이름은 굉장히 직관적입니다. 영어라서 괜히 어려워 보이는 것뿐이랍니다. 한글로 써본다면 조금 더 이해하기 쉬울 겁니다. div:hover{ 변형 : 회전 (45도) } 영어가 동사라 정확한 번역은 아니지만 중요한 부분이 아니니 넘어가겠습니다. 의미는 같으니까 말입니다. 어떠신가요? 한글로 보니까 조금 더 이해하기 쉽지 않나요? 변형하는데 45도로 회전하겠다는 의미라는 게 잘 보이죠. 2. 실제 적용 See the Pen WNxWMyz by ..

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

[html] <!DOCTYPE html> 대충 이해해보기

안녕하세요. 플입니다. 대충 이해해보기 시리즈 2탄입니다. (시리즈 해볼까 봐요) https://ssimplay.tistory.com/370 [html] html을 대충 이해해보자 안녕하세요. 플입니다. 오늘은 html에 대해서 이해해보도록 해요 1. html html은 "Hyper Text Mark-up Language"의 약자입니다. 하지만 이렇게 말하면 너무 어렵고 무슨 소리인지 모르겠죠. html은 웹페이지�� ssimplay.tistory.com 1탄 링크도 첨부해두겠습니다. 1. 선언하기 html 문서를 보시면 가장 위에 이라는 문구를 보신 적 있으실 거예요. 뭐야 그런 거 모르겠어하시는 분들을 위해서 익숙하실 티스토리 편집 모드 화면을 캡처해봤습니다. 가장 위에 보이시나요? 원래는 대문자로 ..

coding/html + css · 2020. 10. 3. 07:30

coding/html + css 101