여기저기 이것저것

로그인 화면의 로그인박스를 화면 중앙에 배치하고 싶은데, 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 태그. = 부모 요소의 크기만큼 가로 너비가 자동으로 늘어남. 세로 요소는 인라인처럼 자동으로 맞춤..

reset-css 웹을 볼 수 있는 브라우저가 많고, 기본적인 셋팅들도 조금씩 다르기 때문에 크로스브라우징을 위해서 reset css를 적용하면 좋다. reset css cdn이라고 검색하면 cdn을 제공하는 사이트가 나온다. 위의 화면이 나오면 reset.min.css의 오른쪽 파일버튼을 눌러서 copy HTML를 누른 후, 작업하고 있는 html header영역에 ctrl + v하기!

부모에 적용된 스타일이 자식에게 적용되는 현상 부모태그의 속성을 자식태그에서 상속받은 결과. 모든속성들이 상속되는 건 아니고, 아래의 사이트에서 inherited? 가 yes인 것들만 상속된다. https://www.w3.org/TR/CSS21/propidx Full property table www.w3.org

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] 단축..