3번째 수업날!
오늘 수업 역시 어제 학습했던걸 복습하면서 시작했다.
# 주석
<!--html의 주석 입니다.-->
/*css의 주석 입니다. */
//css 한줄 주석 입니다!코드와 같이 쓸 수 있지만, 실행되지 않음
디버깅할 때 쓸 수 있음
메모 용도로 많이 사용
언어마다 주석 처리 방법이 다름!
맥의 경우, command + /로 주석 처리 가능하다.
# margin 병합 현상
## 형제 간
<div class="top"></div>
<div class="bottom"></div>
***
.top{ margin-bottom:100px;}
.bottom{margin-top:200px;}
/*두 div사이의 간격은 200px*/
두 마진이 겹칠 때, 더 큰 쪽이 적용됨
마진 병합 현상은 상하 마진만 영향
## 부모 자식 간
<div class="parent">
parent
<div class="child">child</div>
</div>
***
.child{ margin-top:200px;}
/* parent 글씨 위로 마진이 생김 */보더가 있으면 부모가 밀리지 않음!
# display
## inline-block
width와 height로 크기 지정할 수 있음
## table
<table>과 같은 속성이 됨 (잘 사용되지 않음!)
## none
아예 공간도 차지하지 않음
visibility: hidden;과 같은 효과를 낼 수 있지만 visibility는 공간을 차지함!
# float
부모의 왼쪽, 오른쪽으로 정렬됨
현재 흐름에 벗어났으므로, 다른 레이아웃에 영향을 줄 수 있다.
clear로 사용 해제
# 선택자
## 그룹선택자
콤마(,)로 여러개 선택자에 속성 부여 가능
.class1, .class2{
color:blue;
}## 특성 선택자
특정 속성 값을 가지고 있는 요소를 선택할 수 있음
주로 input 태그에 적용
input[type="button"]{border: 1px solid white;}## 자식 선택자
#class > span {
color: red;
}바로 아래 자식에게만 적용
손자는 영향을 받지 않음
## 가상 선택자
#class:hover{
background-color:transparent;
}선택한 요소가 특정 상태일때 적용
hover는 해당 요소에 마우스가 올라갔을 때를 의미
active는 클릭
nth-child(n)는 같은 선택자에서 몇번째 선택자인지
# 레이아웃 그리기
## flex
### flex-grow
여백의 비율
container 내 item이 비율만큼 자리를 차지한다.
- 글자수가 늘어나면 그 글자수만큼을 inline처럼 차지하고 난 후 남은 공간을 비율로 나눈다.
여백의 공간을 지정된 비율로 적용
비율 별로 크기 할당 (매우 유동적이다.)
### flex-basis
요소의 기본 크기
auto를 값으로 넣게 되면 콘텐츠의 크기가 요소의 기본 크기가 된다.
### flex-shrink
요소의 크기 축소 비율
flex-shrink:0;을 주면 전체 크기가 작더라도 정해진 크기를 유지한다.
### justify-items
flex-grow값이 없을 때 사용 가능!
메인 방향 정렬
### align-items
수직 축 방향 정렬
### align-content
여러 행 수직 축 방향 정렬
### align-self
수직 축 방향 아이템 정렬
각각의 아이템에 개별적으로 적용 가능
# grid
.container {
display:grid;
grid-template-columns:1fr 1fr;
}fr fraction의 의미 (비율)
2개면 column 개수도 2개
px과 같이 고정값도 가능함.
repeat(5, 1fr) = 1fr 1fr 1fr 1fr 1fr
반복이 된다면 repeat을 사용해서 간단하게 작성도 가능함
### row-gab
row 사이의 공간 설정
### column-gab
column 사이의 공간 설정
### gab
gab: 10px 20px;
gab: (row) (column)
한번에 설정 가능
## grid item
해당 셀이 공간을 얼마나 차지할 것인지 설정한다.
grid-column : 1/ span 2
1번에서부터 2칸을 차지한다.
grid-column: 1/3
1번에서 3번까지 차지 = 2칸 차지
## grid 정렬
### justify-items(컨테이너에 사용)
가로 방향 정렬
### align-item(컨테이너에 사용)
세로 방향 정렬
### place-items(컨테이너에 사용)
justify와 align 모두 설정
### justify-self
가로 방향 아이템 정렬
### align-self
세로 방향 아이템 정렬
### place-self
justify와 align 모두 설정
# Bootstrap
bootstrap homepage
부트스트랩은 cdn으로 간단하게 사용할 수 있고, html 내부에서도 미리 정의된 class를 입력하면 미리 짜여진 스타일을 적용할 수 있다.
디자인을 참고하기 좋다고 함!
# 애니메이션
## transform
rotate:해당 요소를 회전
scale:해당 요소의 스케일
skew:해당 요소를 비틂/ x축과 y축으로 회전하는 느낌!!
translate:해당 요소를 이동
## transition
property : 적용하려는 속성
duration : 효과가 나타나는 시간
timing-function : 효과의 속도 함수
delay : 효과가 나타나기 전 딜레이
transition: width 3s linear 1s; 이렇게 한줄로 작성도 가능한데,이럴 경우 첫번째 나오는 초가 무조건 duration!
## animation
name : keyframes로 호출할 이름
duration : 효과라 나타나는 시간
timing-function : 효과의 속도 함수
delay : 효과가 나타나기 전 딜레이
iteration-count : 효과 반복 수
direction : 효과 진행 방향 (alternative를 하면 시작 할때와 다시 돌아올때 모두 적용)
@keyframes name{
from{ 시작 }
to{ 결과 }
}# 반응형 웹사이트
## media query
@media : 미디어 쿼리 사용
screen : 화면에 대해 적용
max-width : 최대 width 내에 있다면 적용
순서가 중요
내용이 대체되기 때문!
#id {
background-color: red;
color: white;
}
@media screen and (max-width: 640px){
#id{
background-color: yellow;
}640px보다 화면 크기가 작다면 적용된다.
글자색의 경우 미디어쿼리에 작성된 것이 없기 때문에 배경색은 노란색으로 바뀌지만 글자색은 여전히 흰색이다!
# git
분산 버전 관리 시스템
코드의 버전을 관리해줌
- 터미널 열기!
- 프로젝트 폴더로 이동
- cd "이동할 폴더 경로"
- git init : 저장소 생성
- git status : 저장소의 상태 보기
- git config --global user.email"gitlab 이메일"
- git config --global user.name"gitlab 이름"
- git config --global--list
- git remote add origin"gitlab 프로젝트 주소"
- git remote -v : 연결이 잘 되었는지 확인
- git branch -M"branch 명"
- git pull origin"branch 명" : git과 파일을 동기화 시키는 느낌!
- git add"추가할 파일 명"
- git commit -m"변경사항 내용"
- git push origin"branch 명" :git에 업로드!]
오늘 TIL은 #를 앞에 붙여서 번호를 매겨보았는데 더 이쁜지는 모르겠다!ㅎ 더 지저분한것 같기도!ㅎ
