'coding' 카테고리의 글 목록 (26 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

[vs code] 비주얼 스튜디오 코드 html 자동완성 해보자

html 기본 구조를 자동완성으로 불러와보겠습니다. 1. 새 index.html 파일 여기 아무것도 안 쓴 index.html 파일이 있습니다. 이제 본격적으로 코딩을 시작해 볼까 하는데 초보자라면 아직은 어색한 기본 구조가 갑자기 잘 떠오르지 않을 것이고, 경험자라면 사실 매번 같은 코드를 적는 것도 귀찮습니다. 이럴 때 에디터 프로그램의 유용함이 빛을 발휘합니다. html 자동완성을 이용해 봅시다. 2. ! + Tab !(느낌표)를 누르면 아래로 뭔가 잔뜩 뜨는데 신경 쓰지 마시고 Tab키를 눌러줍니다. html5 기본 구조가 자동완성으로 입력되는 것을 볼 수 있습니다. 얼마나 편한지 감동이 다 몰려옵니다. 반응형 작업에 필요한 뷰포트(viewport)도 잊지 않고 챙겨줘서 좋습니다. 3. 수정할 부..

coding/editor · 2020. 11. 21. 07:30

coding 265