본문 바로가기
  • Coding & Book

WEB39

그리드 시스템 그리드 시스템이란? 부트스트랩을 사용할때 웹페이지에서 콘텐츠들을 화면 크기에 따라 달리지게 하는 반응형 레이아웃을 만들수 있게 해주는 것입니다 그리드시스템은 컨테이너 안에서만 작동하므로 페이지 상에 최소 한개 이상 컨테이너가 있어야 작동 합니다. 부트스트랩의 모든 행에는 분배될 공간이 12유닛씩 있습니다. 정말 12 유닛씩 있는지 확인 해보겠습니다. Document the grid systtem 3 3 6 6 Grid options 웹 상에 적절한 중단점을 적용해서 small, medium 이하의 중단점을 활용하기 위해 사용합니다. 예시) medium 중단점이 끝나고 나면 6 유닛을 차지한다. Document the grid systtem Lorem ipsum dolor, sit amet consecte.. 2023. 1. 15.
부트스트랩 사용방법 부트스트랩이란? 유명한 css프레임워크이며 그럴듯한 웹사이트들을 빠르게 만들 수 있도록 도와줍니다. 사용자가 웹 페이지를 편리하게 만들수 있도록 도와줍니다 (간단하게 css의 뼈대라고 생각하면 편합니다) 사용방법(css) css를 부르듯이 아래의 코드를 연결 해주시면 됩니다. (링크 태그를 사용해 접근할 수 있게 해주시면 됩니다.) ​ 구성 요소(componets) 대부분이 클래스 속성을 통해 사용됩니다. 예시) 배지 버튼 사용하기 위와 같은 배지 버튼을 사용하기 위해 위의 코드를 그대로 추가 해주시면 됩니다. Notifications 4 Lorem ipsum dolor sit amet consectetur adipis icing elit. Veniam explicabo, unde, id illum, f.. 2023. 1. 11.
06-03. CSS Reset CSS Reset이란? 브라우저 스타일을 여러 브라우저에서 정규화 하기 위해 쓰는 것이다. 헤딩 글꼴 같이 크기가 다른것들을 깨끗한 상태로 만들어주는것이다. /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var.. 2023. 1. 5.
06-02. 미디어 쿼리 1. 미디어 쿼리란? 미디어 쿼리는 반응형 웹사이트 스타일을 수정하는 방법이다. 예를 들어 모바일이랑 웹의 화면 크기가 다르니 메뉴등을 보여주거나 숨기고 없앨수 있도록 도와주는 것이다. 미디어쿼리를 사용 하는 방법은 @media로 시작하며 괄호 안에 미디어 기능을 넣을 수 있다. 예시1) 최소 min, 최대 max 사용 Home Learn More About Contact Sing Up Media Queries body { font-family: 'Open Sans', sans-serif; } h1 { font-size:6em; text-align: center; } nav { font-size:1.5em; } ul,li { display: inline; margin:0; padding:0; } /*최소.. 2023. 1. 4.
06-01. Flexbox 1. Flexbox란? 페이지의 콘텐츠 상자 안에 아이템을 배치할때 사용하는것이다. 컨테이너를 만들고 그안에서 배분을 하는것. 예시 FlexBox app.css 파일 body { font-family:'Open Sans', sans-serif; } h1 { text-align: center; } #container { background-color: #003311; width: 90%; height: 500px; margin: 0 auto; border: 5px solid #003311; } #container div { width: 200px; height:200px; } 출력내용 이지만 Flexbox를 이용시 안에 넣을 수 있다. #container { background-color: #003311;.. 2023. 1. 4.
05-02. css 전환 transition: 으로 애니매이션 효과를 적용 할 수 있다. 예시로 가로 세로 200px 인 네모 상자 위에 커서를 둘경우 3초에 걸쳐 동그라미로 변하게 되고 커서를 내릴경우에 다시 네모로 변하게 된다. 추가로 알면 좋은 것들 transition-timing-function: linear 일정한 속도로 변화한다. transition-timing-function: ease-in 천천히 시작하다 빨라지며 변화한다 transition-timing-function: steps(6,end) 6단계에 걸쳐 변한다. transition-timing-function: cubic-bezier 앞뒤로 움직이는것처럼 변한다. 관련사이트! https://easings.net/ Easing Functions Cheat Sh.. 2022. 12. 30.

티스토리툴바