본문 바로가기

html, css, bootstrap38

Bootstrap http://bootstrapk.com/getting-started/ 시작하기 · 부트스트랩 부트스트랩은 프레임워크와 함께 일하기 위해 편리한 방법으로 빌드시스템으로 Grunt 를 사용합니다. 그것은 우리의 코드를 컴파일하고, 테스트하고, 그 밖에 몇몇 처리를 도와줍니다. Grunt 설치 bootstrapk.com 1. cdn 복사 2. html 파일에 붙여넣기 link rel="stylesheet" 2개는 title 아래 script 는 body 태그 아래 위치 3. jquery google cdn 은 구글에 검색해서 나오는 src 아무거나 사용 가능. body 태그 아래 위치 2022. 11. 4.
1104_css 1. backgroud-color : 색상지정 2. background : background-color, image, repeat, attachment, position 의 축약형 -요소의 최소 높이 지정 -height 속성값을 무효화시킴 영역의 하위 요소들이 작더라도 최소 길이를 유지하면서 하위 요소들이 많아져 높이가 min-height 값을 초과 하면 자동으로 확장 - width, height, position 속성 등 - flex 박스 - grid 시스템 하나의 fieldset 요소가 복수의 form 요소와 관계를 맺어야 할 때 효과적인 속성 fieldset은 legend 요소와 함께 사용해야 하며 fieldset 요소의 제목(LEGEND)을 표시 - - - - - - - - 사용자로부터 정보를 .. 2022. 11. 4.
1104_선택자 1번p 직접통화 문자보내기 2번 p 1인 2인 HTML JAVA 1번p 직접통화 문자보내기 2번 p 1인 2인 HTML JAVA 2022. 11. 4.
1104_미디어 태그 1. mp3 파일 등의 오디오 파일 - 관련 속성 controls - 플레이 버튼이나 정지 버튼과 같이 비디오의 실행을 제어할 수 있는 제어기 표시 autoplay - 자동 재생 loop - 무한 반복 재생 2. mp4 등 비디오 파일 -관련 속성 controls - 플레이 버튼이나 정지 버튼과 같이 비디오의 실행을 제어할 수 있는 제어기 표시 width, height - 크기 설정 poster- 비디오 재생 전 썸네일 화면 설정 2022. 11. 4.
1103_css_float 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용 *공식: 자식이 float left하면 반드시 부모도 float left여야 한다 inherit - 부모요소 상속 left - 왼쪽 right - 오른쪽 none - 요소 부유시키지 않음 -사용 예시) section{ float: left; width: 580px; } section article{ float: left; width: 250px; height: 220px; margin: 5px; padding: 10px; border: 1px solid #ccc; } aside{ float: right; width: 200px; border: 1px solid darkgreen; margin-top: 77px; } float 속성이 적용된 이후 .. 2022. 11. 3.
css_semantic tags 시멘틱 태그(semantic)? 의미론적인 태그. 특정한 태그에 의미를 부여해 브라우저와 개발자 모두에게 명확하게 설명이 가능하다. HTML5 이전에는 또는 에 id와 class를 붙여 구역을 나누고 스타일을 지정함 ->복잡하고 지저분함 HTML5에서는 시맨틱태그를 사용하여 코드의 가독성을 높이고 명확히 함 -> 중심 내용의 글을 의미 페이지의 내용 주변에 있는 글 (사이드에 위치한 공간) 상단의 머릿말 부분 네비게이션 링크 문서의 본문 최하단(footer 그 자체) https://nonipc.com/entry/%EC%8B%9C%EB%A7%A8%ED%8B%B1-%ED%83%9C%EA%B7%B8semantic-tag-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95 2022. 11. 3.