김숭늉 마음대로

1. 이번 16일차에는 아래의 세가지 사항에 대해서 배워볼거야! - 백그라운드 이미지 - Flexbox와 Grid를 이용하기 - Units(단위)에 대해 알아보기 (픽셀 이외에 :)) 2. 랜딩페이지 만들기 :) 1) 맨 처음엔 - !로 기본 스켈레톤을 끌고오고 - css 파일 연결해주고 - 구글폰트 link 걸기! 2. 구조짜기 [MDN에서 구조를 퍼왓어 :)] 이러한 시맨틱 마크업을 구현하기 위해 HTML은 이러한 섹션을 나타내는 데 사용할 수 있는 전용 태그를 제공합니다. 예시: header: . navigation bar: . main content: , , , 의 다양한 하위 섹션이 있습니다. sidebar: ; 종종 안에 위치합니다. footer: . TIP!!) 텍스트로 header만 쳐도 ..

앞서 URL로 git과 github를 연결한걸로 알았는데, 1. 개인인증 토큰이 필요한이유는 뭘까? 우리가 원격 저장소를 만들었다고는 하지만 URL을 가지고있는사람이 모두 코드를 보낼수있다면 안되잖아? 그래서 git에서 만들어놓은건데~ -> 토큰을 가지고있는 사람이면 모든 저장소에 대한 접근을 허용 / 유출되지 않도록 보안에 유의하기!! *** 토큰인증 관련 아래 참고! https://jootc.com/p/201905122828 [Git] 개인 액세스 토큰을 사용하여 사용자 인증 진행하기 - JooTC git 액세스 토큰 생성 jootc.com 2) 시스템에서 토큰 삭제하려는 경우 (ex, 새로운 토큰을 추가하고 싶을떄) (개인인증토큰 리셋하는 방법) 윈도우 컴퓨터에서 작업하는 경우 읽어보세요. 다음 강..

1. commit 은 브랜치에 저장된다. 2. git을 사용하기위해서는 터미널이 필요하다! ㄴ panel 기능 열어서 터미널 열기! -> 윈도우는 cmd 사용 3. 터미널을 현재 폴더로 인식시키는 방법 -> 레퍼지토리를 초기화해야한다 ㄴ git init 4. 터미널 화면 깨끗하게 만들기 ㄴ clear 5. git으로 관리되는지 확인하는 방법 ㄴ git status 6. git add text.txt 추적하려는 파일을 스테이징 구역에 추가하기 ** 스테이징구역은 파일이 모여있는곳 7. 커밋 추가하기 with 메시지와함께 git commit -m "added text.txt" 8. Git를 처음사용하는 사용자인 경우에는 이름, 이메일을 업데이트 해주기! ㄴ 깃허브 이용시 추적 가능 git config --g..

1. 병합충돌을 막기위해 비쥬얼 스튜디오 코드에서 제공하는 code lense 기능 활성화하기! ㄴ 활성화가 잘 되어있는지 확인하기 :) 2. git 엔트리들을 알아보자! -> git --help -> git status -> git branch -> git branch -m main (현재 내가위치해있는 브랜치의 이름을 main으로 이름변경) 3. 새로운 브랜치 만드는법 -> git checkout -b (단순히 새로운 브랜치를 확인하기를 원할때) -> git checkout -b feature (feature라는 브랜치를 생성하고 feature 브랜치로 이동) 4. 여기서 브랜치를 어떻게 합칠수 있을까? 내가 가지고 있는 브랜치가 반드시 추가 커밋(변경사항이 있어야한다)을 받아야한다. 먼저 main ..

1. 윈도우 명령 프롬프트 알아보기 프롬프를 통해 컴퓨터와 소통해보기! * 파일탐색기 > 내PC > 로컬디스크 (C:) > 사용자 -> 검색에서 "COMMAND" 를 검색하기! [주요 세가지 디렉토리] 홈디렉토리, 사용자디렉토리, 루트디렉토리 ( C:\Users\minhy의 위치를 홈디렉터리) ( C:\Users 사용자 디렉토리) (C:\> 루트디렉토리) 2. cmd 명령어를 알아보자! dir -> 폴더의 전체 내용물을 볼수 있음 cd > "change directory' ㄴ cd .. 한단계 위로 올라감 C:\>D: -> D드라이브로 이동 C:\>cd Users ( tab 누르면 기본값으로 자동 완성이 되 :) C:\Users>cd minhy (이름입력중간에 엔터 누르면 자동완성됨) cd/ -> 루트디..

1. 섹션4의 경우 skip 해도 좋다 다만 첨부되어있는 파일은 한번 확인해봐용 ㄴ 나는 일단 섹션4는 스킵하고 바로 섹션 5로 넘어갈게 (9-10일차) 2. Section 5에서는 로컬컴퓨터는 여기까지하고 구축한 웹페이지를 가지고 오고 호스팅, 배포방법을 배울거야! 그럼 호스팅은 뭐고 배포는 뭘까? 1) 호스팅(Hosting) & 배포(Deployment)란 무엇일까요? 내가 만든 웹사이트를 가지고 와서 웹사이트에 올림(배포)으로써 전세계에 노출을 시킬수가 있는거지 부연설명) 이 코드는 '서버'라고 하는 원격컴퓨터로 옮겨주면 해당사이트를 담당하는 서버는 특정주소를 입력하여 웹사이트에 들어오는 방문자에게 코드를 제공하는거고, 즉 사용자가 모바일, pc, 컴퓨터를 이용하여 주소를 입력하면 브라우저는 원격컴..

1. 블록요소, 인라인 요소의 스타일 차이 - 각 블록요소는 전체 너비 또는 전체 라인을 모두 차지하지만 인라인요소 그렇지 않아. 그래도 표시는 해야하니까 공간이 필요하긴 한거지 :) 영역인 파란색부분은 모든 영역을 포함하고 있지 않은데, 이는 인라인 태그인 태그의 content 까지만 포함하기 때문이야. 인라인요소의 경우 padding의 상단,하단 magin의 상단,하단을 적용할때 반드시 따라야할 규칙이 있어! 1) 인라인요소에 상단,하단 margin을 적용하여도 아무런 영향을 미치지 않아. marding 30px을 적용하였어도, 박스모델에는 30px로 표현되지만 real world에서는 아무런 변화가 없을거야 ㄴ 좌우 margin만 유효해! a { padding: 12px 48px; backgroun..

1. CSS 박스 모델 소개 - padding은 내부 박스에 마진을 줌 - border -> dashed는 점선, solid는 실선 tip** px 설정시 0이면 px단위를 안붙이고 0만써도 된다 2. text-align : center 이더라도 개발자도구로 확인했을때 elements가 중앙에 오지 않을 경우? 즉 요소 자체를 중앙에 배치하고싶을때 어떻게? -> auto 기능으로 자동으로 중앙배열로 맞춰주는 쉬운 tip이 있다! ol { list-style: none; width: 500px; margin: 36px auto 0 auto; } 3.HTML 레이아웃 만들기 (선택사항이긴하지만 이방식으로 매우 추천함 ** 유지관리 측면에서) ㄴ애초에 초반부터 미리 추가해두는게 좋다 ! header - 주요제..

1. Live server 확장 사용하기 -> 변경하는 즉시 페이지가 다시 로드되고, 컨텐츠가 변경된다 ㄴ extention메뉴에서 live server 다운로드 하기 ! 라이브로드 기능을 사용하는 로컬개발서버를 이용하게 되는데, 로컬개발서버는 웹서버 같은 서버는 아님. 갑자기 세상에 공개되는건아니고 여전히 나의 환경에서 개발로 파일을 실행하지만 대신 이미 웹서버에 로드된것처럼 시뮬레이션 함 반영하게 되면 소위 포트라고하는 ip주소가 나오고 파일 경로가 나오게됨 . 2. 개발서버 & 웹사이트 주소 (56번 강의) 이전 강의에서는 VS Code를 위한 "Live Server" 확장을 통해 로컬 개발 웹 서버를 시작했습니다. "개발 웹 서버"란 무엇일까요? "로컬 개발 웹 서버"입니다. 왜냐하면 우리 컴퓨터..

1. 외부이미지를 html에 넣기 넣고자 하는 이미지 파일을 끌고 와서 붙임 - img 는 바디영역에 붙임 - img는 빈 태그! 'atl'는 폴백텍스트, 스크린 리더들이 읽을수 있고 이미지 로딩에 실패하였을때 atl 는 추가해야하는 필수 중요한 요소임!!! 2. 이미지 가운데로 오게하기 body { text-align: center; } -> 이미지를 텍스트로 간주함 * 3. 정렬, 배경색상, 마진 일괄설정 body { text-align: center; background-color: rgb(233, 215, 207); margin: 50px; } 4. 2주차 내용 html 추가 필요시 새로운 html에서 느낌표를 치고 엔터를 누르면 기본 골격을 다 가지고옴 -> 그런다음 타이틀 부분부터 수정하자 5..