odada

flexbox로 레이아웃 만들기 flexbox란? flexbox는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공합니다. Flexbox는 여러 요소들 사이의 공간 배분과 정렬 기능을 제공하여, 강력한 분산형 레이아웃을 제공합니다. flexbox의 구성 flex container: flexbox를 적용할 요소 flex item: flex container의 자식 요소 flexbox layout 만들기 1. layout1 - 스크롤 없는 100% 높이의 레이아웃 header main aside footer /* css */ :root { --hdH: 70px; --ftH: 70px; } #wrap { max-width: 1280px; margin: 0 auto; ..

box model - css 배우기 https://www.w3schools.com/css/css_boxmodel.asp 모든 HTML 요소는 박스 모델을 가지고 있다. width 요소의 너비를 지정한다. auto (기본값 100%) 브라우저가 너비를 계산한다. length px, cm, em 등 단위를 사용할 수 있다. inherit 부모 요소의 속성값을 상속받는다. div { width: 1280px; } height 요소의 높이를 지정한다. auto (기본값 0) 브라우저가 높이를 계산한다. length px, cm, em 등 단위를 사용할 수 있다. inherit 부모 요소의 속성값을 상속받는다. div { height: 500px; } max-width 요소의 최대 너비를 지정한다. none (기..

background 속성 - css 배우기 background 배경 이미지를 지정한다. background: url('https://www.w3schools.com/css/img_fjords.jpg'); https://www.w3schools.com/css/css_background.asp background-color 배경 색상을 지정한다. background-color: red; background-image 배경 이미지를 지정한다. background-image: url('https://www.w3schools.com/css/img_fjords.jpg'); background-repeat 배경 이미지 반복을 지정한다. background-repeat: repeat-x; ..

font & text 관련 css font https://www.w3schools.com/css/css_font.asp font-family 글꼴을 지정한다. font-family: 'Times New Roman', Times, serif; font-family: Arial, Helvetica, sans-serif; web font 웹폰트란 로컬에 설치된 글꼴이 아닌 서버에서 제공되는 글꼴을 말한다. - google font https://fonts.google.com/ 구글 폰트 사이트에서 사용하고 싶은 폰트의 상세페이지로 이동한다. font-weight, font-style을 선택한다. 장바구니에 담긴 CDN 주소를 복사해 html 파일 내 head 태그에 추가한다. 또는 @import..

layout 관련 속성 block (기본값) width, height 속성을 가질 수 있다. margin, padding 속성을 가질 수 있다. div, p, h1, h2, h3, h4, h5, h6, ul, ol, li, form, table, header, footer, section, article, nav, aside, blockquote, address 등 보였다 안보였다 .show { display: block; } .hide { display: none; } inline width, height 속성을 가질 수 없다. margin-top, margin-bottom, padding-top, padding-bottom 속성을 가질 수 없다. span, a, img, input, button, s..