Minsoftk

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..

21.09.03 오탈자 수정 1. 더보기 버튼 클릭 시, 버튼의 상태 공유 문제 남자 상품에서 더보기 버튼 클릭하고 나열할 항목이 없으면, 위의 사진과 같이 더보기 버튼이 비활성화가 된다. 비활성화가 된 후 여자 상품 카테고리로 갔을 때, 나열할 여자 상품들이 있지만 위와 같이 비활성화가 되는 문제가 있었다. 해당 코드는 아래와 같다. (ShoesLIst.js 변경전 코드) (...) return( {props.num === 1 ? : } { fetchData(props.num); }}> 더보기 ); }; 이를 해결하기 위해서 버튼에 대한 상태를 남자, 여자 따로 가지게 했다. props.num===1에 따라 상품을 보여주는 것처럼 버튼도 아래와 같이 UI 컴포넌트로 따로 만들어서 보여줬다. 그리고 남자..

21.09.03 오탈자 수정 & flowchart 재첨부 🤔 React에 대하여 시작 전에 React에 대한 이야기. 사실 React를 배웠었던 가장 주된 이유는 인턴을 했던 회사에서 React를 사용했다. 그게 가장 컸다... 이제 와서 React에 대해서 다시 공부하게 된 이유도 익숙해서가 제일 컸다. 현재까지도 가장 큰 커뮤니티를 가지고 있고, 사용되는 곳이 많다. Vue.js나 Angular.js는 사용을 안 해봤기에 정확한 체감 비교까지 할 수 없지만, 모두 SPA(Single Page Application)인 웹 앱을 만드는데 큰 도움이 되는 도구들이다. 최근에 와서는 "Vue.js가 뜨고 있다. React는 지는해다." 말이 많다. 그럼 나 같은 신입 개발자를 준비하는 사람들은 '어? 그럼 ..