I AM Seung Hyeon

제품 가격 수량 합계 14,900 원 - +   위 아래 둘다 공통으로 적용하고 싶어서 아래처럼 적용했더니.order_list .co..

자식셀렉터 div > span > input.form_control { ... }  자손셀렉터- 계층구조 공백으로 표현- 순차적일 필요 없다div span input.form_control { ... } ... ? ... ...?... ...?... ... ? ... 속성셀렉터a[href]href 속성을 갖는 a태그a[href="#"]href 속성값이 "#"인 a태그#hello[method="post"]method속성값이 "post"인 id가 hello인 태그 가상클래스a:link { ... } a:visited { ... } a:hover { ... } a:active { ... } n번째 요소 :first-child:last-child:n..

반응형 웹 디자인의 9가지 기본 원칙 https://knulab.com/archives/1153 반응형 웹 디자인의 9가지 기본 원칙 - KNULAB반응형 웹 디자인은 다중 스크린 문제에 대한 훌륭한 솔루션이지만 인쇄 관점에서 볼 때 어려움을 겪습니다. 고정 된 페이지 크기가 없으며, 밀리미터 또는 인치가 없으며, 물리적 인 제약이 없knulab.com

- 구글 웹 폰트https://fonts.google.com/ - 아이콘 폰트https://fontawesome.com/- 버전4 까지는 무료- 버전5,6은 부분 유료화      - 목록확인    https://fontawesome.com/v6/icons/?o=r&m=free

:before요소 내용 앞쪽에 새 컨텐츠 추가:after요소 내용 끝에 새 컨텐츠 추가:selection마우스 드래그로 선택한 텍스트 컨텐츠 영역 선택:marker목록 아이템 앞에 붙는 마커 선택:first-letter현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 글자 선택:first-line현재 웹 브라우저에 보이는 상태를 기준으로  요소의 텍스트 컨텐츠 첫 줄 내용 선택

● autofocus페이지가 로드될 때 자동으로 포커스(커서)가 요소로 이동됨을 명시한다.  ● readonly 요소의 입력 필드가 읽기 전용임을 명시한다.입력필드는 사용자가 수정할 수 없고,해당 내용을 하이라이트하거나 복사할 수 는 있다.특정 조건이 충족될 때까지 사용자가 입력 필드의 내용을 수정할 수 없도록 설정하고,특정 조건이 충족되면 자바스크립트 등으로 readonly 속성값이 삭제하여 사용자가 입력 필드를 수정할 수 있도록 조절할 수 있다.disabled 속성이 명시된 입력 필드의 값은 서버로 제출되지 않지만,readonly 속성이 명시된 입력 필드의 값은 서버로 제출된다.  ● value 태그 요소의 초깃값을 명시한다. 태그 요소의 type 속성값에 따라 다른 용도로 사용된다.- "butto..

좌측 사이드바에 카테고리 메뉴를 같은 비율로 정렬하기 위해 flex를 이용했다.( 헤더, 본문, 푸터 부분은 작업중 ) html 부분 CSS 부분 flex column 으로 세로 정렬을 해주고,flex: 1  ( flex-grow:1,  flex-shrink:1,  flex-basis:0% )로 설정하여menu height 사이즈를 같은 비율로 공간을 채운다.

이렇게 중앙배치를 하고 싶을 때 방법이 여러가지가 있다.  1. position, margin 을 이용하는 방법  2. flex 를 이용하는 방법       3. position, transform-translate  이용 1) 부모요소 너비의 50% 되는 위치로 이동2) 자식 요소 너비의 50% 만큼 왼쪽, 위쪽으로 이동

- width, height 는 부모요소를 기준으로 크기를 가진다.- 에 width, height 를 100% 로 부여하기 위해서는 의 부모요소에 크기를 부여해야 기준으로 삼을 수 있다.- 의 부모요소  :        ▷      ▷  ☞ ☞ ☞ ☞ ☞  html, body { width: 100%; height: 100%; }