본문 바로가기

웹어플리케이션15

thumnail [HTML / CSS] BOOT_STRAP 1. 부트스트랩 세팅 부트스트랩 link 부트스트랩 CSS link 코드 에 추가 부트 스트랩 JS link 코드 끝 줄에 추가 Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com 2. 부트스트랩 그리드 부트스트랩 그리드 시스템 구성 컨테이너 (container) 행 (row) 열 (column) 기본규칙 컨테이너 -> 행 -> 열 -> 내용 순으로 클래스가 정렬되어야 함.(컨테이너는 행을 감싸고 행은 열을 감싸고 열은 내용을 감싼다.) 입력하는 내용 사용법 부트스트랩 그리드 는 한줄에 기본적으로 12칸의 열(colnm)이 있음. class="col-숫자"는 열 몇 칸을 차지하는 cloumn 인지에 대한 구.. 2020. 1. 13.
thumnail [HTML / CSS] 반응형 웹 (Responsive Web) 반응형 웹 (Responsive Web) 브라우저(화면) 크기에 따라 요소의 크기와 배치가 유동적으로 변하는 웹 CSS "@media" 설정으로 브라우저 크기에 맞춘 요소 설정을 변경할 수 있다. 반응형웹 만드는 CSS 설정 브라우저 넓이 조건에 맞추어 요소의 크기와 배치 방법을 변경할 수 있습니다. 2020. 1. 10.
thumnail [HTML / CSS] CSS 상속 / 우선순위 1. CSS 상속 부모 요소의 속성 -> 자식 요소에도 자동 적용되는 것 "margin" 등 상속 시 문제가 될 만 한 속성은 상속되지 않는다. 어지간한 폰트 / 컬러 / 정렬 관련 속성은 상속된다. color font-family font-size font-weight font-height line-height list-style text-align visibility 등등 태그에는 폰트 / 컬러/ 정렬 관련 속성도 기본적으로는 상속되지 않는다. 태그에 상속 시키기 위해서는 해당 속성에 "inherit" 값 설정 홈 화면로 이동합니다! 2. CSS 적용 우선순위 A. 순서 : 동일한 선택자가 뒤에 나오면 이전 스타일 내용을 덮어 씀. CSS ORDER B. 명시도 : 동일한 요소를 지정하지만 선택자가 .. 2019. 12. 30.
thumnail [HTML / CSS] 구글 폰트 사용 / 폰트 파일 사용 1. 폰트 파일 사용하는 방법 폰트 파일을 다운받아 웹 페이지에 적용시키는 방법 /* 본인이 가지고 있는 폰트 파일을 사용하는 방법 */ /* 폰트 css파일로 불러오기 */ @font-face{ src: url("폰트 저장 경로/파일명"); font-family: "임의 지정 폰트명" } /* 불러온 폰트 요소에 적용시키기 */ div { font-family: "임의 지정 폰트명" } 2. 구글 폰트 사용하는 방법 구글에서 제공하는 폰트를 끌고와서 사용하는 방법 font.google.com으로 접속 / 한글폰트 "link"태그로 폰트 연결 후 불러오기 2019. 12. 28.