🤓 슬기로운 개발생활 🤓 슬기로운 개발생활

1. setup 깃 설치하기 git : all the commands git --version .gitconfig : 모든 git에 관한 설정 ! git config --list config 파일 열기 git config --global -e config 파일을 에디터와 연결하기 git config --global core.editor "code" code 명령어를 입력하면 gitconfig 파일이 에디터에서 열림 code . 기본 정보 설정하기 git config --global user.name "sinyoung" //name 설정 git config --global user.email "sinyoung@naver.com" //email 설정 git config userr.name //sinyoung..

Step 4 : grid 자식에게 줄 수 있는 속성들 ( grid cell ) Grid Line -grid-column-start , grid-column-end column을 기준으로 몇 번째 줄부터 몇 번째 줄까지 차지할 지 정의 .item2{ grid-column-start : 2; grid-column-end : 4; } -grid-row-start , grid-row-end row를 기준으로 몇 번째 줄부터 몇 번째 줄까지 차지할 지 정의 .item2{ grid-column-start : 2; grid-column-end : 4; grid-row-start : 1; grid-row-end : 3; } 단축형 .item2{ grid-column : 2 / 4; grid-row : 1 / 3; } ..

Step 1 : Grid vs Flexbox CSS Layout 을 배치할 수 있는 도구로는 Flexbox와 grid 두 가지가 있다. Flexbox의 경우 가로를 기준으로, 세로를 기준으로 1차원적으로 CSS 레이아웃을 배치할 수 있다. 가로로 묶거나 세로로 묶거나 Grid의 경우 가로축과 세로축을 기준으로 2차원적으로 CSS 레이아웃을 배치할 수 있다. Step 2 : Grid Grid는 container(부모)에 주는 속성과 grid cell(자식)에 주는 속성으로 나뉜다. container 에 꾸며줄 수 있는 속성들 - display - grid-template-columns - grid-template-rows - grid-template-areas - grid-gap grid cell에 꾸며줄..

1. DOCTYPE html> 의 의미 html 문서를 작성할 때 가장 첫 줄에 적는 은 웹 브라우저에게 어떤 버전의 HTML 을 사용했는지 알려주는 문구이다. 예시 HTML5 문서 strict HTML 4.01 문서 transitional HTML 4.01 문서 frameset HTML 4.01 문서 What is the DOCTYPE Declaration in HTML? The HTML document type declaration, also known as DOCTYPE, is the first line of code required in every HTML or XHTML document. The DOCTYPE declaration is an instruction to the web browser..

Step 4: Flexbox 자식에게 줄 수 있는 속성들 (item) HTML 문서 작성 1 2 3 CSS 작성 .container { padding-top : 100px; background : beige; height: 100vh; display : flex; } .item { width: 40px; height: 40px; border : 1px solid black; } .item1 { background-color: rgb(247, 114, 114); } .item2 { background-color: rgb(250, 134, 153); } .item3 { background-color: rgb(165, 100, 250); } - order default 값 : 0; 순서 임의로 지정하기 .co..

1. semantic html tag 작성 ⏱️STOPWATCH 00:00:00 시작 2. CSS 작성 *{ margin : 0; padding : 0; box-sizing: border-box; } main{ position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%); width : 551px; border : 1px solid #ccc; border-radius : 10px; } main h1{ font-size : 15px; color :#4285f4; font-weight : lighter; border-bottom : 1px solid #4285f4; padding : 10px; } main section.stopw..

요약 - nav 안에 버튼 태그를 생성한다. - 버튼 태그 안에 span 태그를 넣어 css로 라인을 생성해준다. - 버튼을 클릭하면 gnb 태그에 open 클래스가 있다면 ? open을 삭제해준다 : open을 붙여준다 1. semantic html tag 작성 News Contact About 2. JS 작성 const hamburgerToggle = document.querySelector(".hamburger-btn"); const nav = document.querySelector("nav"); hamburgetToggle.addEventListener("click", () => { nav.classList.toggle("open"); this.classList.toggle("toggled");..

시멘틱 태그란 ? non-semantic elements : , 와 같이 태그 속 컨텐츠에 대해 아무런 정보를 갖고 있지 않음. semantic elements : , , ...등 컨텐츠에 대한 정보를 갖고 있음 중요성 html에서 시멘틱 태그가 중요한 이유 - 검색엔진의 최적화(SEO: Search Engine Optimizzation) - 정보의 정확한 전달 - 웹 접근성 - 요지보수 용이 일단 html의 역할은 웹 문서를 만들고 정보를 전달하는 것이다. 이 때 태그를 사용하게 되는데, 각 정보에 맞는 태그를 사용하면 웹 문서에서 원하는 정보를 찾기 쉽게 만들어준다. 또한 검색엔진은 태그를 바탕으로 사용자가 원하는 웹페이지를 찾아 보여준다. HTML HTML 사용자가 HTML 관련 글을 검색했을 때 ..