'coding' 카테고리의 글 목록 (36 Page)

[css] 배경 이미지 고정하기

안녕하세요. 플입니다. 오늘은 배경 이미지를 고정해볼게요. 1. 배경 이미지 고정 배경 이미지가 고정된다는 말이 무슨 말이냐면 아마 위의 이미지처럼 스크롤을 내릴 때 이미지가 같이 내려오는 것이 아니라 그 자리에 고정된 채로 움직이지 않는 모습을 본 적이 있으실 거예요. 그런 효과를 주는 css를 넣어줄 것입니다. 글로는 조금 이해하기 어려우시다면 아래 링크에서 확인해주세요. 포스팅하고 있는 지금은 아직 완성된 페이지가 아니긴 하지만 예시로 올려둘게요. https://ssimplay.github.io/paintdrop/ paint drop 우당탕탕 좌충우돌 물감친구들의 신나는 일상이야기. 톡 떨어진 물감에서 태어난 물감찍이는 궁금한게 너무나 많다. 세상에는 모르는 것과 신기한 것들 투성이. 여기저기 안가..

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

[css] linear-gradient 반반무많이 2탄

안녕하세요. 플입니다. liner-gradient를 사용할 때 주의할 점이 있어서 2탄으로 돌아왔습니다. 1. liner-gradient https://ssimplay.tistory.com/239 [css] 배경색 반반 무많이 안녕하세요. 플입니다. 오늘은 배경색을 반씩 나눠서 두 가지 색으로 만들어볼게요. 1. 크기 정하기 이렇게 이미지가 색 경계에 걸쳐있을 때가 있어요. 코딩 안된다고 시안을 막 뜯어고치는 건 너무 슬프잖아요?.. ssimplay.tistory.com 배경색 반나누는 1탄은 링크로 남겨둘게요. 2. 그라데이션이 되는 이유 아 퍼센트를 조정하면 두가지색으로 나눌 수 있겠군! 하고 신나서 만들었는데 그라데이션이 된 경우가 있으신가요? div{ background:linear-gradien..

coding/html + css · 2020. 4. 20. 07:30

[css] 눈누 웹폰트 적용하기

안녕하세요. 플입니다. 오늘은 눈누에서 웹폰트를 적용해볼게요. 1. 눈누 https://noonnu.cc/ 상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누 상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누 noonnu.cc 눈누는 상업적 이용이 가능한 한글 폰트 모음 사이트예요. 우선 위의 링크로 들어가 폰트를 골라줍니다. 스크롤을 내려서 원하는 폰트를 찾아도 좋지만 딱 원하는 폰트가 정해져 있다면 검색하는 게 편할 거예요. 검색하기 위해서 상단 메뉴에서 모든 폰트를 선택합니다. 모든 폰트 메뉴로 들어오면 오른쪽 상단에 검색할 수 있는 창이 뜰 거예요. 원하는 폰트를 검색해줍니다. 저는 나눔 시리즈를 원해서 나눔이라고 검색할 거예요. 2. 웹폰트 적용 원하는 폰트를 찾았다면 폰트를..

coding/html + css · 2020. 4. 16. 07:30

[brackets] 브라켓에서 화면 나누기

안녕하세요. 플입니다. 오늘은 브라킷에서 화면을 나눠서 사용해볼게요. 1. 화면 분할하기 화면 분할은 어디서 하냐구요? 여기서 한답니다. 보이세요? 바로 요기! 콕! 눌러보면 세 가지 메뉴가 뜨는데요. 원하는 분할을 선택해주면 됩니다. 간편하죠? 2. 분할 화면 사용 저는 '왼쪽/오른쪽으로 분할'을 사용해볼게요. 어떤 게 더 좋은 건 없고 본인이 원하는 화면으로 사용하면 됩니다. 그러면 왼쪽에서 이렇게 분할 화면을 관리할 수 있게 나와요. 오른쪽에도 파일을 하나 열어볼까요? 파일을 더블클릭해서 열어주거나 왼쪽에 있는 파일을 드래그해도 오른쪽에서 열 수 있어요. 오른쪽에 파일이 열린 것 보이시죠? 이렇게 하면 왔다 갔다 하기도 편하고 두 개를 한 번에 볼 수 있어서 시간도 단축되고 좋아요. 저는 보통 ht..

coding/개발 팁 · 2020. 4. 15. 07:30

[css] 배경색 반반 무많이

안녕하세요. 플입니다. 오늘은 배경색을 반씩 나눠서 두 가지 색으로 만들어볼게요. 1. 크기 정하기 이렇게 이미지가 색 경계에 걸쳐있을 때가 있어요. 코딩 안된다고 시안을 막 뜯어고치는 건 너무 슬프잖아요? 심지어 내가 만든 시안이 아닐 때는 더욱더 난감하겠죠. css3가 된 뒤로는 코딩으로도 만들 수 있으니 배경을 나눠봅시다! .visual{ height:1000px; border:1px solid red; } 먼저 배경이 들어갈 영역의 크기를 정해주세요. 저는 한 1000px 정도 줬고요. 테두리는 아래가 흰색이라 잘 보이라고 넣어줬습니다. 테두리는 없어도 괜찮아요. 2. linear-gradients .visual{ background: linear-gradient( #fff5bf 80%, #fff..

coding/html + css · 2020. 4. 14. 07:30

coding 265