본문 바로가기

분류 전체보기204

7. 부트스트랩,예쁜 CSS 모음집 내 생각 : 부트스트랩이란 뭘까? 부트스트랩은 단순하게 생각해서, 예쁜 CSS를 미리 모아둔 것이라고 생각하면 쉬울꺼 같다. 그래서 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많다고 한다. 그렇다면 부트스트랩을 어떻게 사용할수 있을까? 앞서 css 폰트를 이용하기 위해서는 link태그를 이용해서 접근해야한다고 했다. 이와 마찬가지로 부트스트랩도 css폰트를 이용하기 때문에 link태그를 이용해서 접근한다. 아래 부트스트랩을 사용하기 위한 기본 템플릿을 첨부해놓았다. 이걸로 시작해보죠! 이렇게 입력하면 부트스트랩을 이용할수 가 있게 된다. 그렇다면 부트스트랩 컴포넌트(부트스트랩 기능들을 모아놓은 라이브러리들)을/를 이용하기 위해서 https://getbootstrap.com/docs/4.0/c.. 2021. 3. 30.
6. 폰트, 주석, 파일분리 출처: https://fonts.google.com/?subset=korean Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 위 구글 폰트 사이즈를 들어가보면, 구글 웹폰트 [코드스니펫] - 구글웹폰트[]() (1) 마음에 드는 폰트를 클릭합니다. (5) link 태그를 복사해서 사이에, CSS를 복사해서 사이에 넣습니다. (4) Embed 탭을 클릭합니다. (3) 우측 상단의 모음 아이콘을 클릭합니다. (2) [ + Select this style ]을 클릭합니다. Nanum Gothic이라는 폰트를 예제로 추가해보면, 아래와 같은 코드를 복사하면 됩니다. /* CSS에.. 2021. 3. 29.
5. 자주 쓰이는 CSS 연습하기 이 페이지를 만들어 볼것이다. 자세한 과정은 동영상 참조! 내생각 --> /*이미지는 항상 아래 3가지가 붙어다닌다고 생각하면 쉽습니다.!*/ background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg"); background-size: cover; background-position: center; border-radius: 10px; padding-top: 20px; /*여백 개념 공부하기*/ /*padding 안쪽으로 20px*/ /*margin 바깥으로 20px*/ } /* div를 가운데로 옮기는법*/ /*내가 가운데 있다는 것은 내 양쪽여백이 동등하게 최대이.. 2021. 3. 29.
4. CSS 기초 CSS (Cascading Style Sheets)는 웹페이지를 꾸미려고 작성하는 코드입니다. CSS 기초 에서 여러분이 처음 시작하며 필요한 내용을 익히도록 도와드립니다. 저희는 다음과 같은 질문에 관한 답을 드리겠습니다. 어떻게 하면 글자색을 검정이나 빨갛게 할 수 있을까? 어떻게 하면 콘텐츠를 화면의 이런 저런 곳에 보이게 할 수 있을까? 어떻게 하면 배경 이미지와 색상들로 웹페이지를 꾸밀 수 있을까? 그래서 CSS가 뭔가요? HTML와 같이 CSS는 실제로 프로그래밍 언어는 아닙니다. 마크업(markup) 언어 도 아닙니다. Style sheet 언어 입니다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 말입니다. 예를 들면, HTML 페이지에서 모든 문단 요소들을 선택하고.. 2021. 3. 29.
반응형

티스토리툴바