728x90 반응형 css3 [ToyProject 03] Bootstrap을 활용한 반응형 웹 구현 깃허브에서 전체 코드 및 결과 화면 보기! 📘 오늘의 프로젝트 주제 Bootstrap 프레임워크 기반 웹 페이지 구현 💻 프로젝트 실행환경 개발 언어 : html, css 개발 도구 Visual Studio Code Google Chrome Browser Bootstrap v5.0 👊 프로젝트 목표 Bootstrap 프레임워크를 활용해서, 자유자재로 커스터마이징하여 요구사항에 맞게 변형할 수 있다! `grid` , `layout`, `position`, `flex`, `component` 등을 자유롭게 활용하고 응용해보자! 📗 공부한 내용 [ 반응형 웹 (responsive web) ] 1. 미디어 쿼리 반응형 디자인의 핵심 구성 요소! ~~부트스트랩이 더 간단하기 때문에 참고용으로 알고있자~~ [ 기본.. 2021. 2. 5. [CSS] CSS Position (relative, absolute) 한 방에 정리! 목차 1. Position 속성 1-1. Relative 1-2. Absolute 1-2-1. 부모 relative & 자식 absolute 1-2-2. 조상 relative & 자식 absolute 1-2-3. 조상 position 없음 & 자식 absolute 1-3. Fixed CSS Position CSS Position 요약 position 속성을 통해 문서 상에 요소를 배치하는 방법을 지정한다. top, right, bottom, left 속성을 통해 요소의 최종 위치를 결정한다. 사용법은 간단하다. 기준을 잡는다. (예- position: relative;) 이동시킨다. (예- top: 50px;) 🎈알아두기 block inline block : 한 줄 모두 차지 (대표 element - ,.. 2021. 2. 2. [CSS] CSS 기초 (selector, table, 링크 href, div/span) 1. Selector class를 지정할 때는 .(class명)으로 지정한다. 기본 문법 예시 css는 웹사이트의 디자인 스타일을 담당한다 html은 웹페이지의 컨텐트를 담당한다 javaScript는 웹페이지의 동작을 담당한다 JSP는 동적인 서버 웹페에지를 담당한다 2. table 기본 문법 예시 자기소개 이름 피터 특기 인형극 노래 코딩 번호 제목 작성자 조회수 1 오후수업 불리언 355 2 오전수업 인티저 500 3. 링크 (href) : css style을 따로 css파일로 만들어서 불러와서 사용 가능하다 기본 문법 예시 /mystyle.css @charset "UTF-8"; table { border-collapse: collapse; } table, td { border: 1px solid b.. 2020. 8. 19. 이전 1 다음 728x90 반응형
