CSS (7) 썸네일형 리스트형 [CSS] CSS layout 레이아웃 종류와 기본설명 CSS layout CSS layout 기술은 웹페이지에 포함된 block level element들을 모아 원하는 위치에 배치할 수 있게 해준다. Normal flow Display 속성(flexbox, Grid Layout) Floats Positioning Multi-column layout Table layout normal flow normal flow는 페이지 레이아웃에 특정한 css 설정을 적용하지 않을 경우 브라우저가 기본값으로 html페이지를 배치하는 방법이다. 여기서 기본값이란 block level element는 부모요소의 너비 100%, content의 최대 높이가 되고, 항상 새로운 줄에서 시작한다. inline level element는 content의 최대 너비와 높이가 되고,.. [CSS] border 속성 정리(border-width, border-style, border-color) border 관련 CSS 속성 border는 아래의 하위 속성을 포함한다. - border-width - border-style - border-color border-width border-width 속성은 border의 두께를 설정 default 값은 medium /* 키워드 값 */ border-width: thin | medium | thick; /* 값 */ border-width: 1px; /* top and bottom | left and right */ border-width: 1px 5px; /* top | left and right | bottom */ border-width: 1px 3px 5px; /* top | right | bottom | left */ border-width: .. [CSS] background 속성 정리(color, image, position, repeat 등) background 관련 CSS 속성 background는 아래의 하위 속성을 포함한다. - background-color - background-image - background-repeat - background-position - background-size - background-origin - background-clip - background-attachment background-color background-color 속성은 요소의 배경 색을 지정할 때 사용 default 값은 transparent background-color: color name | HEX value | rgb() | rgba(); background-color: indigo; /* indigo*/ background-.. [Navbar] Navbar color change animation - Html, CSS, JS ⭐ Navbar color change animation Navbar 높이만큼 스크롤 했을 때 투명한 Navbar의 색이 변하는 애니메이션 See the Pen oNYzoPp by Eunji Jeon (@emcjrl) on CodePen. E U N J I Home About Skills Work Contact * { box-sizing: border-box; } body { font-family: "Roboto", sans-serif; margin: 0; box-sizing: border-box; } a { text-decoration: none; color: #ffffff; } button { background-color: transparent; cursor: pointer; border: none.. [Navbar] Change Menu Color - Html, CSS, JS Change Menu Color See the Pen abBbvxm by Eunji Jeon (@emcjrl) on CodePen. Html Home About Books Portfolio Contact CSS body { display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family:Georgia, 'Times New Roman', Times, serif; } .menu { display: flex; justify-content: center; } .menu_link { font-size: 1.2em; color: rgb(183, 202, 209); padding: 0 20px; list-style: .. [Navbar] Sliding Menu Indicator - Html, CSS, JS Sliding Menu Indicator See the Pen ExNxVJy by Eunji Jeon (@emcjrl) on CodePen. Html Home About Books Portfolio Contact CSS * { margin: 0; padding: 0; box-sizing: border-box; font-family: Georgia, "Times New Roman", Times, serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .navbar { position: relative; display: flex; } .navbar a { position: relative;.. [CSS] :root 가상 클래스로 CSS 변수 다루기 Html로 골격을 잡고 CSS로 디자인을 할 때, 폰트 크기나 폰트 컬러 등 여러 부분에 웹페이지의 통일성을 위해서 하나의 같은 변수를 여러 번 사용하는 경우가 많다. 수정을 해야할 때, 요소들을 하나하나 찾아서 수정을 해야 하는데 요소의 수가 많으면 시간이 걸릴 뿐 아니라 정확성도 보장할 수 없다. 이럴 때 :root 가상 클래스를 사용하게 되면 유지보수를 손쉽게 할 수 있다. 그러면 가상 클래스는 무엇이고, :root 가상 클래스는 어떻게 사용하는 것일까? 가상 클래스(pseudo-class)란? Id 선택자나 class 선택자로 사용할 수 없는 요소들을 선택하는 선택 자다. 가상 클래스(pseudo-class)는 요소의 속성 값, 상태, 상대적 위치 등을 이용하여 요소를 선택할 수 있다. Ex) :.. 이전 1 다음
