<현록/>

Shadow 기능 .white-box { box-shadow: 0.5px 0.5px 2px 1px #eee; --> 1번째 2번째 값: 그림자의 x,y 축 이동량 --> 3번째 값: blur --> 4번째 값: spread 테이블 박스 테두리를 왼쪽만 주고 싶으면 CSS로 border-left : 1px solid black 이런거 넣으면 됩니다. [div의 속성-복습] ㅇ div는 가로행을 전부 차지한다. (display: block의 속성) ㅇ 기본 정렬은 왼쪽 정렬이다. 111 222 333 따라서, 화면에서 이렇게 보임. 111 222 333 따라서, bootstrap을 활용해 이렇게 코드 짜면 1111 2222 md 사이즈 이하일 때는, 1111 2222 md 사이즈 이상일 때는 이렇게 보인다...

[Bootstrap 계속] Bootstrap에서는 모바일(다음에 태블릿, pc 순서로) 버전 먼저 짜는게 더 쉽다 Bootstrap에서 text-end : 우측정렬 Q. PC에서 4열, 태블릿 2열, 모바일 1열 코드 어떻게? 모바일 먼저 짜기 안녕 안녕 안녕 안녕 태블릿 버전 짜기 안녕 안녕 안녕 안녕 --> 이렇게 되면 모든 사이즈에서 6사이즈를 차지 하므로 조건부를 줘야함 --> 태블릿사이즈 이상에서만 col-6 되도록 아래와 같이 수정 안녕 PC 버전 짜기 --> 조건부 연달아서 입력 가능함.

[Bootstrap Grid 레이아웃(반응형)] .row 안에 .col 사용하면 균일하게 쪼개기 가능 안녕하세요 안녕하세요 안녕하세요 --> flex 필요없이 편리하게 균등분배 가능 안녕하세요 --> 가로로 쪼개고 싶으면 col-차지할 크기 --> 총 12칸으로, col-3은 정확히 4등분 한 크기 [반응형 조건문] --> @media 문법 없이도 반응형 레이아웃 개발 가능한 장점!! 안녕하세요 --> col을 이용해 가로로 쪼갠걸 반응형으로 --> md 사이즈 이상에서만 적용해주세요 --> 상세 사이즈는 grid system 검색 [기타 유용 기능] 안녕하세요1 안녕하세요2 안녕하세요3 --> 순서 조정 가능: order-first or order-1하면 열 맨 앞으로 옴 안녕하세요3 --> order..

[Bootstrap] --> 개발이 매우 빨라진다 --> 뼈대 디자인에 유용 ㅇ https://getbootstrap.com 에서 다운로드 css, js 둘 다 다운로드 css 파일은 head 태그 안에, js 파일은 body 태그 끝나기 전 삽입 ㅇ또는 quick start 템플릿 복사 붙여넣기 해도 됨 ㅇ원하는 예제(버튼, navbar, card, carousel(이미지 슬라이드), modal(팝업창), badge, media object등)을 검색 [Utility class 제공(class 명 생성 안해도 되는 편리)] Utilities 탭에서 검색 가능 Card title Card title Card title --> mt: 타이틀에 마진탑 3만큼 주기 (1~5까지 가능) --> pt: 타이틀에 ..

[반응형 레이아웃 만들기] 시작하기 전 이거 꼭 기입 [글자, 너비] .test { width: 50vw;

1 2 3 .flex-container { display: flex; } display:flex를 부모에 주면 자동으로 div 박스 3개 가로배치됨 [display: flex 활용한 좌우정렬] .flex-container { display: flex;

HTML CSS 웹폰트 넣는 법과 안티앨리어싱 [개요] body{ margin: 0px; font-family: 'gulim'; } --> font-family 속성은 자동으로 inherit 됨 body{ margin: 0px; font-family: 'gulim', 'dotum','arial'; } --> 굴림이 안되면 돋움, 안되면 arial 적용해라 (안정성을 위한 장치) [커스텀 폰트 넣는법] 사용자들 pc에 깔려 있지 않는 폰트도 보이게 하는 법 @font-face { font-family: '이쁜폰트'; src: url(../font/NanumSquareR.ttf); } --> 내가 준비한 폰트를 CSS에서 사용가능토록 등록하는 과정 body{ margin: 0px; font-family: '..

[코드양 줄어드는 Class 작명법 (OOCSS,BEM)] [OOCSS: Object Oriented CSS] :뼈대와 살점을 분리하는 작명법, 뼈대 스타일이 많을 수록 편리 장점1. CSS양 줄어듦 장점2. 유지보수 편리 요즘은 React, Vue로 html 만들게 되면 작명법 없이도 잘 쓸 수 있음 작명법은 참고만 바람 더알아보기 구매하기 CSS는, .main-btn {

[pseudo-class 인터랙티브 버튼 만들기] 클릭했을 때 반응 달라지는 속성 적용하기 .cart-button { cursor: pointer; } --> 갖다대면 누르는 손가락 생김 .cart-button:hover { background: chocolate } --> 커서 갖다대면 바뀌는 색깔 .cart-button:focus { background: green } --> 커서 누르고 (다른 곳 안누르면) 유지되는 색깔 .cart-button:active { background: yellow } --> 커서 누를때 변화하는 색깔 hover, focus, active 넣을때 순서가 중요함 (hofa:호빠) 마찬가지로 input에도 인터랙티브 반응 적용 가능함 .input-test { font-siz..

[테이블 만들기] 1 2222222 3 1 2 3 tr: 가로행 td: 세로열 th: 주로 제목셀에 쓰임(볼드 처리) *tr 안에 td 넣어야 함 [vertical-align 속성] 1. inline 요소간(너비와 높이가 제한 없는 요소) 상하정렬 2. 테이블 셀 내 상하정렬(top,bottom,middle 만 사용가능) 일부 브라우저에서 table boredr-radius 안먹을 수 있음 (border-collapse와 함께하면) [테두리 일부만 주기] .cart-table td { padding: 15px; border-bottom: 1px solid #c2d3de; } --> table 안에 있는 td, border bottom 만 테두리 주기 .cart-table td, .cart-table th..