@keyframes slideInFromRight {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
/* Stats */
.stats {
padding-top: 100px;
animation: slideInFromBottom 1s ease-in;
}
github repo에서 .을 누르면 온라인 vscode로 접속 가능.
그후 Settings에선 pages에서 경로를 설정.
링크를 만드는 태그. 바로 a 태그
<p> 아무말 <a href="링크주소">color</a></p>
<img src="이미지 주소" alt="선로 위의 다람쥐">
<ul>
<li>우유</li>
<li>빵</li>
<li>치즈</li>
</ul>
<ol>
<li>일어나기</li>
<li>샤워하기</li>
<li>아침먹기</li>
<li>등교하기</li>
</ol>
<dl>
<dt>제목:</dt>
<dd>매우 재미있을 책</dd>
<dt>작가:</dt>
<dd>홍길동</dd>
<dt>페이지:</dt>
<dd>500</dd>
</dl>
태그 안의 내용까지만 길이를 가진다.
사용자가 입력할 수 있는 창이 나옴.
또한 CSS 파일에 폰트 및 여러가지 디자인 첨부 가능.
body { 바디에 전체 적용 }
.male { html에서 class ="male"에만 적용 }
#hot { html에서 id = "hot"만 적용}
mail * { mail 안에 전체 적용}
qqq~www { 앞에따라가는 뒤 전체 적용}
eee+rrr {앞에 따라가는 거 하나만 적용}
abc>ccc{ abc안에 있는 c 적용}
margin : border 외부
padding : border 내부.
max-width : 최대 ~~px;
부모에서 display: flex; 를 넣으면 default로 가로정렬
/ 플렉스 wrap 만약 화면크기가 넘어가게된다면 다음 줄로 넘어가게 만들기 /
flex-wrap: wrap;
justify-content : Flex요소들의 가로선 정렬 (start,end,center,space-between,space-around,space-evenly)
align-items : Flex요소들의 세로선 정렬(start, end, center, baeline, stretch)
flex-direction: 정렬할 방향을 지정(row, column, row-reverse, column-reverse)
align-self: 지정된 align-items 값을 무시, flex요소를 세로선 정렬
flex-wrap : flex요소 줄정렬(nowrap, wrap, wrap-reverse)
flex-flow = flex-direction + flex-wrap
align-content : 세로선 여분의 공간이 있는 경우 flex 컨테이너 사이의 간격을 조절..
/ 미디어쿼리 : 반응형 웹사이트를 만들때 사용하며, viewport 필요... /
@media (min-width: 900px) {
.call-outs-container {
/ 화면 사이즈 900 이상만 flex가 적용되도록 /
/ 컨테이너에서 flex와 가로정렬을 제거하고 여기에 적용한다 /
display: flex;
justify-content: space-between;
}
}
2차원으로 화면구성.
/ 각 행의 크기를 정의합니다. /
.container {
grid-template-rows: 100px 200px;
}
/ 동시에 각 라인의 이름도 정의할 수 있습니다. /
.container {
grid-template-rows: [first] 100px [second] 200px [third];
}
/ 라인에 중복된 이름을 지정할 수 있습니다. /
.container {
grid-template-rows: [row1-start] 100px [row1-end row2-start] 200px [row2-end];
}