본문 바로가기

분류 전체보기67

부트스트랩 부트스트랩도 생각보다 활용하는 곳이 많다. responsive web design을 할때도 빠르게 응용할 수 있다. 다같은 코드를 쓰면 사이트가 같아질 거라 생각할수도 있겠지만 디자인적 요소는 얼마든지 바꿀 수 있으며 필요한 부분의 코드만 가져와서 사용하는것도 가능하다. 부트스트랩 전체를 다운로드 받은 뒤, 현재 작업 중인 파일에 같이 넣고 태그를 통해서 같이 연결시켜 사용할 수도 있음. 하지만 굳이 다운로드 받지 않아도 CDN link를 html파일에 로 연결해서 사용도 가능하다 . bootstrap CDN을 넣은 뒤 로 내가 만든 css파일을 밑에 붙여주면 bootstrap이 내 디자인을 덮지 않는다. 자바스크립트 부분도 안에 넣어줘야 한다. 이 코드를 다 넣어줘야 반응형 nav등을 만들때 작동이 제.. 2022. 7. 30.
가격표만들기 Personal Custom domains Sleeps after 30 mins of inactivity Free Sign up Small team Never sleeps Multiple workers for more powerful apps $150 Free trial Enterprise Dedicated Simple horizontal scalability $400 Free trial /* 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,.. 2022. 7. 26.
css 3 (flexbox) # What is Flexbox ? Flexbox is a one-dimensional layot method for laying out items in rows or columns. 생긴지 얼마 기능이고 페이지의 콘텐츠 상자 안에 아이템을 배치할 때 사용된다. Flexbox allows us to distribute space dynamically across elements of an unknown size, hence the term "flex". flexbox를 이용하면 하나의 컨테이너 안에서 어떤 요소를 크게하고 작게할지, 요소들 사이에 공간을 얼마나 띄울지, 공간을 균등하게 만들지 등을 유연하게 정할 수 있다. #Flex-Direction flex model에는 두 가지 축이 있다 그리고 fl.. 2022. 7. 21.
CSS 2 #박스모델 : 가로와 세로 개발자 도구를 열어서 각 태그들 위에 마우스를 올려보면 그 요소가 차지하는 영역을 색으로 볼 수 있다. 각각 색이 다른 박스는 다른 역할을 한다. 이 색이 다른 애들은 아래 이미지처럼 다른 역할을 하고 있음. 이 content box 안에는 width와 height 요소가 들어가게 된다. 얘네들이 컨텐츠가 들어가는 영역의 크기를 조절해준다. 개발자 도구로 열어서 확인해보면 파란색으로 네모쳐지는 영역이 content box 영역이다. #박스모델 : 테두리와 모깎기 MDN 페이지만 봐도 여러가지의 border style을 볼 수 있다. 위에만 두껍거나, 왼쪽만 두껍거나, 그라데이션이 들어간 컬러를 넣었거나 등등 각요소를 구별하거나 디자인 적 요소로 활용할 수 있다. Border p.. 2022. 7. 8.

티스토리툴바