프로그래밍 검색 결과, 28
[Bootstrap] 그리드 시스템 (Grid System)
01 그리드 시스템 그리드(Grid)란 사전적인 의미로 격자, 눈금 등을 의미한다.그리드 시스템은 정적, 동적, 반응형 그리드 시스템으로 나누어 볼 수 있겠다. 여기서 정적인 그리드 시스템은 웹 페이지의 레이아웃의 폭이 고정되어 있는 시스템이며 동적인 그리드 시스템은 레이아웃의 폭이 브라우저의 크기에 따라 바뀌는 시스템이다. 반응형 그리드 시스템은 이용하는 기기에 따라 변경되는 화면 폭에 반응형으로 레이아웃이 바뀌는 시스템을 말한다.부트스트랩에서 그리드 시스템은 디바이스나 뷰포트 크기가 증가함에 따라 반응형으로 배열되는 최대 12개의 칼럼을 통해 쉽고 효율적으로 동적인 페이지의 레이아웃을 만들 수 있도록 도와준다. 이 12개의 열은 개별적으로 나타낼 수도 있으며 열을 그룹화하여 더 넓게 나타내게 할 수도..[Bootstrap] 부트스트랩 시작하기 (v3.3.7)
01 부트스트랩이란 부트스트랩은 쉽고 빠른 프론트엔드 웹 개발을 위해 설계된 HTML, CSS, JS 프레임워크이다.맞춤형 HTML, CSS 요소와 jQuery 플러그인을 제공하며 다양한 웹 브라우저 환경이나 스마트폰, 태블릿, 데스크탑에도 대응하여 크로스 브라우징(Cross Browsing)을 도와준다.트위터에서 오픈 소스로 공개되어 원래 있던 디자인을 그대로 사용하거나 누구나 마음대로 수정하여 자유롭게 배포하는 것도 가능하다.현재 계속 버전이 업데이트되고 있으며 현재 v4.0까지 나온 상태이지만 여기서는 v3.3.7으로 알아볼 것이다. 02 부트스트랩으로 제작된 사이트 이곳(http://expo.getbootstrap.com/)으로 이동하여 부트스트랩으로 만들어진 다양한 웹 사이트를 확인할 수 있다...[CSS] 9. 레이아웃을 제어하는 디스플레이(Display) 속성
1. 블록 요소와 인라인 요소 display 속성은 요소가 어떻게 표시되는지 여부를 결정한다. HTML의 대부분의 요소는 display 속성 값이 블록(block) 요소이거나 인라인(inline)요소라는 값 중 하나이다. 이들 요소의 각각의 특징은 다음과 같다. 1) 블록 요소 - 요소가 항상 새 줄에서 시작된다.- 화면에서 사용할 수 있는 전체 너비를 사용한다.- , ~, , , , , , , , , 요소 등이 여기에 속한다. 2) 인라인 요소 - 요소가 새 줄에서 시작하지 않고 한 줄에 차례로 배치된다.- 화면에서 필요한 만큼만 공간을 차지한다.- , , 요소 등이 여기에 속한다. 2. 기본 display값 변경하기 모든 요소에는 기본적으로 설정된 display 값이 있다. 하지만 필요에 따라서는 C..[CSS] 8. 테이블 스타일
1. 테이블 경계선 테이블에 다음과 같은 스타일을 주게 되면 table 요소의 경계선, th요소와 td요소의 경계선이 각각 별도로 생기게 되고 이중 경계선을 적용한 것 처럼 보인다. 1table, th, td { border: 2px solid black; }cs 경계선을 통합하려면 border-collapse 속성을 사용해 단일 선으로 표시할 수가 있다. 1234table, th, td { border: 2px solid black; border-collapse: collapse; }cs 수평으로 경계선을 주고 싶으면 border-bottom 속성을 활용한다. 12table { border-collapse: collapse; width: 100%; }th, td { text-align: left; bo..[CSS] 7. 박스 모델(Box Model)
1. 박스 모델 CSS에서 HTML의 모든 요소는 'Box'로 간주되어 웹 페이지 위에 그려지게 된다. CSS의 Box Model이란 요소를 감싸는 상자라고 생각할 수 있으며 각 박스마다 Margin(여백), Border(경계), Padding(패딩), Content(내용)으로 구성된다. 1) Content - 텍스트와 이미지가 나타나는 박스의 내용물 2) Padding - 내용 주위의 영역 (경계선 안쪽 영역) 3) Border - Content와 Padding을 감싸는 경계 4) Margin - 경계선 바깥쪽의 영역 2. 경계선(Border) 1) 경계선 스타일 경계선의 스타일은 border-style 속성을 사용해 설정한다. 2) 경계선 폭 border-width 속성으로 경계선의 폭을 설정할 수 ..[CSS] 6. 링크에 스타일 적용
1. 스타일 링크 HTML 링크에는 다양한 CSS 속성을 적용시킬 수 있고 또한 상태마다 다른 스타일을 지정해 주는 게 가능하다. 아무 스타일도 지정해 주지 않았을 때의 기본 링크 스타일 2. 네 가지 링크 상태 1) a:link : 아직 방문하지 않은 링크2) a:visited : 방문한 링크3) a:hover : 마우스를 올려놓을 때의 링크4) a:active : 클릭하는 순간의 링크 순서의 규칙 - a:hover는 a:link와 a:visited 뒤에 와야 함 - a:active는 반드시 a:hover 뒤에 와아 함 - 순서를 지키지 않고 작성하면 스타일이 적용되지 않을 수 있음 3. text-decoration 적용 주로 링크의 밑줄을 제거할 때 사용한다. 1234567891011121314151..[CSS] 5. 폰트 설정하기
1. 폰트 패밀리 설정 (font-family) 텍스트의 폰트를 지정하는 속성이다. 경우에 따라 브라우저가 폰트를 지원하지 않거나 사용자가 가지고 있지 않을 경우해당 폰트가 표시되지 않는데, 이를 대비하여 여러 개의 폰트를 함께 지정해 주어야 한다. 브라우저는 첫 번째로 지정해준 폰트를 지원하지 않으면 자동으로 다음 폰트로 대체시킨다. 각 폰트는 쉼표로 구분하고, 폰트 이름에 공백이 존재한다면 큰따옴표로 묶어주어야 한다. - Serif(Times New Roman, Georgia) : 글자 끝에 삐침이 있다.- Sans-serif(Arial, Verdana) : 글자 끝에 삐침이 없다.- Monospace(Courier New, Lucida Console) : 모든 글자의 너비가 같다. 2. 폰트 크기 ..[CSS] 4. 텍스트 서식 지정
1. 텍스트 색상 텍스트의 색상을 변경할 때는 color 속성을 사용한다. 12345678910111213 body { color: blue; } 글자 색상 변경하기 cs 2. 텍스트 정렬 텍스트 내용을 왼쪽, 오른쪽, 가운데 등으로 정렬하고 싶다면 text-align 속성을 사용한다.속성 값으로는 left(왼쪽 정렬), right(오른쪽 정렬), center(가운데 정렬), justify(양쪽 정렬)이 있다. 아래는 각각의 속성에 따라 어떻게 나타나는지 알아보기 위해 본문에 각기 다른 속성을 적용해 본 모습이다. 3. 텍스트 장식 text-decoration 속성을 사용하면 문자 위나 아래에 줄을 긋거나 이미 그어진 줄을 삭제할 수 있다.속성 값으로는 none, underline, overline, l..[CSS] 3. 배경 설정하기
1. 배경색 변경 background-color 속성을 이용해 요소의 배경 색상을 설정할 수 있다. 색상을 설정할 땐 색상명, rgb코드, hex코드 등의 방법을 통해 설정한다. (이전 포스팅 참고)아래는 각각의 요소를 다른 배경색상으로 칠하는 예제이다. 123456789101112131415161718 body { background-color: #FFFFB6 } h1 { background-color: #FFBB00 } p.p1 { background-color: crimson } p.p2 { background-color: darkgreen } CSS background color first paragraph second paragraph Colored by Color Scriptercs 2. 배경..