<현록/>

실제 width는 100%+20px 임

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 사이즈 이상일 때는 이렇게 보인다...

취업하면 새롭게 구축하는것보다 남들이 짜놓은 개떡같은 코드 수정하는 일을 더 많이 하게 될 것임.. [CSS 덮어쓰기 잘하는 법] CSS 원본파일을 건들면 안되는 경우 새로운 CSS 파일로 덮어쓰기 해야함 Bootstrap은 덮어쓰기 안함, 클래스명 추가만 하면 됨. 1. 그냥 같은 클래스명 하단에 쓰기 헤드에 추가로 쓰고, main2.css 파일에 같은 이름의 클래스 새로 생성 (기존) class 명: main-content (변경) class 명: main-content custom --> color: skyblue 로 밑에 한번 더 쓰기 --> (밑에 있는 파일, 같은 파일이면 밑에 작성한 것이 우선 적용됨) --> 그래서 @media 쿼리고 맨 하단에 작성하는 것임 2. 우선순위 높이기 (비추) ..

[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: 타이틀에 ..

[CSS 디버깅] ㅇ 우클릭>검사>마법봉(개발자도구) ㅇ 인터넷 익스플로러 낮은 버전에서 안보이는 css 기능들에 대한 호환성 잡기 IE를 위한 CSS 파일 만들면 됨 ㅇ 조건문 추가해주기 [아이콘 넣기] 1. cdn 방식: 구글검색>fontawesome 5 cdnjs 다운로드> 홈피에서 all.min.css 복사 2. fontawesome 홈피에서 직접 다운 --> 상대경로로 저장 --> 원하는 아이콘 검색 후 tag 복붙

[반응형 레이아웃 만들기] 시작하기 전 이거 꼭 기입 [글자, 너비] .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: '..