올리비아 코딩스쿨

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

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

Bootstrap의 장점 중의 하나는 반응형웹을 쉽게 구현할 수 있다는 점이다. 반응형, responsive이라는 뜻은 웹사이트가 화면이나 viewpoint의 크기에 재깍 반응한다는 것이다. 즉 태블릿, 모바일, 데스크탑에 따라 화면 구성이 바뀌어 사용자의 가독성을 높여준다. 이를 구현하기 위한 그리드 시스템에 관해 배워보자. 그 전에... ※ 칼럼을 비교하기 위해 배경색깔 넣기 1) 클래스로 삽입 bg-primary/secondary/success/danger/warning/info... 공식 문서 ----->클릭 2) 스타일로 넣기 ※ 비교하기 위해 경계 넣기 1. 모든 열을 균등하게 분배함 기본적으로 한 행에 있는 열의 개수 만큼 똑같이 등분한다. Column Column Column Column ..