본문 바로가기

프로그래밍 언어/부트스트랩(Bootstrap)139

[bootstrap] 부트스트랩 – 목록(list), ol, ul 태그 목록을 나타내는 기본 태그는 ol, ul 인데요.ol : 순서 있는 목록 ul : 순성 없는 목록 불릿 기호나 순서가 목록 앞에 나타나게 되는데요. 부트스트랩에서는 불릿기호를 제거하려면 ul 태그에 .list-unstyled 선택자를 사용하면 됩니다. 과일 채소 .list-inline 선택자를 사용하면 목록이 좌우로 배열됩니다. Lorem ipsum dolor sit amet Nulla volutpat aliquam velit Faucibus porta lacus fringilla vel 목록 태그를 사용하면 기본적으로 목록이 들여쓰기 돼 있으나 부트스트랩 선택자를 사용하면 하위 목록을 포함해 들여쓰기가 모두 제거됩니다. 들여쓰기가 제거되는 것이 기본 설정이며 일정한 선택자의 배열이 있는 경우, 예를들어.. 2016. 1. 20.
[bootstrap] 부트스트랩 – kbd 태그 – 키보드로 입력한다는 것을 알려주는 용도 태그는 부트스트랩에서 키보드로 입력한다는 것을 알려주기 위해 사용합니다. 2016. 1. 20.
[bootstrap] 부트스트랩 – 인용(blockquote) 인용할 때는 태그를 사용합니다. 인용의 출처를 표시하기 위해 와 태그를 사용하여 글자를 흐리고 작게 할 수 있습니다. 글자를 오른쪽으로 정렬할 때는 .blockquote-reverse 선택자를 사용합니다. 2016. 1. 19.
[bootstrap] 부트스트랩 – 약어(title) 표시 부트스트랩에서 abbr 태그를 사용하면 약자를 본래 글자로 표시하는 기능을 하며 부트스트랩에 의해 물음표 표시가 나오기도 합니다. .initialism : 글자를 90%로 작게하고 대문자로 만듭니다. 부트스트랩에서는 글자가 가려지지 않게 오른쪽 아래에 약어가 표시됩니다. 2016. 1. 19.
[bootstrap] 부트스트랩 – 트랜스폼 클래스(Transformation classes)/대소문자 변경 부트스트랩의 영문 글자를 대문자 또는 소문자로 바꾸는 기능입니다..text-lowercase : 모두 소문자로 변경 .text-uppercase : 모두 대문자로 변경 .text-capitalize : 단어의 첫 글자만 대문자로 변경 Lowercased text. Uppercased text. Capitalized text. 2016. 1. 19.
[bootstrap] 부트스트랩 – 글자 정렬 클래스 부트스트랩에서 글자를 정렬하는 선택자입니다..text-left : 왼쪽 정렬 .text-center : 가운데 정렬 .text-right : 오른쪽 정렬 .text-justify : 긴 문장의 좌우 끝을 정렬(특히, 오른쪽 끝에 톱니 현상 방지) .text-nowrap : p 태그 내부의 문장을 한줄로 만들며 레이아웃의 범위를 벗어나게 합니다. 2016. 1. 19.
[bootstrap] 부트스트랩 – 약어(title) 표시 부트스트랩에서 abbr 태그를 사용하면 약자를 본래 글자로 표시하는 기능을 하며 부트스트랩에 의해 물음표 표시가 나오기도 합니다. .initialism : 글자를 90%로 작게하고 대문자로 만듭니다. 부트스트랩에서는 글자가 가려지지 않게 오른쪽 아래에 약어가 표시됩니다. 2016. 1. 19.
[bootstrap] 부트스트랩 – 각종 인라인 요소 글자 태그 부트스트랩의 각종 인라인 요소 글자 태그들을 알아보겠습니다. – 형광펜으로 칠한 것처럼 글자를 강조할 수 있는 태그입니다. 기본적으로 노란색 형광펜을 칠한 것처럼 나오지만 부트스트랩에서는 조금 더 연한 노란색으로 나타납니다. – 글자를 그대로 남기면서 삭제를 표시하는 기능을 합니다. – Strikethrough(취소선)의 약자로 더 이상 정확하지 않거나 적절하지 않다는 의미가 있는 태그입니다. del 태그와 동일하게 나타납니다. HTML5에서는 동일하게 표시되더라도 입력한 태그에 따라서 의미를 다르게 해석하는 시맨틱(Semantic) 기능이 있습니다. – 기존 문서에 글자가 추가됬다는 의미를 부여하는 태그입니다. 글자에 밑줄이 만들어 집니다. – 위 ins와 마찬가지로 밑줄이 그어지지만 의미가 다릅니다... 2016. 1. 15.
[bootstrap] 부트스트랩 그리드 – 전체폭 레이아웃 부트스트랩 그리드에서는 .container 선택자를 사용하는데요. .container 선택자에 -fluid만 추가하면 전체폭 레이아웃으로 변경됩니다. … 부트스트랩 2.0 버전에서는 .row 선택자도 .row-fluid로 같이 변경해야 했지만 3.0에서는 .container-fluid만 변경하면 됩니다. .container-fluid는 너비가 정해지지 않아서 부모 요소의 너비에 따라 좌우되며 주로 전체폭 레이아웃을 만들 때 사용합니다. 2016. 1. 15.
[bootstrap] 부트스트랩 그리드 – 컬럼 오프셋(Column Offset) 화면너비 768px 미만 768px 이상 992px 이상 1200px 이상 그리드 배열항상 가로배열가로 배열에서 위 수치에 이르면 세로 배열로 전환 .container 너비 없음 (항상 화면 전체너비) 750px970px1170px 클래스 선택자 접두어 .col-xs- (xs: extra small) .col-sm- (sm: small) .col-md- (md: medium) .col-lg- (lg: large) 거터(그리드 사이 여백) 크기 30px, 그리드 좌우측 15px 패딩 컬럼 오프셋이란 그리드를 일정 크기만큼 간격을 둘 수 있는 기능입니다. … 하나의 .row에 하나의 그리드만 있습니다. 해당 그리드의 크기만큼 오프셋 선택자를 추가하면 왼쪽으로부터 떨어져서 배치됩니다. 어떤 요소를 중앙 정렬하.. 2016. 1. 15.
[bootstrap] 부트스트랩 그리드 – 스마트폰에 적합한 그리드 선택자 배치 화면너비 768px 미만 768px 이상 992px 이상 1200px 이상 그리드 배열항상 가로배열가로 배열에서 위 수치에 이르면 세로 배열로 전환 .container 너비 없음 (항상 화면 전체너비) 750px970px1170px 클래스 선택자 접두어 .col-xs- (xs: extra small) .col-sm- (sm: small) .col-md- (md: medium) .col-lg- (lg: large) 거터(그리드 사이 여백) 크기 30px, 그리드 좌우측 15px 패딩 스마트폰처럼 좁은 화면에서는 모든 그리드가 좌우로 배열되면 폭이 너무 좁습니다. 그래서 마지막 .col-xs-6 의 총 합이 12가 넘게해서 마지막 그리드는 아래로 내려오게해서 폭을 넓게 사용할 수 있습니다. 다른 크기의 너비.. 2016. 1. 15.
[bootstrap] 부트스트랩 그리드 부트스트랩은 12열의 그리드 시스템을 사용합니다. 그리드의 사이즈는 입력한 클래스의 선택자에 따라 달라집니다. 화면너비 768px 미만 768px 이상 992px 이상 1200px 이상 그리드 배열항상 가로배열가로 배열에서 위 수치에 이르면 세로 배열로 전환 .container 너비 없음 (항상 화면 전체너비) 750px970px1170px 클래스 선택자 접두어 .col-xs- (xs: extra small) .col-sm- (sm: small) .col-md- (md: medium) .col-lg- (lg: large) 거터(그리드 사이 여백) 크기 30px, 그리드 좌우측 15px 패딩 가장 상위에 .container 선택자가, 그 바로 하위에 .row 선택자가, 그 다음 하위에 그리드를 만들기 위한.. 2016. 1. 15.
[bootstrap] 부트스트랩 그리드 – 컬럼 네스팅(Column Nesting) 화면너비 768px 미만 768px 이상 992px 이상 1200px 이상 그리드 배열항상 가로배열가로 배열에서 위 수치에 이르면 세로 배열로 전환 .container 너비 없음 (항상 화면 전체너비) 750px970px1170px 클래스 선택자 접두어 .col-xs- (xs: extra small) .col-sm- (sm: small) .col-md- (md: medium) .col-lg- (lg: large) 거터(그리드 사이 여백) 크기 30px, 그리드 좌우측 15px 패딩 이번에는 .row 부분을 복사해서 첫 번째 그리드의 콘텐츠를 지우고 붙여넣었습니다. 이렇게 내부에 레이아웃을 추가로 만들려면 .row가 있는 태그도 추가해야 합니다. 부모 그리드의 숫자가 8인데, 작식 그리드의 숫자의 합이 1.. 2016. 1. 15.
[bootstrap] 부트스트랩 그리드 – 그리드를 밀고 당기는 선택자 사용하기 화면너비 768px 미만 768px 이상 992px 이상 1200px 이상 그리드 배열항상 가로배열가로 배열에서 위 수치에 이르면 세로 배열로 전환 .container 너비 없음 (항상 화면 전체너비) 750px970px1170px 클래스 선택자 접두어 .col-xs- (xs: extra small) .col-sm- (sm: small) .col-md- (md: medium) .col-lg- (lg: large) 거터(그리드 사이 여백) 크기 30px, 그리드 좌우측 15px 패딩 좌측이 내용이고, 우측이 사이드바인 그리드입니다. 각 요소 맨 끝에 .col-md-push-4와 .col-md-pull-8 선택자를 추가했습니다. push와 pull은 왼쪽을 기준으로 하므로 push는 왼쪽에서 오른쪽으로 미는.. 2016. 1. 15.
[bootstrap] 부트스트랩 그리드 – 전통적인 페이지 레이아웃 화면너비 768px 미만 768px 이상 992px 이상 1200px 이상 그리드 배열항상 가로배열가로 배열에서 위 수치에 이르면 세로 배열로 전환 .container 너비 없음 (항상 화면 전체너비) 750px970px1170px 클래스 선택자 접두어 .col-xs- (xs: extra small) .col-sm- (sm: small) .col-md- (md: medium) .col-lg- (lg: large) 거터(그리드 사이 여백) 크기 30px, 그리드 좌우측 15px 패딩 좌측 내용과 우측에 사이드바가 있는 전통적인 그리드인데요. 좌측 그리드는 8을 우측 그리드는 4로 2:1 비율로 만들었습니다.… … 2016. 1. 15.

티스토리툴바