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..

CSS 기초 CSS란? Cascading Style Sheets (CSS)는 HTML이나 XML 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어이다. CSS는 HTML과 같은 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다. CSS의 장점 HTML의 내용과 스타일을 분리할 수 있다. 스타일을 변경할 때 HTML을 수정할 필요가 없다. 웹 페이지의 로딩 속도를 향상시킬 수 있다. 스타일을 적용하는 방법이 다양하다. CSS의 구문 https://www.w3schools.com/css/css_selectors.asp 선택자 { 속성: 값; } 선택자(selector): HTML 요소를 선택한다. 속성(property): 스타일을 지정한..

Naming Guide 다양하고 많은 사람이 개발에 참여할 때 작업 효율화를 위해 가장 중요한 것 중의 하나가 바로, 사전에 약속한 규칙에 따라 이름을 정하는 것입니다. Naming Guide는 크게 "Naming 규칙"과 "Prefix/Subfix/Suffix 정의" 두 부분으로 나뉩니다. Naming 규칙에서는 CSS와 HTML 및 각종 파일, 디렉토리들의 공통된 네이밍 규칙에 대해 정리합니다. Prefix/Subfix/Suffix 규칙에서는 다양한 개발환경에 대비한 예약단축어들을 소개하며 이를 조합하는 방식에 대해 설명합니다. Naming 표기법 - kebab-case(케밥 표기법) kebab-case, header-container, btn-list, menu-list ... (하이픈)으로 단어를..

DOCTYPE html> flex : css ul { background: lightpink; } li { display: block; width: 100px;height: 100px; margin: 10px; text-align: center; line-height: 100px; background: #fff; } flex .flex-1 { display: flex; } 1 2 3 .flex-2 { display: flex; flex-direction: column; } 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3..

m.blog.naver.com/PostView.nhn?blogId=designondo&logNo=220915027585&proxyReferer=https:%2F%2Fwww.google.com%2F CSS web font 웹폰트 ttf, eot, woff 만들고 설치 사용하기 시작하기 전 알아두기!CSS3의 @font-face는, CSS2에서 부터 존재해 온 규칙이 있다고 합니다. 우리가... blog.naver.com 시작하기 전 알아두기! CSS3의 @font-face는, CSS2에서 부터 존재해 온 규칙이 있다고 합니다. 우리가 흔히 웹폰트라 부르는 Embedded Open Type(.eot)포맷의 라이센스로 인해 해당 포맷을 지원하는 유일한 웹브라우저인 인터넷 익스플로러에서만 사용했습니다. 그러나,..

해상도에 맞춰 이미지를 분기대응해야 한다. 이미지를 1배, 2배, 3배로 이미지 제작 후 아래와 같이 코딩합니다. /* 1배 이미지 분기대응 */ .img_g {display:inline-block;overflow:hidden;background:url(http://m1.daumcdn.net/svc/image/U03/common_icon/527B1A970370F60001) no-repeat 0 0;text-indent:-9999px} /* 2배 이미지 분기대응 */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .img_g {background-image:url(..