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가지 유형이 있다. 속성 뷰포트 뷰포트(..

1. HTML, CSS에 대한 기본기 웹 개발을 처음 경험하면서 JS 공부도 없이 React부터 공부를 했다. 하지만 이후에 JS에 대한 이해도가 떨어져 React를 제대로 활용할 수가 없었다. 그래서 기본기가 중요하다고 생각을 했다. 배우는 것은 빠르지만 그만큼 잊어버리는 것도 빠르다. 잊지 않기 위해서 블로그에 기록을 하고 있다. 화면 구성은 CSS 프레임워크를 사용했었다. 템플릿을 가져와 만들다 보니 정작 내가 원하는 대로 UI를 만들 수 있는가?라는 질문에 'Yes'라고 답을 할 수 없었다. 만들긴 해도 엄청난 시간이 들어갔고, 기본적인 개념에서 흔들렸다. 결국 기본이 부족했다. 템플릿을 사용하지 않고 내가 원하는 대로 UI를 만드는 것이 생각보다 어려웠다. 그래서 결국은 React에서 HTML까..