본문 바로가기

분류 전체보기433

웹 사이트 만들기 웹사이트를 만드는 프로그래밍 언어 기본적으로 HTML과 CSS로 만든다. 웹사이트에 들어갈 내용을 담당 웹사이트에 들어갈 스타일을 담당 프로그래밍 언어 : 프로그램을 만들 때 사용하는 언어 소스 코드 : 프로그래밍 언어로 작성한 내용 코딩 : 프로그래밍 언어로 코드를 작성하는 것 필요한 도구(권장) 1. VS Code (Visual Studio Code) 2. Chrome 브라우저 설치 배포하는 도구 1. Netlify 2023. 6. 17.
Git 과 주요 용어 Git : 버전 관리 시스템 - 개발 history를 쌓아가는 것 - 원하는 때로 복기할 수 있다. Github : Git을 서버에 올려두는 곳 repository : 저장소 commit : 저장소에 저장하는 것 checkout : 원하는 때로 돌아가는 것 push : repository를 Github에 올리는 것 pull : push의 반대개념 2023. 6. 16.
background / transform / transition / CSS 변수 background-image: url(''); background-repeat: no-repeat; background-position: center; background-size: cover; ==> background: center/cover no-repeat url(''); 공부 자료 https://developer.mozilla.org/en-US/docs/Web/CSS/background transform 공부 자료 https://developer.mozilla.org/en-US/docs/Web/CSS/transform transition 공부 자료 https://developer.mozilla.org/en-US/docs/Web/CSS/transition 속도 비교 https://cubic-be.. 2023. 6. 16.
position : absolute & relative / sticky & fixed absolute & relative absolute를 사용하면 기존의 자리에서 빠져나온다. 따라서 다른 요소가 있다면, 빠져나온 자리를 차지한다. 빠져나온 요소는 부모요소의 소속이 된다. 부모요소는 position 속성이 static에 아닌 가장 가까운 요소를 기준으로 삼는다. sticky & fixed sticky 기존 자리에 있다가 요소가 브라우저에서 안 보일 때, 정한 속성값대로 고정된다. fixed 원래 문서에서 빠져나와 고정된상태로 존재한다. 공부자료 https://developer.mozilla.org/en-US/docs/Web/CSS/position 2023. 6. 16.
display : block & inline display 속성 중 CSS를 통해 기본적인 속성을 변경할 수 있다. block inline inline-block block 요소에는 기본적인 margin 값이 존재한다. 이를 margin: auto를 적용하면, 컨텐츠가 중앙에 배치된다. inline 요소의 콘텐츠는 text-align: center를 적용하면, 중앙에 배치된다. 공부자료 https://developer.mozilla.org/en-US/docs/Web/CSS/display 2023. 6. 16.