로그인 화면의 로그인박스를 화면 중앙에 배치하고 싶은데, flex와 gird를 이용하면 쉽게 해결할 수 있다. 부모엘리먼트를 flex나 gird로 설정하면 되고, min-height를 100vh를 하면 된다. min-height를 넣지 않을 경우 컨텐츠 높이만큼 되기 때문에 수평 가운데 정렬처럼 느낄 수 있다. flex .wrapper { display: flex; justify-content: center; align-items: center; min-height: 100vh; } grid .wrapper { display: grid; place-items: center; min-height: 100vh; }

영어의 경우 단어단위로 줄바꿈이 되는 것을 알 수가 있는데, 한글의 경우는 단어단위가 아닌 글자단위로 줄바꿈이 되고 있다. 이때 word-break를 keep-all로 넣어주면 한글도 영어처럼 단어단위로 줄바꿈 되는것을 확인할 수가 있다. 더 자세한 사항은 아래를 참조하면 좋다. https://developer.mozilla.org/ko/docs/Web/CSS/word-break word-break - CSS: Cascading Style Sheets | MDN CSS word-break 속성은 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정합니다. developer.mozilla.org
인라인(Inline) & 블록(Block) 화면에 출력되는 특성. 인라인(Inline) = 글자 , 왼쪽에서 오른쪽으로 수평으로 쌓임. = span 태그는 글자로 글자로 취급한다. = 콘텐츠의 크키만듬 자동으로 줄어준다.(높이,너비) = 글자는 가로사이즈와 세로 사이즈를 지정할 수 없다. height, width 안먹음. = 여백(padding, margin)의 경우에도 좌우로만 가능하고 위아래로는 불가능하다. = 인라인요소 안에는 블록요소를 담을 수 없고, 인라인 요소는 담을 수 있다. cf) span, img, a, label 블록(Block) = 상자, 위에서 아래로 수직으로 쌓임 = 대표적인 div 태그. = 부모 요소의 크기만큼 가로 너비가 자동으로 늘어남. 세로 요소는 인라인처럼 자동으로 맞춤..

VSCode를 몇일 안써봤지만, 대단한 것 같다. 기대된다. 생산성을 엄청 향상 시키는 확장프로그램이 많아보인다. 책이나 블러그에 나오는 주요한 확장프로그램을 아래와 같이 설치해보았다. ( 화면단 공부 시작....) 아래는 프로그램과 제작자명이다. Auto Rename Tag / Jun Han Code Runner / Jun Han HTML CSS Support / ecmel HTML to CSS autocompletion / solnurkarim Live Server / Ritwick Dey 설치방법은 ctrl + shift + x 눌러서 확장프로그램 검색페이지로 들어가거나 사각형 4개짜리를 누르고 검색 후 설치만 하면 된다. 아주 간단하다. 2022.03.18 - [개발/툴] - [VSCode] 단축..