코딩 121
css background 단축 속성
css background 단축 속성을 알아봅시다. 1. css background 단축 속성 div{ background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url('/images/background.jpg') } css background 속성 일단 background 속성을 하나씩 적어보았습니다. 더 많은 속성이 있긴 한데 일단 위에 적은 4개의 속성을 적용한다고 가정해봅시다. 물론 이 상태로도 css가 잘 적용됩니다. 그러나 코드가 너무 길어지고 한눈에 들어오지 않습니다. 이 코드를 한 줄로 줄여주는 방법이 css background 단축 속성입니다. - div{ backg..
비주얼 스튜디오 코드 자동 줄 바꿈 단축키
비주얼 스튜디오 코드 자동 줄 바꿈 단축키를 알아보겠습니다. 1. 비주얼 스튜디오 코드 자동 줄 바꿈 필요한 코드 줄 바꿈 안 맞는 코드 코드를 복사해서 사용하다 보면 코드 자체는 문제가 없지만 줄 바꿈이 요상하게 안 맞는 코드가 됩니다. 여기를 하나하나 수정하지 않고 한꺼번에 단축키로 처리해보겠습니다. - *빨간색 부분에 대해서 비주얼 스튜디오 코드에서 들여 쓰기 색을 넣는 확장 기능을 설치하시면 수정이 필요한 부분은 저렇게 빨간색으로 표시됩니다. 아래 버튼으로 확장 기능 설치 방법을 확인할 수 있습니다. 확장 기능 설치 방법 - 2. 비주얼 스튜디오 코드 자동 줄 바꿈 단축키 Ctrl + K 일단 전체 선택을 해줍니다. 전체 선택 단축키는 Ctrl + A입니다. 그다음 Ctrl + K를 눌러주세요. ..
Netlify 무료 배포
Netlify 무료 배포 방법을 알아보겠습니다. 1. Netlify 무료 배포 https://www.netlify.com/ Netlify: Develop & deploy the best web experiences in record time A powerful serverless platform with an intuitive git-based workflow. Automated deployments, shareable previews, and much more. Get started for free! www.netlify.com Netlify 로그인 및 회원가입 Netlify 무료 배포를 위해 먼저 로그인 혹은 회원가입을 해주세요. 깃허브 아이디가 있다면 깃허브로 회원 가입하시는 걸 추천드립니다. - ..
text-indent CSS 들여쓰기 내어쓰기
css로 들여 쓰기와 내어 쓰기를 할 수 있는 text-indent 사용방법을 알아봅시다. 1. text-indent div{ text-indent : 1em; } text-indent text-indent에서 indent는 "들여쓰다"라는 뜻으로 글자 들여 쓰기라는 직관적인 속성입니다. 속성 값으로는 들여 쓰고 싶은 공간만큼 거리를 숫자로 적어주시면 됩니다. 단위는 px, em, % 등이 있습니다. - 2. text-indent 적용 예시 text-indent 적용 예시 text-indent 적용 예시입니다. 제 포트폴리오 사이트 중 일부인데요. 표시된 부분이 속성 값만큼 들여 쓰기 된 모습입니다. 1em을 주면 위의 이미지만큼 들여쓰기 됩니다. 포트폴리오를 직접 확인하고 싶으신 분은 아래 버튼을 눌러..
자바스크립트 class 추가하기
자바스크립트에서 class를 추가해봅시다. 1. 자바스크립트 class 추가 element.classList.add("myStyle"); 클래스 추가 추가하는 내용이니 add가 들어가는군요. - 요소 element. 즉, 요소란 html에서 어디에 class를 넣을 것인가 정해주는 부분입니다. 만약 특정 div 태그에 class를 넣는다면 그 div 태그를 선택하면 됩니다. 선택하는 방법은 아래를 참고해주세요. 자바스크립트로 요소 선택하기 - class 관련 classList는 class 관련 명령어라고 여겨주세요. 세부적으로 너무 파고들 필요는 없습니다. 어렵기도 하고요. 아무튼 class 관련이구나 하고 생각해주세요. - class 추가 가장 중요한 부분이 아닐까 합니다. add를 이용해 class를..
