올리비아 코딩스쿨

rotation() CSS함수 중에 rotation() 가 있다. 인자의 각도, 양 만큼 회전 시켜 주는 함수이다. 인자에 들어가는 단위로 deg, turn, rad를 쓴다. 일반적으로는 degree의 약자인 deg를 많이 사용하며, 우리가 아는 각도의 개념이다. transform: rotate(0); transform: rotate(90deg); transform: rotate(-0.25turn); transform: rotate(3.142rad); HTML 기본값 회전하기 CSS .default_rotation{ width: 100px; height: 100px; background-color:lightblue; } .rotation { width: 100px; height: 100px; transf..

bootstrap에서 button을 넣고 배경색깔, 태그, outline, size 기능을 사용하는 방법을 알아보자. 1. 배경색깔 부트스트랩의 기본 버튼은 아래와 같다. 각 버튼에 쓰여져 있는 단어가 해당 버튼의 배경색깔 이름이다. Primary Secondary Success Danger Warning Info Light Dark Link 2. 다양한 태그 버튼의 기본 태그는 이다. 하지만 태그와 버튼이 함께 쓰이는 것을 알 수 있는데, 다른 사이트로 연결될 때는 a를 쓰고, 무엇인가를 제출해야 할 때는 input을 쓴다. 3. 아웃라인(테두리) 버튼의 바깥 경계인 테두리에 아웃라인을 줄 수 있다. class에 btn-outline-색깔을 명시한다. Primary Secondary Success Da..

부트스트랩에서 구글 폰트를 적용하는 방법을 배우자. 1. 구글 폰트에 접속한다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 언어를 선택한다. 한국어라면 korean/한국어를 선택한다. 3. 마음에 드는 글꼴을 선택한 후, 사이즈를 조절한다. 4. + 더하기 버튼을 눌러 폰트패밀리에 추가한다. 5. 링크를 head에 임배드(embed)한다. 6. CSS 코드를 넣는다. font-family: 'Cute Font', cursive; font-family: 'Hi Melody', cursive; font-family: 'P..

Container 컨테이너는 부트스트랩에서 기본이 되는 블록이다. 흔히 건축에서 컨테이너 박스라고 말하는데, 컨테이너는 직사각형 모양의 틀이라고 본다. 부트스트랩에서 컨테이너는 기본이 되는 상자이고, 그 안에 컨텐츠들이 들어간다. 그냥 컨텐츠를 배열하지 않고 컨테이너를 쓰는 이유가 있다. 컨테이너를 쓰면 배열, 정렬, 패딩, 마진 등을 적용하기가 용이하다. 컨테이너에는 3가지 종류가 있다. 첫 번째는 그냥 컨테이너(container)다. 이것은 화면의 최대 너비가 뷰포인트에 따라 조절되는 반응형이다. 뷰포인트가 다음 breakpoint가 되기 전까지는 해당 너비를 유지한다. 다만, 너비가 점프하듯 자연스럽지 않고, 끊어지는 느낌으로 변경된다. 두 번째는 반응형인 컨테이너-사이즈(container - br..

간단한 일러스트레이트, 아이콘을 구할 수 있는 사이트이다. 웹사이트를 제작할 때 필요한 유용한 아이콘이 필요하다면 이곳을 방문해보자. 모두 무료이다. (단 프로버전을 이용하고 싶다면 구독료를 지불해야한다.) https://fontawesome.com/ Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com 우선 해당 사이트를 무료로 사용하기 위해 이메일을 보내서 키트 코드를 받는다. 이메일을 입력해서 send kit code를 클릭하면 아래의 화면이 나온다. 그러면..