css5 Bootstrap4 알아보기#1 _ container 속성 Bootstrap Bootstrap은 빠르고 쉬운 웹 개발을 위한 무료 프런트 엔드 프레임워크입니다. Bootstrap은 반응형 디자인을 쉽게 만들 수 있는 기능도 제공합니다! Bootstrap의 장점 사용하기 쉬움: HTML 및 CSS에 대한 기본 지식만 있으면 누구나 Bootstrap 사용을 시작할 수 있습니다. 반응형 기능: Bootstrap의 반응형 CSS는 휴대폰, 태블릿 및 데스크탑에 맞게 조정됩니다. 모바일 우선 접근 방식: Bootstrap에서 모바일 우선 스타일은 핵심 프레임워크의 일부입니다. 브라우저 호환성: Bootstrap 4는 모든 최신 브라우저(Chrome, Firefox, Internet Explorer 10+, Edge, Safari 및 Opera)와 호환됩니다. ㄴ 출처 :.. 2023. 5. 12. CSS 표현하기 #3 CSS 폰트, 테이블, 마진, 패딩 기본 설정 font-* 속성 : 서체 크기, 스타일, 굵기 조절 p{ font-size : 11pt; font-style : ltalic; font-weight : bold; } 텍스트 정렬 text-align: center; // left, right, center, justify(양끝 정렬), auot(기본 정렬) - 세로 정렬 vertical-align: text-top 텍스트 상단에 정렬 텍스트 인덴트 : 단락의 들여쓰기 text-indent : 5em; 텍스트 컬러 설정 : color: #FF00FF; 배경 설정 background-color: gray; 배경 이미지 background-image: url("/a.png") background-repeat: - repeat (배경 이미지를 가로 세로로 연속.. 2021. 7. 28. CSS 표현하기 #2 CSS 기본 정의 타입 선택자 - HTML 요소명, 요소의 클래스 속성 값, ID 값 ex) h1 {color: pink;} - 전체 적용 되어짐 - 만일 단란 중 특정 단락만 css 적용을 하고 싶다면 - 클래스 선택자 ex) - 동일 class 가질 수 있다. 그룹으로 묶는 개념으로 보면 된다. .myhtml { color: gray; font-weight: blod; } - ID 선택자 - 문서 유일의 값 - #pink { color: grey; font-weight: blod; } - 그룹 지정하기 h1, h2, h3, #pink { color: brown; } - pink ID도 같은 그룹으로 지정할 수 있다. ,를 사용 - 고급 선택자 - 특정 요소의 하위 요소는 - 자손 요소가 되어진다. - 하위 선택자 : .. 2021. 7. 23. CSS 표현하기 #1 CSS 기본 이해 CSS - HTML 요소에 스타일 적용을 하기 위해서 - 디자인을 정의, 관리, 재활용하는데 용이하다. - 하나의 css 파일은 다수의 html 에서 사용할 수 있다. - CSS 파일을 만들어 HTML에 연결 (가장 권장) -> 텍스트 크기 및 스타일, 요소들의 레이아웃, 그림 등의 크기 테두리, 배경 색, 화면 전환이나 요소 움직임 CSS 기술방식 - 선택자 { 속성 선언 } ex) h1{font-size: 1.5em;} h2{ width: 300px; height: 50px; font-size: 1.5em; color: red; font-weight: blod; } > style 요소를 사용한 CSS 적용 부분에 선택자를 이용하여 style 요소 정의 > 외부 CSS 파일 HTML 문서에 연결 1. .. 2021. 7. 19. 이전 1 2 다음 728x90 반응형
