728x90 프론트엔드 css2 [CSS] box-sizing border-box content-box CSS 박스 사이즈 관련 속성 box-sizing CSS에서 박스의 크기를 지정하였는데도 원하는 크기로 안바뀌는 경우에는 css의 box-sizing 속성을 확인해볼 필요가 있다. CSS Selector { box-sizing : content-box; (기본값) box-sizing : border-box; } box-sizing 속성을 content-box로 하면, 설정해놓은 사이즈는 padding, border 속성의 사이즈를 제외한 박스 자체의 사이즈로 설정이 된다. 즉, width 와 height 를 100px로 설정해 놓아도, border : 5px; padding : 5px 으로 설정하게 되면, width 는 120px이 되는 것이다. padding, border 의 설정 사이즈를 포함하여 원.. 2021. 3. 4. [프론트엔드] 쇼핑몰 상품 정렬 코드샘플 (Html,Javascript,Css) Sample Code 쇼핑몰 상품 정렬 코드 샘플 HTML5 , Vanilla Javascript, Css3 1. 설명 : 온라인 쇼핑몰에서 흔히 볼수있는 상품 정렬 코드 샘플이다 2. 사용언어 : Javascript, Html, Css [플러그인 사용 x] 3. 구동 로직 - 상품 Sample 이 없어서 짱구는 못말려 케릭터로 대체 (1) fetch API 를 통해 서버측의 json 데이터 Get (2) json파일(상품 객체 리스트) 저장 (3) 해당 리스트 출력 (4) 이후 선택 옵션에 따른 filter 처리 후 출력 [샘플 코드 :Html] 짱구 철수 유리 훈이 [샘플코드 :Css] :root{ /* color */ --color-white : #f4f9f9; --color-black : #0d335d; --color.. 2021. 2. 24. 이전 1 다음 728x90
