Web-app/CSS
-
CSS display grid 알아보기Web-app/CSS 2023. 10. 28. 14:51
mozilla의 CSS grid layout 문서를 참고해서 grid 에 대해 알아봅시다👨💻 Grid란? 행과 열의 교차된 집합으로, elements는 grid에 배치될 수 있습니다. ✔ CSS Grid의 특징 부모 container에 display: grid 또는 display: inline-grid 적용, children은 grid items가 됩니다. 크롬의 개발자 모드에 Layout에서 row, column의 구조를 알 수 있습니다. container1 container2 container3 container4 container5 container6 html{ height: 100%; } body{ height: 100%; } .container{ display: inline-grid; heig..
-
CSS display flex에 대해 알아보기Web-app/CSS 2023. 10. 27. 14:18
mozilla 사이트를 참조하여 display 옵션 중 flex에 대해 알아보았습니다 👩💻 flex layout이란? 1차원 layout model을 설계하는 layout module (row 또는 column을 다룸), 2차원 layout model을 다루는 grid layout과 대조적이며 항목간 공간 배분 및 정렬 기능을 제공합니다. ✔ flexbox 정의 방법 부모 container에 display: flex; 를 써줍니다. children은 flex item이 됩니다. container1 container2 container3 .container{ display: flex; flex-direction: column; } .box{ border: 3px black solid; padding: 8..
-
CSS font 중요한 property에 대해 알아보기Web-app/CSS 2023. 10. 22. 08:25
Mozilla 홈페이지의 font에서 중요하다 생각되는 property에 대해 공부해보았습니다. font-family 하나 이상의 font family 이름 또는 generic family 이름으로 이루어진, 우선순위가 정해진 리스트 리스트 아이템은 콤마로 구분되며, 첫번째 font가 가장 큰 우선순위를 가지며 설치되 있거나 @font-face에서 다운로드되면 가장 먼저 선택됩니다. 최소 하나의 generic family가 들어 있어야 하며, 필요할 때 generic family font를 대안으로 브라우저가 사용하게 합니다. @import url("http://~~google font url (Roboto)") body{ font-family:'Roboto', sans-serif } 만약 Roboto가..
-
CSS 상대단위 rem, em 알아보기 & viewport 에서의 단위 vw, vh, vmin, vmax 알아보기Web-app/CSS 2023. 10. 13. 21:03
rem, em rem (root em) root element의 font size를 나타내는 단위로, 1rem은 html element의 font size와 동일. 일반적으로 16px이 default 값으로, 브라우저의 글꼴 크기 설정에 따라 1rem 의 값은 달라지게 됩니다. 크롬에서 설정 페이지를 들어갔을 때 일반적인 글꼴 크기는 중간, 권장상태로 되어 있습니다. 이 중간 상태에서 font-size값은 16px. 만약 설정을 아주 크게로 변경하면 24px로 바뀝니다. 즉 이때 1rem은 24px이 됩니다. 크롬에서 글꼴 크기 설정에 다른 font-size default 값은 다음과 같습니다. 글꼴 크기 설정 아주작게 작게 중간 크게 아주크게 1rem 10px 12px 16px 20px 24px em ..
-
CSS background 에 image 넣기 & 옵션 설정하기Web-app/CSS 2023. 10. 9. 20:55
홈페이지에 배경 이미지를 이용해서 꾸미고 싶을 때 옵션들을 조정해보았습니다. background-image를 사용해서 간단한 가라 화면을 만들어보았읍니다. background-size background-position background-origin background-clip 에 대해서 알아봅시다! navigation bar content content * { box-sizing: border-box; } body{ margin: 0; } .nav{ background: black; color: white; position: fixed; top: 0; width: 100%; height: 50px; } .container{ margin-top: 50px; background-image: url("./..
-
CSS property float와 clear 알아보기Web-app/CSS 2023. 10. 9. 09:40
float란? 콘텐츠의 컨테이너에서 왼쪽에 위치시킬지 오른쪽에 위치시킬지 정할 수 있는 옵션 설정 시 텍스트는 콘텐츠 주변을 감싸게 됨. none element가 float 되지 않음. left element가 컨테이너의 왼쪽에 float되게 됨. right element가 컨테이너의 오른쪽에 float되게 됨. inline-start* element는 컨테이너의 시작 부분에 float 되게 되며, ltr(left to right) 문서에서는 왼쪽 / rtl(right to left)문서에서는 오른쪽을 의미 inline-end* element는 컨테이너의 끝 부분에 float 되게 되며, ltr(left to right) 문서에서는 오른쪽 / rtl(right to left)문서에서는 왼쪽을 의미 특히 ..
-
CSS property overflow 알아보기 & 실습Web-app/CSS 2023. 10. 8. 19:15
overflow property란? 컨텐츠를 담고 있는 부모의 element가 컨텐츠를 다 담지 못할 때 어떻게 표현할 것인가를 지정해주는 옵션 value의 종류 visible (default) 초과된 컨텐츠는 클리핑(마스킹)되지 않고 부모 element 밖으로 나와 볼 수 있는 상태. 부모는 스크롤되는 element가 아님. hidden 초과된 컨텐츠가 부모의 컨테이너 박스에 클리핑(마스킹)되며 가려져서 보여지지 않는 상태. 스크롤되지 않으며 가려져 보여지지 않는 것이지 컨텐츠는 그대로 보이게 됨. clip 초과된 컨텐츠는 overflow-clip-margin property를 이용해서 클리핑 (마스킹)됨. default 값은 0px이며, px을 조절하면 초과될 범위에서 특정 px만큼 더 보이게 됨. ..
-
CSS position property 알아보기Web-app/CSS 2023. 10. 8. 10:35
position propery란? element를 html document내 어떻게 배치하는지 설정하는 property value : static(default) / absolute / relative / fixed / sticky 실습해보기 1. static default 옵션, position과 함께 많이 쓰는 z-index의 경우 default는 0으로 지정되어 있음. 2. absolute 부모 중 position이 정의되어 있는 element를 기준으로 어디에 위치할지 지정할 수 있으며, 현재 document flow에서 벗어나게 됨. 아래 예제에서 만약 content class에 position relative가 없으면, position fixed로 정의되어 있는 navigation bar를 기..