올리비아 코딩스쿨

아이콘 사이즈 무료 아이콘을 가져올 수 있는 웹사이트를 알고 싶다면 폰트어썸 사이트를 참고하면 된다. fontawesome------------>클릭 만약 아이콘 크기를 키우고 싶다면, 1) 먼저 사이즈를 확인한다. 사이즈를 표현하는 방법은 상대적인 사이즈(relative sizing)와 문자적인 사이즈(literal sizing)이 있다. 상대적인 사이즈는 2xs부터 2xl 사이즈까지 있다. 문자적인 사이즈는 1x부터 시작된다. 2) 코드를 작성해보자. 방법은 두 가지가 있다. 첫 번째, 클래스에 fa-size를 추가한다. 두 번째는 CSS 코드로 적어준다. .feature-icons { font-size: 3rem; } .feature-icon { color: blue; } 아이콘 hover 사용자가..

text-align 내용을 정렬해보자. CSS의 text-align 속성을 이용한다. 값은 center, left, right, justify가 있다. div.a { text-align: center; } div.b { text-align: left; } div.c { text-align: right; } div.d { text-align: justify; } 아래 화면에서 글씨가 가운데 정렬이 되어 있다. 실제 HTML과 CSS를 비교해보면서 text-align코드를 확인해보자. 학생. 학생들이 주도가 되어 배움을 일으키는, 자기주도학습 선생님. 학생들의 진심어린 조언자, 학생들이 믿고 따르는 어른 학부모. 학교를 신뢰하고 지지해주고 힘을 복돋아주는 조력자. #features { padding: 10%..

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..