Bootstrap - [Utilities] - Utilities, 색상, 배경색, .d-block, .d-*-block
Chap.3 Bootstrap4[Utilities] - Utilities, 배경색, .d-block, .d-*-block Bootstrap4 Utilities Utilities, 색상, 배경색, .d-block, .d-*-block Bootstrap4 Utilities .border, .boarder-*-* .border- .rounded, .rounded-* .clearfix, .float-left, .float-right Float left Float right .mx-auto : 중앙 정렬 Centered .w-25, .w-50, .w-75, .w-100, .mw-100 Width 25% Width 50% Width 75% Width 100% Max Width 100% .h-25, .h-50, .h..
2020. 8. 10.
Bootstrap - [주요 화면 구성] - Navs, Navbar, Card, Form
Chap.3 Bootstrap4[주요 화면 구성] - Navs, Navbar, Card, Form Bootstrap4[주요 화면 구성] Navs, Navbar, Card, Form Navs .nav, .nav-item, .nav-link Link Link Link Disabled .ustify-content-center, .ustify-content-end : 정렬 .flex-column Link Link Link Disabled .nav-tabs, .active Active Link Link Disabled .nav-pills Active Link Link Disabled .nav-justified : 균등 분할 .. .. Navbar 반응형 .navbar, .navbar-expand-sm - navb..
2020. 8. 8.
Bootstrap - [활용] - Jumbotron, Alert, Button, Button Group, Badges, Progress Bar, Pagination
Chap.3 Bootstrap4[활용] - Jumbotron, Alert, Button, Button Group, Badges, Progress Bar, Pagination Bootstrap4[활용] Jumbotron, Alert, Button, Button Group, Badges, Progress Bar, Pagination Jumbotron .jumbotron, jumbotron-fluid 이미지 위 글씨 Bootstrap Tutorial Bootstrap is the most popular HTML, CSS... Bootstrap Tutorial Bootstrap is the most popular HTML, CSS... Alert .alert - .alert-success - .alert-inf..
2020. 8. 8.
Bootstrap - [기초] - Bootstrap4, Grid System, Text, Typography, 테이블, 이미지
Chap.3 Bootstrap4[기초] - Bootstrap4, Grid System, Text, Typography, 테이블, 이미지 Bootstrap4[기초] Bootstrap4, Grid System, Text, Typography, 테이블, 이미지 Bootstrap4 CDN 다운로드 없이 링크로 외부에 있는 CSS파일 포함. HTML 템플릿 확장팩 Bootstrap4, Font 설치 파일 > 폴더 열기 > BT4 > ex.01.html > b4-$ 입력시 기본템플릿 Container - .container ▪ 반응 형 고정 너비 컨테이너를 제공 (중앙) - .container-fluid ▪ 뷰포트의 전체 너비에 걸쳐 전체 너비 컨테이너를 제공 My First Bootstrap Page This i..
2020. 8. 8.
CSS - [CSS3 속성] - CSS3 단위, 키워드 단위, 크기 단위, 색상 단위, URL 단위, 박스 속성, display 속성, 배경 속성, font속성, text속성, 위치 속성, float속성, 그림자 속성
Chap.2 CSS3[CSS3 속성] - CSS3 단위, 키워드 단위, 크기 단위, 색상 단위, URL 단위, 박스 속성, display 속성, 배경 속성, font속성, text속성, 위치 속성, float속성, 그림자 속성 CSS3 속성 CSS3 단위, 키워드 단위, 크기 단위, 색상 단위, URL 단위, 박스 속성, display 속성, 배경 속성, font속성 CSS3 단위 CSS3 단위 - 키워드 - 크기 - 색상 - URL 키워드 단위 키워드를 스타일 값으로 입력 - big, middle, small 등 → 키워드에 해당하는 스타일이 자동으로 적용 통합 개발 환경에서는 입력한 속성에 속한 키워드를 자동으로 알려줌 크기 단위 크기 단위 - CSS3에서 가장 많이 사용하는 단위 - %, em, m..
2020. 7. 30.
CSS - [CSS3 선택자] - 선택자 개요, 기본 선택자, 속성 선택자, 후손 선택자, 자손 선택자, 반응 선택자, 상태 선택자, 구조 선택자
Chap.2 CSS3[CSS3 선택자] - 선택자 개요, 기본 선택자, 속성 선택자, 후손 선택자, 자손 선택자, 반응 선택자, 상태 선택자, 구조 선택자 CSS3 선택자 선택자 개요, 기본 선택자, 속성 선택자, 후손 선택자, 자손 선택자, 반응 선택자, 상태 선택자, 구조 선택자 선택자 개요 CSS3 선택자 - 특정한 HTML 태그를 선택할 때 사용하는 기능 - 선택한 태그에 원하는 스타일이나 스크립트 적용 가능 CSS 블록 - style 태그 내부에 입력 스타일시트 - style 태그 내부에 입력하는 코드 CSS3 선택자 기본 선택자 기본 선택자 전체 선택자 적용하기 - default_wildcard.html - 모든 태그의 color 스타일 속성을 red로 변경 제목 글자 태그 Lorem ipsu..
2020. 7. 30.
HTML - [HTML5 기본 태그] - 제목 글자 태그, 본문 태그, 하이퍼링크 태그, 글자 모양 태그, 목록 태그, 테이블 태그, 이미지 태그, 기본 공간 분할 태그, 시맨틱 태그, 입력 양식 태그
Chap.1 HTML[HTML5 기본 태그] - 제목 글자 태그, 본문 태그, 하이퍼링크 태그, 글자 모양 태그, 목록 태그, 테이블 태그, 이미지 태그, 기본 공간 분할 태그, 시맨틱 태그, 입력 양식 태그 HTML5 기본 태그 제목 글자 태그, 본문 태그, 하이퍼링크 태그, 글자 모양 태그, 목록 태그, 테이블 태그, 이미지 태그, 기본 공간 분할 태그, 시맨틱 태그, 입력 양식 태그 제목 글자 태그 제목 글자 태그 - 문서의 제목을 표현할 때 사용 - h : Heading을 의미 text_header.html 제목 글자 태그 1 제목 글자 태그 2 제목 글자 태그 3 제목 글자 태그 4 제목 글자 태그 5 제목 글자 태그 6 결과 특수문자 표기 - 연속된 공백을 모두 표시하려면 사용 - 외에 다음과..
2020. 7. 30.
