記錄

참고 : http://tcpschool.com/css/css3_module_backgroundshttp://tcpschool.com/examples/tryit/tryhtml.php?filename=css3_module_backgrounds_02https://developer.mozilla.org/ko/docs/Web/CSS/Scaling_background_images 샘플코드) #fabio {background:url("fabio.jpg");background-repeat: no-repeat;background-size: cover;background-position: center center;width: 100%;height: 1000px;} background-size: cover vs contai..

참고 : https://getbootstrap.com/docs/3.3/css/#grid 그리드 시스템은 부트스트랩을 사용하는 큰 이유 중의 하나이다. 전체 레이아웃을 그리드 시스템을 통해 잡아줄 수 있기 때문에 페이지의 전체 레이아웃을 컨트롤 할 수 있다. 말 그대로 그리드(격자) 형식으로 페이지 레이아웃을 나누는 것이고 전체를 12로 잡고 원하는 그리드를 1/12 * n 단위로 형성한다.(최소단위는 1) 샘플코드 1) 전체 12에서의 공간 할당 col lg 2 col lg 8 col lg 2 위 코드는 하나의 row를 2/ 8/ 2 로 나눈 것이다. 핵심은 col-lg-n 클래스이다. col은 column을 의미하고 lg는 크게 봤을 때를 의미하며(sm은 줄였을 때를 나타낸다) 맨 뒤 숫자는 전체를 1..

CSS 구글 폰트 적용하는 방법 1. https://fonts.google.com/ 로 간다 2. https://fonts.google.com/ 에서 원하는 폰트를 골라 + 버튼을 누른다 (한 번에 하나 할 필요 없이 장바구니에 물건 담듯 원하는 폰트가 많다면 모두 눌러도 상관 없다) 3. 아래에 뜬 Family Selected 를 눌러 창을 크게 만들고 자동 생성된 와 CSS 설정을 복사하여 코드로 가져간다 4. 아래와 같이 코드에 넣는다 (코드는 다수의 폰트를 클릭했을 경우를 가정해서 사용)테스트 페이지 h1 { font-family: 'Nanum Brush Script', cursive; } h2 { font-family: 'Do Hyeon', sans-serif; } h3 { font-family..

참고 : https://www.cssfontstack.com/참고 사이트를 보면 각 OS별로 어떤 font를 가지고 있는지 통계치를 알 수 있다CDN방식이 아닌 font를 사용할 경우 위 사이트를 참고하면 좋을 것 같다 font-size, font-family/* 글씨 크기와 폰트는 아래와 같이 설정 *//* 글씨 크기 : font-size *//* 글씨체 : font-family *//* cf) em은 상대적 크기로 상위 태그 기준으로 xN배 설정 *//* 참고 : http://zinee-world.tistory.com/131 */ body { font-size: 10px} p { font-family: Arial; /* p의 상위 태그인 body 태그를 기준으로 상대적 크기 설정 */ font-siz..

참고 : https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048 참고 링크에 모든 생성자가 정리되어 있으며 아래 생성자들은 자주 쓰이는 생성자에 대한 정리 ID selector, class Selector/* id selector : #id */ #firstid { color: #f442d7; border: black; border-width: 5px; border-style: solid; } /* class selector : .classname */ .firstclass{ color: rgb(0, 255, 0); } Star Selector/* Star *//* 페이지 내 모든 태그에 적용 */* ..

색깔 설정 방법 h1{ color: #f442d7; } h2{ color: rgb(0, 255, 0); } h3{ color: rgba(0, 255, 0, .5); } ul { color: blue; } 배경 설정 방법(색깔, 사진), border h1 { color: #f442d7; border: red; border-width: 5px; border-style: solid; /*아래와 같이 합쳐서 써도 괜찮다*/ /*border: 5px red solid;*/ } /* background에 색상을 설정하고 싶은 경우 */ body { background: black; } /* background에 사진을 설정하고 싶은 경우 */ body { background: url(https://images6.a..

일반적인 규칙 selector { property: value; property: value;} 외부 CSS연결 예제 Practice.htmlPractice CSS Hello world Practice apple orange banana Practice_css.cssh1{ color: red; } h2{ color: orange; } ul { color: blue; } 디자인(CSS위주) 참고 사이트 : http://www.csszengarden.com/