2023-01-02 TIL(1)

폰트 어썸 : 아이콘 및 이미지 삽입페이지

애니메이션 이미지 삽입.

@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에서 경로를 설정.

---

전체적인 HTML, CSS 정리해보기

링크와 이미지 HTML

링크를 만드는 태그. 바로 a 태그

<p> 아무말  <a href="링크주소">color</a></p>
  <img src="이미지 주소" alt="선로 위의 다람쥐">

리스트 ul, ol, dl

<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>

div, span

태그 안의 내용까지만 길이를 가진다.

input

사용자가 입력할 수 있는 창이 나옴.

CSS 파일 적용 및 분류

또한 CSS 파일에 폰트 및 여러가지 디자인 첨부 가능.

선택자 CSS 적용

body {  바디에 전체 적용 } 
.male { html에서 class ="male"에만 적용 } 
#hot { html에서 id = "hot"만 적용} 
mail * { mail 안에 전체 적용}
qqq~www { 앞에따라가는 뒤 전체 적용}
eee+rrr {앞에 따라가는 거 하나만 적용}
abc>ccc{ abc안에 있는 c 적용} 

padding, margin 등등

margin : border 외부
padding : border 내부.

max-width : 최대 ~~px;

relative, absolute

flex

부모에서 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;
}
}

Grid

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];
}