모래알 반응 형 웹 
 전 상하 
 부트스트랩 	 ( 8 ) 
 홈페이지 제작 일반 	 ( 3 ) 
 Bootstrap 4 ( 부트스트랩 ) . . 
 크롬 ( Chrome ) 개발자 도구 , .. 
 김현 17 IT 
 html 5 r 기본 구조 
 검색 엔진 봇 
 부트스트랩 구성 요소 
 부트스트랩 badge 
 격자 형 레이아웃 
 bootstrap 구성 요소 
 Boowser width 
 bootstrap breafcrumb 
 부트스트랩 구성 요소 
 반응 형 레이아웃 
 Bootstrap 4 ( 부트스트랩 ) 구성 요소 , Breadcrumb 
 웹 페이지 의 현 위치 를 알리 는 부분 . ..., . .. 로 적용 할 수 도 있 고 부트스트랩 의 기본 column 에 적용 할 수 있 다 . Home Home Library Home Library Data Home Library Data Home Library Data 분리 기호 의 수정 위 의 예 제대로 하 면 Home / Library / Data 와 같이 표현 된다 . 각 페이지 항목 의 분리 기호 가 기본 적 으로 는 '/' 로 설정 되 어 있 다 . 분리 기호 ( separator ) 는 css 를 수정 하 여 변경 할 수 있 다 . 이미 설명 한 바 있 는 크롬 의 개발자 도구 로 검사 해 보 면 어떤 CSS 가 여기 에 관여 하 고 있 는 지 알 수 있 다 . 이러 한 분리 기호 는 대개 CSS 의 : : before 로 설정 된다 . [ 참조 ] 크롬 ( Chrome ) 개발자 도구 , 검사 http : / / passauer 1 . . 
 부트스트랩 2018 . 04 . 23 15 : 22 
 Bootstrap 4 ( 부트스트랩 ) 구성 요소 , Badges 
 Badge 는 게시판 이나 쇼핑몰 상품 목록 에서 ' new ', ' hot ' 등 의 표식 을 달 아 주 거나 , 장바구니 에 담긴 상품 의 숫자 등 을 표시 하 는 데 주로 사용 된다 . Badge 의 크기 는 적용 되 는 부모 요소 ( parent element ) 의 크기 를 그대로 따른다 . Example heading New Example heading New Example heading New Example heading New Example heading New Example heading New Notifications 4 Basge 의 색상 Alert 와 마찬가지 로 Badge 에 도 부트스트랩 에서 제공 하 는 8 가지 색상 을 부여 할 수 있 다 . Primary Secondary Success Danger Warning Info Light Dark Pill ba . . 
 부트스트랩 2018 . 04 . 19 17 : 19 
 Bootstrap 4 ( 부트스트랩 ) 구성 요소 , Alert 
 Alert ( 알람 ) 은 방문자 에게 보내 는 경고 메시지 를 보여 줄 때 사용 하 는 것 이 지만 텍스트 박스 와 같이 사용 해도 괜찮 다 . Jquery 를 이용 하 여 경고 메시지 를 보여 주 고 경고 메시지 를 닫 는 기능 을 활용 할 수 있 다 . Alert 의 색상 Bootstrap 4 는 primary , secondary , success , danger , warning , info , light , dark 의 8 개 색상 을 지원 한다 . 이 색상 은 bootstrap . css 에서 변경 할 수 있 으며 css 를 통해 나 만 의 색상 을 부여 할 수 도 있 다 . A simple primary alert with an example link . Give it a click if you like . A simple secondary alert with an example link . Give . . 
 부트스트랩 2018 . 04 . 19 16 : 35 
 크롬 ( Chrome ) 개발자 도구 , 검사 
 웹 페이지 작업 을 할 때 반드시 알 아 두 어야 할 크롬 ( Chrome ) 의 개발자 도구 , 즉 검사 기능 이 다 . 크롬 개발자 도구 에 대하 여 많 은 글 들 이 있 다 . 하지만 전문 성 을 곁들여 설명 을 하 고 있 어 대체로 처음 사용 자 에게 는 어렵 게 느껴진다 . 여기 에서 는 크롬 개발자 도구 에서 늘 사용 하 는 기능 만 간단 하 게 소개 하 겠 다 . 크롬 의 개발자 도구 는 F 12 , Ctrl + Shift + I , 마우스 오른쪽 메뉴 ' 검사 ' 로 실행 할 수 있 다 . 크롬 의 개발자 도구 는 HTML 소스 영역 , 적용 된 CSS 영역 , 페이지 의 에러 메시지 를 보여 주 는 Console 영역 으로 삼 분할 되 어 있 다 . 이미 이전 포스팅 반응 형 테스트 ( Responsive Tester ) , http : / / passauer 1083 . tistory . com / 19 에서 소개 한 바 있 는 브라우저 의 크기 를 테스트 할 수 . . 
 홈페이지 제작 일반 2018 . 03 . 31 14 : 00 
 반응 형 테스트 ( Responsive Tester ) 
 반응 형 홈페이지 를 만들 때 각각 의 화면 너비 에 맞 게 반응 형 이 잘 되 고 있 는 지 확인 할 필요 가 있 다 . 수많 은 모바일 기기 들 을 모두 준비 해서 하나하나 확인 하 는 것 이 최상 이 겠 지만 ( 실제로 이렇게 하 는 사람 들 을 본 적 이 있 다 . ) 크롬 브라우저 에서 간단 하 게 확인 할 수 있 다 . 아래 에 2 개 의 크롬 확장 프로그램 과 다음 에서 제공 하 는 사이트 를 소개 한다 . 하지만 가장 정확 한 브라우저 사이즈 조절 은 크롬 의 개발자 도구 ( F 12 ) 에서 반응 형 을 체크 하 는 것 이 다 . 먼저 크롬 개발자 도구 에 있 는 내용 을 살펴보 자 . 현재 화면 에서 F 12 눌러서 개발자 도구 를 띄우 고 왼쪽 위 의 아이콘 을 클릭 . 아래 화면 에서 빨갛 게 표시 된 부분 에 화면 의 크기 를 입력 하 면 가장 정확 한 브라우저 사이즈 로 현재 의 웹 페이지 를 체크 할 수 있 다 . Responsive Web . . 
 홈페이지 제작 일반 2018 . 03 . 30 15 : 04 
 Bootstrap 4 ( 부트스트랩 ) , 반응 형 레이아웃 , 격자 형 레이아웃 시스템 ( 2 / 2 ) 
 부트스트랩 의 격자 형 레이아웃 시스템 ( Grid Layout System ) 은 이전 에 포스팅 한 내용 이 주로 사용 된다 . 오늘 설명 할 부분 은 Bootstrap 4 에서 추가 된 기능 들 로 이런 것 도 있 다는 것 을 알 고 필요 에 따라 사용 하 면 된다 . 그러므로 아래 링크 의 격자 형 레이아웃 시스템 ( 1 / 2 ) 를 먼저 충분히 이해 하 는 것 이 중요 하 다 . Bootstrap 4 ( 부트스트랩 ) , 반응 형 레이아웃 , 격자 형 레이아웃 시스템 ( 1 / 2 ) http : / / passauer 1083 . tistory . com / 18 Variable width content 컨텐츠 의 내용 에 따라 너비 가 가변 적 으로 변한다 . 1 of 3 Variable width content 3 of 31 of 3 Variable width content 3 of 3 1 of 3 Variable widt . . 
 부트스트랩 2018 . 03 . 30 13 : 59 
 막걸리 마시 면 머리 아픈 이유 
 난 막걸리 만 마시 면 머리 가 아프 다 . 일반 적 인 쌀 막걸리 보다 생 막걸리 의 경우 머리 아픈 현상 이 더 심하 다 . 그래서 막걸리 에 대해 나름 조사 를 해 봤 다 . 우리 나라 의 술 은 대개 쌀 과 누룩 , 물 을 원료 로 해서 빚 는다 . 쌀 과 누룩 물 로 만든 수 를 체 에 부 어 거르 면 탁주 가 된다 . 탁주 를 또 다시 걸러서 맑 은 술 만 떠내 면 맑 은 술 , 청주 가 된다 . 탁주 에 열 을 가해서 증류 시키 면 정류 주인 소주 가 되 고 탁주 에서 청주 를 걸러 내 고 남 은 술 에 물 을 더 넣 어서 거칠 게 걸러낸 술 이 ' 막걸리 ' 다 . 막걸리 먹 으면 머리 가 아픈 숙취 의 원인 은 아직 과학 적 으로 규명 되 지 않 고 있 다 . 일반 적 으로 알코올 의 분해 과정 에서 생성 되 는 ' 아세트알데히드 ' 와 발효 과정 에서 생성 되 는 메탄올 등 이 숙취 의 원인 으로 알려져 있 다 . 이 는 막걸리 뿐 만 아니 라 다른 술 도 마 . . 
 일상 2018 . 03 . 29 14 : 54 
 Bootstrap 4 ( 부트스트랩 ) , 반응 형 레이아웃 , 격자 형 레이아웃 시스템 ( 1 / 2 ) 
 부트스트랩 ( Bootstrap ) 은 화면 의 너비 를 12 분 할 ( 12 격자 , Grid ) 하 여 웹 페이지 를 만든다 . Bootstrap 3 의 격자 형 레이아웃 시스템 ( Grid Layout System ) 은 4 가지 화면 너비 를 기준 으로 반응 하 도록 정의 되 어 있 었 다 . 768 px 미만 ( 스마트폰 ) , 768 px 이상 ( 태블릿 ) , 992 px 이상 ( 작 은 화면 의 데스크 탑 ) , 1200 px 이상 ( 큰 화면 의 데스크 탑 ) 에 따라 신축성 있 게 화면 이 바뀌 어 반응 형 이 가능 하 도록 했 다 . Bootstrap 4 부터 는 이 격자 형 레이아웃 시스템 이 더 정교 하 고 세밀 하 게 발전 했 다 . 화면 의 너비 를 12 분할 하 는 것 은 동일 하 지만 반응 하 는 화면 의 기준 너비 는 4 가지 에서 5 가지 로 세분 화 되 었 다 . Extra small col - md - 4 col - md - 4 col - md - 4 col - m . . 
 부트스트랩 2018 . 03 . 29 10 : 30 
 검색 엔진 로봇 접근 금지 
 홈페이지 를 제작 하 는 중 이 거나 홈페이지 의 특정 내용 을 검색 엔진 이 가져가 게 하 고 싶 지 않 을 때 다음 과 같이 설정 한 파일 을 서버 에 업로드 해 두 면 된다 . 서버 루트 에 다음 과 같 은 내용 으로 robots . txt 라는 이름 을 가진 파일 을 만들 고 이 파일 을 서버 루트 에 두 면 규정 을 지키 는 검색 엔진 들 ( 구글 등 ) 의 검색 로봇 이 서버 의 웹 사이트 들 을 뒤지 지 못한다 . [ robots . txt 내용 ] User - agent : * Disallow : / 웹 작업 을 할 때 잠시 검색 엔진 로봇 이 웹 페이지 내용 을 가져가 지 못하 게 할 때 , 사이트 를 다 만들 고 나 면 풀 어야 한다 . 
 홈페이지 제작 일반 2018 . 03 . 29 09 : 48 
 Bootstrap 4 ( 부트스트랩 ) , 지원 브라우저 와 디바이스 
 크로스 브라우징 ( Cross Browsing ) 이 란 웹 페이지 를 만들 때 W 3 C 의 web standard ( 웹 규격 : 흔히 웹 표준 이 라고 도 한다 ) 에 맞 는 코딩 을 함 으로써 어느 브라 우 져 에서 나 기기 에서 사이트 가 제대로 보여 지 고 작동 되 도록 하 는 것 을 말 한다 . 인터넷 익스플로러 가 크로스 브라우징 에서 항상 문제 를 일으키 는 데 이유 는 인터넷 익스플로러 가 웹 규격 을 따르 지 않 기 때문 이 다 . 실무 에서 고객 들 은 그래도 " 인터넷 익스플로러 에서 홈페이지 가 잘 돌아가 야 하 지 않 느냐 ? " 고 말 한다 . 인터넷 익스플로러 의 점유 율 이 현저히 낮 아 지 고 있 고 , 만 3 세 이상 인구 의 88 . 5 % 가 모바일 인터넷 이용자 라는 사실 을 명확 하 게 인식 할 필요 가 있 다 . 인터넷 익스플로러 를 고수 할 것 인지 모바일 을 버릴 것 인지 ? [ 참조 ] 구글 크롬 점유 율 60 % 육박 … IE . . 
 부트스트랩 2018 . 03 . 29 09 : 33