.gitignore -> 무시하고 싶은 이름 쓰는 곳
대부분의 웹 서버가 디폴트로 index.html을 찾아보도록 설정되어있음
기억하고 암기하는게 아니라 !이해!
link:css 쓰면 단축키!
google fonts
컨테이너 하나를 말그대로 중심에 놓는 css hack
(space between 대신)
이상하지만 잘됨
margin: 0px 3px;
위아래, 좌우
리셋 css : 대부분의 태그에 margin:0, padding:0, border:0 등을 가진 css파일
브라우저 스타일을 없애고 우리가 직접 디자인하는게 더 좋은 방법
css not
뭔가 적용되는 걸 원하지 않을 때
#login-form input:not([type="submit"]){
border-bottom: 1px solid rgba(0,0,0,0.2);
transition: border-color 0.3s ease-in-out;
}type이 submit이 아닐 때만, 적용
#login-form a{
text-align: center;
text-decoration: none;
color: inherit;
font-size: 12px;
}login-form을 상속한 color -> default가 black
style.css파일에는 font-family와 같이 모든 스크린에 적용될 수 있는 스타일을 써놓는게 쌤 스타일
form은 아주 중요한 2가지 속성을 가지고 있음
하나는 action이고, 하나는 method!
action은 어떤 페이지로 data를 보낼건지 지정할 수 있음
method는 2가지 방식 중 하나를 쓸 수 있음
하나는 post, 다른 하나는 get!
get방식은 보안에 취약해
username이랑 password를 get 방식으로 보내면 안됨
url에 포함되어도 상관없는 정보들을 get 방식으로 보내는거야 알겠징
풀스택 유튜브 클론 코딩 들어야겠다
서버가 없으니까 get 방식 쓰는거
action을 설정해주었기 때문에 페이지 이동 가능
action에 적어 놓은 url에 해당하는 파일이 반드시 존재해야함
검색엔진 구글도 navigation을 찾아서 ul의 li 안에 있는 link를 가져오게끔 설정되어있음
nav>uk>li*4>a
<nav>
<ul>
<li><a href="#">Friend</a></li>
<li><a href="#"></a>Chats</li>
<li><a href="#"></a>Search</li>
<li><a href="#"></a>Find</li>
</ul>
</nav>box-sizing: border-box
-
Border Box가 width 200px라고 가정
-
이때 padding-left을 50px주면 css는 content 부분을 유지하려고 해서 width는 기존 200px + padding-left 50px = 250px가 되어버림.
-
box-sizing: border-box은 padding
내가 padding을 줘도 신경쓰지마. 내 box 사이즈를 늘리지 말아줘!
content 부분을 유지하지 말고 기존 width 길이 유지할 때 이용 -
2의 경우 box-sizing: border-box 사용 시 width는 200px 동일함.(content 부분은 150px로 감소)
-
box-sizing: border-box 는 border에 padding이 추가하면서 border가 영역 밖으로 넘어가게 될 때 사용하게 되는 것을 깨달음.
사각형을 원으로 만들고 싶다면 사각형 width의 반을 값으로 쓰면됨
.nav__notification{
background-color: tomato;
width: 20px;
height: 20px;
border-radius: 10px;
display: block;
}display: block -> 요소 앞뒤로 줄바꿈!
span은 inline 요소니까 display:blcok을 해야 적용됨
Z index는 기본적으로 div가 있는 위치가 맨 앞에서부터 몇 번째인지를 나타내
즉 layer의 순서가 몇 번째인지를 나타내는거임
z-index의 기본값은 0
order 속성은 flex-children에게만 적용됨
.message-row--own .message__bubble{
order:1;
}
.message-row--own .message__time{
order:0;
} 새로고침할 때마다 내가 첫번째로 보고싶은건 splash 화면
animation: hideSplashScreen 1s ease-in-out forwards;마지막 keyframe 유지하길 바람
visibility:hidden 마우스에 걸림없이 클릭 가능
will-change: 기본적으로 브라우저에게 뭐가 바뀔거라고 말해줘
-브라우저에게 렌더링 힌트를 주고, element에 실행 되길 기대하는 변화를 명시함
.reply:focus-withinreply 내부에 어떤 element가 focus 되어 있다면 ~
Git에서 branch는 코드들의 평행세계라고 볼 수 있음
새로운 branch 만들어보기 experiments에서 commit
branch - new Branch - Merge into Current Branch
static website - HTML, CSS ,JS로만 이루어진 사이트
branch 이름이 gh-pages여야함
URL - username.github.io/
코드 수정하고 싶을 때 필독
- master branch로 이동해서 커밋 푸쉬
- 다시 gh-pages로 가서 branch - Update From Master 하고 push
