수업중 필기 한 것
h태그에는 기본적으로 마진이 있는 것을 생각해야함
-webkit-box-orient: vertical; -webkit-line-clamp: 3; 아무리 길어도 3줄만 표시가 되고 나머지는 …으로 표시 display: -webkit-box; overflow: hidden;
a.more에 inline-block 요소로 설정한 이유는? 자식요소들의 높이를 자신의 높이로 갖기 위해
first child, last child를 잘 활용하자
.border-thickness { border: 3px &. bold-top { border: 10px } }
패딩, 보더는 요소 자체의 영역으로 간주되어 링크를 걸면 선택요소로 포함됨.
position: relative??
video right 스크롤 만들기 box-sizing 설정, height를 정하고, overflow-y: auto로 설정하면 됨
부트스트랩
부트스트랩은 프론트엔드 웹 개발을 빠르고 쉽게 만들어줌. 반응형이며 모바일 우선인 웹프로젝트 개발을 위한 HTML, CSS, JS 프레임워크.
CDN(Content delivery network) : 자주쓰는 이미지나 JS, CSS파일을 분산된 서버에서 꺼내올 수 있는 방법
CSS를 가져오고 싶으면 다음을 복사해서 스타일에 붙여놓으면 됨
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
JS의 경우는 다음과 같다
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
Comments