올리비아 코딩스쿨

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

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

부트스트랩은 CDN을 사용하기 때문에, bootstrap의 데이터를 다운로드하는 속도가 빠르다. 그리고 만약 사용자가 과거에 해당 데이터를 캐시했다면 속도는 더욱 빠를 것이다. 관련 설명 --------------------->클릭 지금부터 부트스트랩을 설치하는 두 가지 방법을 소개한다. 첫 번째, 공식문서에 올려진 코드를 붙여넣는다. 다큐먼트 ------------->클릭 1)CSS 예컨데 CSS파일을 설치한다고 하면, stylesheet link를 head 부분에 붙여넣는다. 붙여넣을 link 코드이다. 아톰에서 index.html파일의 head부분에 넣는다, body의 h1태그에 "안녕 올리비아"라고 써보자. 그러면 다른 CSS를 덧붙이지 않았음에도, 부트스트랩 CSS가 적용되어 화면에 나타나는 것..

인터넷 인터넷은 모든 해저 케이블을 통해 국가와 국가 간에 연결되어 있고, 통신이 전달된다. 아래의 그림은 우리나라의 인터넷이 타 국가들과 어떻게 연결되어 있는지 보여주는 그림이다. submarinecablemap.com에서 볼 수 있다,-------------->클릭 예를 들어 내가 접속하고자하는 웹사이트 서버가 캄보디아에 있다고 하자. 대한민국에서 내가 요청을 보내면, 해양케이블을 여러번 통과해서 캄보디아에 도착한다. 해당 요청이 수신되면 서버는 HTML, CSS, Javascript 같은 파일을 대한민국의 내 브라우저로 인터넷을 통과해 보내고, 내 웹사이트에 표시된다 이 경로는 마치 해외여행을 가는 것과 같다. 그곳까지 가는데 그리고 돌아오는데 긴긴 과정을 거쳐야 한다. 경로가 길 수록 초고속 인터..