Cording/HTML & CSS21 [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. [HTML / CSS] 반응형 웹 (Responsive Web) 반응형 웹 (Responsive Web) 브라우저(화면) 크기에 따라 요소의 크기와 배치가 유동적으로 변하는 웹 CSS "@media" 설정으로 브라우저 크기에 맞춘 요소 설정을 변경할 수 있다. 반응형웹 만드는 CSS 설정 브라우저 넓이 조건에 맞추어 요소의 크기와 배치 방법을 변경할 수 있습니다. 2020. 1. 10. [HTML / CSS] List / List Styling 1. "ol" - 순서가 있는 리스트 태그 (Ordered List) type 속성: "a" 소문자 알파벳순으로 진행되는 리스트 "A" 대문자 알파벳순으로 진행되는 리스트 "1" 숫자순으로 진행되는 리스트 (default 값임) 2. "ul" - 순서가 없는 리스트 태그 (Unordered List) list-style-type 속성 default 값 : 동그라미 "square" : 네모 하위 "li" 태그에 list-style 속성을 "none"으로 설정 시 리스트 서식 제거 3. "li" - 리스트요소 태그 (ol, ul의 하위 태그 - List Item) 대한민국 남아프리카공화국 오스트레일리아 소나무 전나무 벚나무 양궁 유도 수영 수학 과학 영어 미술 음악 체육 2020. 1. 8. [HTML / CSS] Float / Grid-layout / Clear 1. Float block요소를 부유(float) 시켜주는 속성 부유(float)되는 block요소 밑으로 뒤에 있는 block요소가 자리를 채운다. (inline / inline-block 속성의 요소는 float 된 요소 밖으로 밀려남) 기사에 삽입된 광고나 단락에 삽입된 이미지가 가장 흔한 예시. 3. Clear "float" 속성과 같이 쓰이는 속성 "clear"는 'float"의 좌우 빈공간에 컨텐츠가 따라 붙어 버리는 큰 문제를 해결해주는 역할을 함. 속성값 left / right를 취해 왼쪽 혹은 오른쪽에 더이상 요소가 붙지 않게끔 해줌. 2020. 1. 8. 이전 1 2 3 4 ··· 6 다음
