CSS 56
[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..
[css] 눈누 웹폰트 적용하기
안녕하세요. 플입니다. 오늘은 눈누에서 웹폰트를 적용해볼게요. 1. 눈누 https://noonnu.cc/ 상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누 상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누 noonnu.cc 눈누는 상업적 이용이 가능한 한글 폰트 모음 사이트예요. 우선 위의 링크로 들어가 폰트를 골라줍니다. 스크롤을 내려서 원하는 폰트를 찾아도 좋지만 딱 원하는 폰트가 정해져 있다면 검색하는 게 편할 거예요. 검색하기 위해서 상단 메뉴에서 모든 폰트를 선택합니다. 모든 폰트 메뉴로 들어오면 오른쪽 상단에 검색할 수 있는 창이 뜰 거예요. 원하는 폰트를 검색해줍니다. 저는 나눔 시리즈를 원해서 나눔이라고 검색할 거예요. 2. 웹폰트 적용 원하는 폰트를 찾았다면 폰트를..
[css] 배경색 반반 무많이
안녕하세요. 플입니다. 오늘은 배경색을 반씩 나눠서 두 가지 색으로 만들어볼게요. 1. 크기 정하기 이렇게 이미지가 색 경계에 걸쳐있을 때가 있어요. 코딩 안된다고 시안을 막 뜯어고치는 건 너무 슬프잖아요? 심지어 내가 만든 시안이 아닐 때는 더욱더 난감하겠죠. css3가 된 뒤로는 코딩으로도 만들 수 있으니 배경을 나눠봅시다! .visual{ height:1000px; border:1px solid red; } 먼저 배경이 들어갈 영역의 크기를 정해주세요. 저는 한 1000px 정도 줬고요. 테두리는 아래가 흰색이라 잘 보이라고 넣어줬습니다. 테두리는 없어도 괜찮아요. 2. linear-gradients .visual{ background: linear-gradient( #fff5bf 80%, #fff..
[개발자 도구] 설정값 보기
안녕하세요. 플입니다. 개발자 도구에서 설정값을 편하게 확인해볼게요. 1. 개발자 도구 열기 개발자 도구란 이렇게 생긴 창을 말해요. F12를 누르거나 오른쪽 클릭 > 검사를 누르면 열 수 있어요. 2. 설정 확인할 요소 클릭 특정 요소의 설정을 확인할 거니까 왼쪽 상단에 있는 화살표 모양 아이콘을 클릭해주세요. 그리고 원하는 부분에 마우스를 올리면 이렇게 블럭처리가 됩니다. 원하는 부분이 맞다면 클릭해주세요. 클릭하면 개발자 도구에서 어떤 부분인지 표시가 됩니다. 간단하죠? 3. 설정값 확인 설정값을 편하게 확인하려면 옆쪽으로 가서 computed라는 메뉴를 선택해주세요. 이렇게 설정된 css값을 정리된 형태로 확인할 수 있어요. 만약 내가 설정하지 않은 값이 나와있어요!!! 하시는 분들은 기본 값이 ..
[new pen] 온라인 코딩
안녕하세요. 플입니다. 온라인에서 코딩할 수 있는 사이트를 알려드릴게요. 1. new pen 바로 new pen 사이트입니다. 구글에 new pen이라고 검색하면 바로 사이트에 접속할 수 있어요. https://codepen.io/NikitaDX/pen/RKLXgG New Pen ... codepen.io 들어가기 편하게 링크를 남겨둘게요. 2. 시작하기 처음 들어오면 화면이 3단으로 분리되어 html css js 세 가지를 코딩할 수 있어요. 지금은 기본으로 쓰여있는 코드예요. 모두 깔끔하게 지우고 사용하면 됩니다. 온라인으로 코딩해도 어렵지 않죠? 3. 코딩하기 코딩은 그냥 원하는 코딩을 하면 된답니다. 예시로 조금만 적어봤어요. 저장을 안 해도 알아서 반영해줍니다. 똑똑한 친구야. 아래 미리 보기 ..