분류 전체보기 (64) 썸네일형 리스트형 내용 정리 1. 양식이란 ? 사용자의 입력을 처리하는 버튼, 텍스트, 선택 등을 의미한다. 2. 양식 제출 및 다양한 요청 버튼과 텍스트 입력창을 만들어도 아무런 action이 일어나지 않는다. 그 이유는 사용자의 인풋을 받는 양식이 필요하기 때문인데 인풋을 받으라는 코드는 바로 요소이다. Submit 브라우저가 요청하는 모습 하지만 form 요소를 사용해도 아무런 변화를 찾아볼 수 없다. 이런 이유는 동작 방식에서 찾아볼 수 있다. 위 코드에서 브라우저는 서버에게 action을 요청하고 이때 기본 방식은 GET이다. 서버로부터 action을 받아오는 동작을 실행하는 것이다. 하지만 위에 코드에서는 action을 /로 처리했고 이는 현재 index.html파일의 경로이다. 참고로 action은 브라우저가 서버에게 .. [웹개발 프로젝트] 1. 프론트엔드 디자인 이번 주제는 대전 맛집 추천 웹사이트에 대한 제작 과정이다. 1. 프론트엔드 템플릿 탐색 아래 사이트에 방문하여 마음에 드는 웹사이트 디자인의 템플릿을 다운로드한다. https://www.free-css.com/free-css-templates Foodhut Free Website Template | Free CSS Templates | Free CSS www.free-css.com 선택한 디자인 ( 테마 : 음식 ) 2. 로고 디자인 로고가 마음에 들어서 안에 text만 프로젝트 주제와 맞게 변경하였다. 설명 step 1. ctrl + shift + c 키를 눌러 로고에 마우스를 올리면 html코드가 어디있는지 알 수 있고 개발자도구( F12 )를 통해 텍스트를 변경하면서 적용해본다. step 2. h.. 프로젝트 요약 1강 - 프로젝트 설정 # css 아웃소싱 및 구글 폰트 연동 # css파일 아웃소싱: h1같이 계속 존재해야하는 요소, 기본 틀은 shared.css에 저장해서 link요소로 불러오기 2강 - 로고 추가 # a : void 요소이고 인라인 요소(블럭)임 따라서 다음 줄에 블럭 요소가 오면 수직배치됨. css로 바꾸는거 보다는 이럴 때는 div tag를 이용! [예시] Travel Goals 3강 - 요소의 위치 설정 # css 플랙스박스 : 요소의 위치 설정을 용이하게 하는 속성 # 플랙스 컨테이너 : 플랙스 박스들을 관리하는 부모요소 [예시] #container { display: flex; } 요소들의 부모요소를 잘 파악해서 부모요소에 적용해야한다. 개발자 도구를 들어가면 볼 수 있다. flex-d.. [git & github 기초] 7. 공동 작업 앞서 만든 저장소는 public 저장소의 권한을 "인증토큰"으로 관리한는 방식이었다. 하지만 공동 작업을 수행할 경우 일반적으로 private를 사용한다고 한다. 이번에는 private한 repository에 다른 사용자가 접근하는 방법을 공부해보자 1. 공동작업자 추가 및 권한 저장소 추가 새로운 파일을 생성해서 다음고 같이 작성 후 커밋 그럼 비공개 저장소에 다른 사람이 접근을 어떻게 할까? 바로 공동 작업자로 추가하는 것이다! settings에 들어간다. (프로필 - setting X) Add people를 클릭하면 공동 작업자를 추가할 수 있다. 작업자를 추가하면 작업자는 push 권한을 얻을 수 있다. 2. 원격저장소에서 로컬저장소로 옮기는법 원격저장소 ( 깃허브 ) 에서 코드를 수정한 뒤 또는.. [git & github 기초] 6. gitub 원격 저장소 생성 이전까지 학습한 내용은 로컬 저장소에 브런치를 모아두고 브런치에 커밋을 수행하고 삭제하는 방법등을 학습하였다. 이제 원격저장소를 사용하는 깃허브에 대해 실습해보자. 깃허브를 사용하는 이유는 협업, 포트폴리오, 기여 등등 여러가지이다. 1. 원격 저장소 생성 깃허브 시작 페이지에서 New 버튼을 클릭 2. 로컬 저장소 내용 원격 저장소에 옮기는 방법 step 1. 로컬저장소와 원격저장소를 연결한다. 명령어 : git remote add origin https://github.com/ChanSuy/web-dev-github.git remote는 원격 저장소로 연결하는 명령이고 origin은 url을 뜻한다. 즉, 깃허브 링크 url을 origin 이름으로 지정하여 연결한다. step 2. 로컬저장소에 있는 .. [git & github 기초] 5. 브런치, 커밋 삭제 1. 커밋을 삭제하는 방법 삭제할 브런치 생성 파일생성 ( 상황을 위해 세팅하는 과정 ) staging area에 file1.txt 파일 추가 삭제하는 과정 파악하기 위해 임의로 여러 커밋들을 등록 세번쨰 커밋 파일 2개 추가 세팅 완료! log 확인 앞서 만든 파일들은 모두 커밋했으므로 추적이 가능! # 삭제하는 방법은? 첫번째 방법 : 파일 직접 삭제 직접삭제 => 스테이징 영역으로 이동 => 취소상태로 변경 두번쨰 방법 : 명령어입력 git rm file2.txt 근데 삭제가 되지 않았다! 이유는 현재 위치가 git-basics이므로 찾지 못함! 경로를 잘 알려줘야함 위치 이동후 명령어 실행 차이점이 있다! 첫번째 방식으로 진행할 경우 스테이징 영역에 수정사항을 추가해야한다. (빨간색은 삭제된 상태.. [git & github 기초] 4. 브랜치, 병합, 충돌 1. 브랜치 이름 변경하는 방법 명령어 : git brach ( 현재 브랜치명 확인 ) 명령어 : git brach -m "브랜치명" ( 브랜치명 수정 ) 커밋에 영향 x , 단순히 이름 변경 2. 새로운 브런치 만드는법 명령어 : git checkout -b feature ( featrue라는 새 브런치 생성, 브런치끼리 교환도 가능하다고함 ) head라는게 id랑 같이 존재하는데 head는 특정 브런치의 최근 커밋이다. 3. 새로운 파일 생성 후 커밋까지 근데 이 경우 feature branch 내용이 main에 적용되어 있지 않음. 어떻게 추가할까? 우선 중요한 것은 "내가 현재 가지고 있는 브런치가 추가 커밋을 받아야 한다." 이다. 4. 브런치 병합 step 1. git checkout 명령으로.. [git & github 기초] 3. repository init 과 commit 생성 깃을 사용하여 실습해보자. 1. 저장소와 프로젝트를 초기화 명령어 : git init 2. 현재 깃 프로젝트 정보를 확인 명령어 : git status master branch인 것을 확인할 수 있다. 또한, 커밋이 하나도 없다. ( 저장된 스냅샷이 없다.) 또한 트랙하지 않은 파일에 test.txt가 존재하는데 기본적으로 우리가 스냅샷을 저장하기 위해서는 git에서 해당파일을 추적(tracking)하도록 알려줘야 한다. 3. git에게 test.txt 추적하라고 지시 명령어 : git add test.txt cmd창에는 변화없지만 staging area에 test.txt가 추가되었다. 우리는 이 구역의 추적하는 파일들을 커밋하길 원한다. ( 스냅샷에 추가를 원한다. ) 이 상태가 깃이 파일을 트래킹하는.. 이전 1 2 3 4 ··· 8 다음
