분류 전체보기
-
프론트엔드 로드맵공부한다 2021. 8. 1. 15:31
https://github.com/kamranahmedse/developer-roadmap GitHub - kamranahmedse/developer-roadmap: Roadmap to becoming a web developer in 2021 Roadmap to becoming a web developer in 2021. Contribute to kamranahmedse/developer-roadmap development by creating an account on GitHub. github.com 현재 나에게 있어서 부족한 부분을 파악하고 앞으로 무엇을 집중해서 공부해야 할 지 파악해보자!
-
html heading outline - part2공부한다/HTML 2021. 5. 8. 16:28
part1에서 헤딩 태그에 대해서 알아보았다. 오늘은 1.영역별 타이틀 지정, 2.조금 더 의미있는 영역 구분과 타이틀 지정에 대해 알아보려고 한다. 1. 그럼 영역별 타이틀은 어떻게 지정하지? 방법은 아주 간단하다. 영역을 감싸는 최상위 태그 안에서 헤딩태그를 써주면 된다. 아래 이미지를 보면 h1태그로 첫번째 div 영역의 타이틀을 지정해주고, 두번째 div 영역에 h2태그로 타이틀을 지정해주었다. 문서의 아웃라인은 이렇게! 위의 예시는 헤딩 태그의 순서에 따라 지정이 되는건지 아니면 태그의 포함관계에 의한 타이틀 지정인지가 살짝 헷갈릴 수 있겠다. 그래서 딱히 그럴 일은 없겠지만 같은 h1태그로 각 영역의 타이틀을 지정해서 아웃라인을 확인하는 테스트를 해보았다. div를 사용하였을때에는 헤딩태그의 ..
-
html heading outline - part1공부한다/HTML 2021. 4. 25. 22:48
html 문서의 heading outline은 웹접근성과 웹표준과 관계가 있다. heading outline을 따라가면 사이트의 구조가 어떻게 짜였는지 확인할 수 있다. 책으로 치면 문서 목차와 같은 역할을 하기도 하고, 제목과 부제목 등을 관련있는 컨텐츠끼리 묶는 역할을 한다고 보면 된다. 새로운 섹션을 지정할때 div로 구조를 나눌 수도 있지만, html 문서 제목 요소만 있으면 새로운 섹션이 시작됨을 자동으로 암시한다. 크롬 확장프로그램에서 html5 outliner을 추가하여 사용하면 웹사이트의 문서적 흐름과 구조에 대하여 편하게 확인할 수 있다. h1에서 h6까지 사용하여 문서의 제목을 지정해보았다. html5 outliner를 사용하여 문서 흐름을 확인해보면 아래와 같이 문서의 흐름을 보여준다..
-
<select> placeholder 만들기공부한다/CSS 2021. 4. 19. 21:49
required(boolean attribute) 데이터 전송 전 반드시 작성해야 하는 폼 요소를 가리킨다. 아래의 타입에서 작동한다. text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file 작성하지 않고 넘어갈 경우, 안내창이 뜨고 데이터가 전송되지 않는다. www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_required disabled(boolean attribute) form 요소를 비활성한다. 비활성된 요소는 클릭하거나 사용할 수 없다. 비활성된 요소는 js를 사용해 disable value를 지워서 사용할 수 있다. option태그에 사용시..
-
git rebase로 커밋 변경하기공부한다/git 2021. 4. 15. 23:43
오늘은 commit을 변경하는 방법을 알아보도록 하겠다! 저번에도 했으니 이번이 두번째 글이 되겠다. git rebase git rebase -i HEAD~3 push전에 commit을 이쁘게 정리할 때, commit을 여러 개 수정할 떄 사용한다. (여기서 3은 수정할 커밋 갯수를 의미한다. 다른 숫자를 써도 된다.) 이 명령은 Rebase 하는 것이기 때문에 메시지의 수정 여부에 관계없이 HEAD~3..HEAD 범위에 있는 모든 커밋을 수정한다. 이미 중앙서버에 Push 한 커밋은 절대 고치지 말아야 한다. Push 한 커밋을 Rebase 하면 결국 같은 내용을 두 번 Push 하는 것이기 때문에 다른 개발자들이 혼란스러워 할 것이다. 실행하면 Git은 수정하려는 커밋 목록이 첨부된 스크립트를 텍스트..
-
@import와 @use, @forward공부한다/sass 2021. 4. 9. 22:27
@import와 @use @import와 @use는 여러 페이지에서 공통으로 사용할 mixin, function, variable 등을 다른 scss 파일에서 끌어올 때 사용한다. @import는 앞에서 말한 모든 것들을 전역으로 가져오기 때문에, css 파일이 꼬였을 경우에 어디서 잘못되었는지 알기 어렵다. @use는 이 단점을 개선하고자 나온 문법이다. @import와 @use는 어떻게 다른가? @import와 마찬가지로 @use는 스타일시트 내에서 좀더 세분화하여 세분화하여 끌어올 수 있다. _mixin.scss 파일을 @import와 @use를 사용하여 불러온다고 가정해보자. (vscode의 live sass compiler를 사용하여 컴파일 하였는데, 업데이트 되지 않아 @use의 결과는 확인할..
-
push하지 않은 commit 수정하기공부한다/git 2021. 4. 4. 21:31
나는야 깃을 머리로만 알던(사실 머리로도 몰랐던거 같기도..) 깃린이.... 깃린이는 실수를 저지르고 해결할 방안을 몰라 이리저리 검색만하다 결국 사수님께 도움을 요청하고 죄송함에 마음속으로 진땀을 흘려따.... 실수 에피소드를 하나하나 기록하고 해결방안을 알아보는 시간을 가져보도록 하겠다.. 오늘의 주제는 commit 메세지를 잘못 올리거나, 커밋할 파일을 잘못 첨부했을 경우 어떻게 해야하는가?(아직 push를 하지 않았을 때)이다.모든 되돌리기 방법은 복구가 되지 않으니 주의해서 사용하자! 커밋 되돌리기 너무 일찍 커밋했거나 어떤 파일을 빼먹었을 때 그리고 커밋 메시지를 잘못 적었을 때 한다. 다시 커밋하고 싶으면 파일 수정 작업을 하고 Staging Area에 추가한 다음 --amend 옵션을 사용..
-
git branch공부한다/git 2021. 4. 4. 20:22
퍼블하면서 이제야 협업을 시작한 사람.. 그게 나야 빠둠빠두비두밥.. 브랜치가 너무 생소해서 고생중... 그래서 개념 정리가 필요해 공부하면서 정리를 해본다! 두잇! branch는 무엇인가? 🧐 개발을 하다 보면 코드를 여러 개로 복사해야 하는 일이 자주 생긴다. 코드를 통째로 복사하고 원래 코드와는 상관없이 독립적으로 개발을 진행할 수 있는데, 이렇게 독립적으로 개발하는 것이 브랜치다. 이전 게시물에서 저장소 생성방법을 두가지로 나열했었는데, 오늘은 이미 만들어진 원격저장소를 clone하여 branch를 생성하는 방법에 대해 기록해보려고 한다. branch를 어떻게 사용하면 되는거지? 1. 프로젝트를 clone한 후, branch 생성 1) clone할 프로젝트의 주소를 복사한 후, 터미널 창에서 프로..