.gif)
주말시간을 이용해서 GItHub 클론을 해보았다.
참고
og (오픈그래프) twitter card
- og에 오픈그래프 와 twitter card 아래와 같이 적어주면 이사이트의 정보를 알 수 있다(카카오톡 링크 보내면 뜨는 것들)
meta property="og:type" content=""
favicon (크롬 상단에 로고와 이름 뜨는 것)
<link rel="icon" href="./favicon.png">
<link rel="apple-touch-icon" href="./favicon.png"> reset.css
- 각 브라우저 마다 적용되는 스타일을 reset 하기 위해서 head링크 하단에 아래의 링크(누군가 만들어놓음 https://cdnjs.com/libraries/meyer-reset) 을 삽입한다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css"> 폰트의 기본값 (가장 많이 하는)
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 400;
color: #333;BEM 작명할때 꿀팁
-: (띄어쓰기 할때) 일반적인 작명
__ : ~의 일부분 <div class="body__container"></div>
-- : ~의 상태 <div class="btn--success"></div>버튼에 그라데이션 주는 방법 background: linear-gradient(위치, 시작색, 끝나는색)
.btn {
background: #eee linear-gradient(to bottom, red, blue);
-아래쪽으로 그라데이션이 내려감, 빨간색 시작, 블루로 끝남
}
클론할때 동일한 css가 보일경우 css 먼저 지정해주어도 된다? (O/X)
- O(된다.) 겹치는 스타일이 있을때 미리 이름을 css에서 만들고 스타일을 적용해서 돌려쓴다.
.btn.btn-primary {
border: 1px solid #65b836;
color: #fff;
background: #55a532 linear-gradient(#91dd70, #55ae2e);
} css 그림자 랑 투명도
- box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
0은 x 축, 1px은 y 축 , 2px은 blur-radius rgba 은spread-radius
Inset은 박스안에 그림자를 넣겠다, rgba는 (빨간,그린,블루, 투명도)
가운데 정렬 margin: 0 auto;
- margin: 0 auto를 하면 원하는 content를 가운데로 정렬할 수 있다.
그때는 반드시 명확한 값 width가 있어야지 배치가 가능하다header .inner { max-width: 980px; height: 78px; margin: 0 auto; background: red; }
a 태그 클릭시 글자뿐만아니라 근처박스에서도 클릭 가능하게 하기
- a 태그에 padding값을 씌어주면 되는데, a태그는 inline이기 때문에 block으로 바꿔준다
header .main-menu li a{ display: block; padding: 10px; }
좌우로 header의 메뉴 배치할때 (float 사용법)
HTML
양쪽 메뉴의 부모태그의 class 에 clearfix을 add해준다. 그리고
왼쪽 메뉴이름 class로 가서 float--left
오른쪽 메뉴이름 class로 가서 float--right add 해준다.
CSS
.clearfix::after {
content: "";
clear: both;
display: block;
}
.float--left {
float: left;
}
.float--right {
float: right;
}배경이미지를 section 전체에 다 덮어버리기: background-size: cover;
- (축소해도 배경이미지 정상적 작동하기 위해)
.sectoion--visual { background-image: url("../img/bg.jpg"); background-repeat: no-repeat; background-position: bottom left; background-size: cover; }
줄바꿈 :
( 코드에 원하는 줄바꿈에 코드 사이에 이어놓게 한다)
-
왜
<br>안쓰냐? 반응형 웹사이트를 만들기 위해서<div class="summary__title"> How people build software </div>
비디오 삽입 (반응형으로 만들기)
- 해당 유튜브 비디오로 가서 마우스 우측클릭을 하면 소스공유를 누르면 자동 복사된다.
- 비디오를 반응형으로 만들려면 부모요소에 자식을 만들어 그 자식 요소에 소스공유를 삽입한다.
- 넓이를 반응형으로 만들기 위해서는 max-width: 사이즈 하면 된다.
<div class="video"> <div class="video_ratio"> <iframe width="719" height="480" src="https://www.youtube.com/embed/afvT1c1ii0c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>
지도 API 삽입
- 개발자 API key 를 받아서 해야한다(상업적으로 많이 이용되면 유료화)
id로 고유이름 지어주면 CSS에서는 부모 태그 안적어도 된다 ? (O?X)
- O 부모 태그 안적어줘도 된다. 그냥 #이름 만 css에 적어주면 된다.
반응형 :다양한 미디어 유형에 따라 다른 스타일 적용 @media (CSS)
- 페이지 크기를 줄고 늘릴때 크기가 변함
- @media 미디어타입 and (제한크기) {
css 코드
}``` @meadia screen and (max-width: 700px) { .container { heigth: 300px } -> width가 700px보다 작아지면 .container을 적용한다 @meadia screen and (orientation: portrait) { .container { heigth: 300px } -> 세로 > 가로되면 cotainer의 길이로 바꿔진다. @meadia screen and (orientation: landscape) { .container { heigth: 300px } -> 세로 < 가로되면 cotainer의 길이로 바꿔진다. -> screen and는 생략가능하다 (all로 변경됨) ```화면 축소하면, 메뉴바가 사라지게 하는 법
@media (max-width: 1024px) {
header.section .inner {
max-width: none;
height: auto;
padding: 0 20px;
}
header .menu-groud,
header .sign-group {
flex: none;
}
header .toggle {
display: none;
}
header. .logo {
padding: 12px;
}
#toggle-btn {
background: url("../img/toggle-btn.svg");
width: 16px;
height: 24px;
position: absolute;
top: 16px;
right: 20px;
cursor: pointer;
text-indent: -9999px;
}
}