6. HTML 기본기 다지기 17. Grid flex 박스의 기본적인 컨셉은 1차원의 개념이다. 따라서 wrap으로 다음 줄로 넘어간 요소들에 대한 정렬을 주로 다뤘다. grid의 기본 개념은 2차원으로 시작한다. 하나의 그리드는 columns, rows로 구성된다. 각 행과 열 사이에 공백이 있는데, 이를 gutters, gap이라고 표현한다. Table을 레이아웃에 사용하면 안된다! 17.1. grid-template-rows, grid-template-columns (Container 속성) width를 설정해도 기본적으로 border 값이 알맞지 않게 나올 수 가 있는데, 이는 border 값을 가지고 있기 때문이다. grid-template-row , columns를 적용한 곳에서만 css 적용..
Git git flow를 사용하기 위해, git을 다시 공부하고 있다. 멘토님의 교육을 받으면서 git을 편하게 사용하던 나의 습관들이 안 좋다는 것도 알게 됐다. 그중 하나인 git add . , 이나 git commit -m "" 같은 명령어들을 자주 썼는데, 이는 내가 Commit Convention 대해 생각하지 못하게 만들었다. 따라서 git bash를 사용하면서 올바른 습관을 만드는데 노력하고 있다. 웹 개발을 하면서 node_modules를 add 해버리는 경우도 경험을 해봐서 더욱더 안 좋은 습관이라는 말이 와닿았다. 나름 commit 메시지에 신경 쓰면서 개발하고 있다 생각했는데 나만 알아볼 수 있다는 것을 몰랐다. 다시 한번 다른 사람들도 알아볼 수 있게 만드는 것이 중요하다는 것을 깨..
21.10.26 오타, 코드 블록 수정 CSS 12. 레이아웃 12.1. display - inline, block, inline-block inline 영역의 크기가 내부 콘텐츠 크기로 정해진다. width, height로 크기를 변경할 수 없다. margin, padding의 top과 bottom을 지정할 수 없다. 여러 요소가 가로 배치가 된다. block 영역의 크기를 width, height로 지정할 수 있다. width를 지정하지 않으면 가로 전체를 차지한다. 여러 요소가 세로 배치가 된다. inline-block : ex) input inline과 block의 성질을 둘 다 가진다. 영역의 크기를 width, height로 지정할 수 있다. 여러 요소가 가로 배치가 된다. 즉, inline ..
CSS 9. 폰트 관련 속성 9.1. font-size, font-style, font-weight 단축 속성으로도 사용이 가능하다. p { /* font-style font-weight line-height font-family */ font: italic 200 20px "Times New Roman", Times, serif; } 9.2. letter-spacing, word-spacing 문자 간격을 조절하는 속성 9.3. text-align : 중앙 정렬 block이냐 inline이냐에 따라서 달라진다. block은 width를 차지할 수 있을만큼 전부 차지하기 때문에 text-align으로 중앙 정렬이 가능하지만 inline 같은 경우에는 content의 영역만큼만 차지하기 때문에 text-a..
21.10.26 용어 수정 HTML head 7. 메타데이터 요소 메타데이터란 데이터를 설명하는 데이터를 메타데이터라고 한다. 예를 들어 책 맨 앞쪽에 책에 대한 정보들이 나열돼 있다. 이런 데이터를 설명하는 데이터를 메타데이터라고 한다. HTML 요소는 기계가 식별할 수 있는 문서 정보(메타데이터)를 담습니다. 정보로는 문서가 사용할 제목, 스크립트, 스타일 시트 등이 있습니다. : 문서 제목 요소 페이지 제목은 SEO에 큰 영향을 준다. 보통, 짧고 일반적인 이름보다 길고 상세한 제목이 더 좋은 성과를 내곤 한다. 검색 엔진 (en-US)이 결과 페이지의 순서를 결정하는 구성 요소 중 하나가 페이지 제목의 내용이기 때문. meta 요소가 제공하는 메타데이터는 4가지 유형이 있다. 속성 뷰포트 뷰포트(..
21.12.28 crossorigin 내용 수정 HTML Element 🤔비슷한 태그들을 구별해서 쓰는 게 왜 중요할까? 사실 사소해 보여 잘 와닿지 않았다. 시각적으로 태그들의 차이가 거의 없었기 때문이다. 그래서 별생각 없이 태그들을 썼을 때가 많았다. 하지만 개발자와 브라우저 관점에서 살펴보자. 개발자들이 필요한 정보를 찾을 때, 정확한 태그들을 사용해줘야 필요한 정보들을 빠르게 찾을 수 있을 것이다. 또한 스크린 리더 같은 프로그램을 사용할 때, 웹에서 와 달리 에 악센트를 준다고 한다. 이런 예시를 듣고 나니 가독성이나 웹 접근성 측면에서 정보들을 올바른 태그를 사용해 구분을 잘해주는 것이 중요하다고 생각이 들었다. 1. HTML 텍스트 요소 1.1. ~ : 제목 제목을 나타내는 태그로만 알고 ..
1. HTML, CSS에 대한 기본기 웹 개발을 처음 경험하면서 JS 공부도 없이 React부터 공부를 했다. 하지만 이후에 JS에 대한 이해도가 떨어져 React를 제대로 활용할 수가 없었다. 그래서 기본기가 중요하다고 생각을 했다. 배우는 것은 빠르지만 그만큼 잊어버리는 것도 빠르다. 잊지 않기 위해서 블로그에 기록을 하고 있다. 화면 구성은 CSS 프레임워크를 사용했었다. 템플릿을 가져와 만들다 보니 정작 내가 원하는 대로 UI를 만들 수 있는가?라는 질문에 'Yes'라고 답을 할 수 없었다. 만들긴 해도 엄청난 시간이 들어갔고, 기본적인 개념에서 흔들렸다. 결국 기본이 부족했다. 템플릿을 사용하지 않고 내가 원하는 대로 UI를 만드는 것이 생각보다 어려웠다. 그래서 결국은 React에서 HTML까..
21.12.29 meta 태그 관련 내용 일부 수정 21.12.29 ~ 정확하지 않은 내용 업데이트중.... 만약 SPA, CSR, SSR에 대해서 모르신다면 아래 정리된 글을 읽어보시기 바랍니다! SPA 그리고 SSR과 CSR 렌더링에 관해선 이전 글에서 작성했지만 다시 한번 간단하게 말하고 가자면, 렌더링이란 사용자가 웹 페이지에 접속했을 때 서버로부터 HTML 파일을 받아 화면에 그려주는 것이다. SSR(Server Side R velog.io 간략 정리 React나 Vue는 SPA(Single Page Application)로 웹 앱으로 만들기 위한 라이브러리, 프레임워크다. SPA의 주요 장점은 다음과 같다. 웹 앱처럼 사용자의 경험을 좋게 만들기 위해서다. 최초 한번 페이지를 로딩한 이후 JS..
- 프로그래머스 자바
- JavaScript
- vscode commit vi
- C언어
- 프로그래머스 코딩테스트
- 백준
- css
- 42서울 합격 후기
- 42서울 라피신
- 마크다운 이미지 업로드
- 42서울 합격
- 42seoul
- 프로그래머스 카카오
- vscode
- 프로그래머스 코테
- 자바스크립트
- windows 10 ubuntu
- 알고리즘
- flexbox
- c언어알고리즘
- HEXO
- C언어문제
- React
- Git
- html
- JS
- git vi
- c언어 함수
- 42서울
- C언어 문제