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 ... (하이픈)으로 단어를..

Layout 의미있는 마크업 리빙샵아울렛 인기모음전 수저모음 도마모음 그릇모음 접시모음 베스트상품 주방용품 설비제품 인덕션제품 실리콘제품 업종별샵 한식기물 양식기물 일식기물 중식기물 인덕션용품 냄비/솥 후라이팬/주물 인덕션렌지 기타제품 바로가기 바로가기1 바로가기2 바로가기3 바로가기4 바로가기5 바로가기6 바로가기7 공지사항 Lorem ipsum dolor sit amet. 2023.11.27 Lorem ipsum dolor sit amet. 2023.11.27 Lorem ipsum dolor sit amet. 2023.11.27 Lorem ipsum dolor sit amet. 2023.11.27 Lorem ipsum dolor sit amet. 2023.11.27 갤러리 겨울 내내 촉촉 이번에만 2..

폼 관련 태그 form 태그 사용자가 입력한 데이터를 서버로 전송할 때 사용하는 태그 사용자가 입력한 데이터를 서버로 전송하는 방식은 GET 방식과 POST 방식이 있다. GET 방식 데이터를 URL 뒤에 붙여서 전송하는 방식으로 데이터가 노출되는 단점이 있다. 예를 들어, 아래와 같이 URL 뒤에 데이터를 붙여서 전송한다. POST 방식 데이터를 URL 뒤에 붙이지 않고 전송하는 방식으로 GET 방식보다 보안성이 높다. 데이터를 전송할 때 사용하는 태그는 input 태그이다. input 태그 사용자가 입력한 데이터를 받아들이는 태그 type 속성을 사용해서 입력 데이터의 종류를 지정할 수 있다. type 속성 값 설명 text 한 줄의 텍스트를 입력할 수 있는 텍스트 박스 password 한 줄의 텍스..

웹사이트(홈페이지) 제작 기본 프로세스 웹사이트(홈페이지)란? 웹 페이지들의 모음 웹 페이지 : 웹 브라우저에서 볼 수 있는 문서 웹 사이트 : 웹 페이지들의 모음 홈페이지 : 웹 사이트 중에서 첫 페이지 웹사이트 제작 기본 프로세스 기획(Planning) 디자인(Design) 프론트앤드(Front-end Development) 백앤드(Back-end Development) 기획(Planning) 웹사이트의 목적, 타겟 사용자, 기능, 콘텐츠 등을 정의하고 전체 구조와 흐름을 설계하는 단계 목적 및 목표 설정: 웹사이트가 달성하고자 하는 목적과 구체적인 목표를 설정합니다. 타겟 사용자 분석: 대상 사용자의 특성과 요구를 분석하여 사용자 중심의 기획을 진행합니다. 기능 명세: 웹사이트에서 제공할 기능들을 ..