올리비아 코딩스쿨

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를 클릭하면 아래의 화면이 나온다. 그러면..

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

-부트스트랩 5.02버전을 기본으로 한다- 1. 기본 코드 작성하기 연락처 2. 태그에 클래스 넣기 navbar navbar-nav nav-item nav-link 연락처 3. 하이퍼링크 넣기 href="" 연락처 사진 영상 4. 글씨 옆으로 배열하기, 크기 navbar-expand 아래의 사이즈에 따라 네비게이션 바가 수직으로 바뀌는 시점을 결정한다. {-sm|-md|-lg|-xl|-xxl} 5. 네비게이션 바에 배경색깔 넣기 ' bg ' 다음에 ' - ' 다음에 '배경 색깔'을 넣는다. primary 파랑색 secondary 회색 success 초록색 info 연한 하늘색 warning 노랑색 danger 빨강색 dark 검정색 light 흰색 6. 네비게이션 바 안의 텍스트 색깔 넣기 navbar-..

웹디자인을 설계하는 세 가지 방법을 소개한다. 러프한 방법에서 정교한 방법으로 나아간다. 1. 와이어프레임 wireframing - 저충실도 - 신속 - 제작 에너지 소모 낮음 연필과 종이 한 장을 가지고 만들어 낸다. 코드를 쓰기 전에 디자인과 내용에 대해 다른 사람들의 의견도 받고, 그걸 바탕으로 개선 발전해 나갈텐데 그때 하는 디자인 설계를 와이어프레임이라고 한다. 와이어프레임은 신속하고 대략적으로 디자인하는 것이 핵심이다. 2. 목업 Mock-up - 고충실도 - 정교함 - 제작 에너지 소모 높음 웹사이트 디자인을 실제와 비슷하게 표현한다는 의미이다. 작동이 되는 과정을 스크린샷으로 찍어 보여주는 것처럼, 각 화면에 대한 정교한 설계가 필요하다. 미래의 웹사이트 화면을 정확히 보여주기 위해 만든다..