자주 사용하는 것은 41파일.
id> class> div
class가 10개여도 id 1개보다 우선순위 낮다.
id 100점 , class 10점 , tag값 1점
#one .two h3{~}
h3 에 적용되는 값은 111점이다.
04파일 다운받기
codepen **
[https://codepen.io/juliangarnier/pen/idhuG]
천줄넘으면 관리하기 복잡하기에 saas사용하는 것임.
https://developer.mozilla.org/ko/docs/Web/CSS/margin
라이언 얼굴그리기 .
https://zinee-world.tistory.com/425
둘 다 margin 사용하면, 큰 마진으로 . (중복)
hild가 이중div에 있어서 1px더 옆으로간건가요?
-(o)
동적이미지
정적이미지
background-img와
img 언제 사용하는지?
이번까지 배운 것 대상으로 캐릭터 그리기 완성..!
블로그 잘 쓰는 사람 중요함. !! =>깊이 팠느냐?
다양한 글들을 조합해서 자신만의 글로 만드려는 노력이 있는지
<기본적 css Property 확인 사이트>
[https://www.w3schools.com/cssref/playit.asp?filename=playcss_font-size&preval=medium]
폰트 색깔
링크텍스트
http://font.woowahan.com/jua/
링크텍스트
링크텍스트
이미지
브라우저가 인식할 수 없는 태그가 사용되면 브라우저는 inline 태그로 인식합니다.
에릭메이어의 reset.css 를 살펴보시면
/ HTML5 display-role reset for older browsers /
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
이러한 부분이 있는데 레거시 브라우저에서 인식할수 없는 태그들을 일부러 display:block 으로 바꿔준것입니다.
*아주 특수한 경우 제외하고 tag만들 일이 없다.
bootstrap
한글 3.3버전
영어 5.1.3버전
영어로만 다운받기.
html컬러네임
opacity : 0~1 ;
선명도 ?
relative ***
상대적인 속성을 가지고 있다. absolut 의 기준점이 되는건 relative이다.
문서 끝까지 찾아갔는데 부모 중에 relative없었으면.
absolute의 기준이 되는 것은 relative고, relative가 없다면 전체 body가 기준이다.
#1234 -> 브라우저가 #11223344로 인식해서, 마지막 44는 투명도가 됩니당
44% 투명도 -> 개발자도구로 확인해볼것.
absolue와 fixed만 절대위치
상대위치는 본인자리 기준
모든 html요소는 포지션을 바꾸지 않는한 그냥 static상태예요. 위에서 아래로 흐르는 형태구요, 서로 절대 겹치지않아요
하지만 포지션을 주면 z-index라는 걸 가지게되고, 상대위치, 절대위치로 보내게 되는데, relative만 상대위치구요, absoltue와 fixed만 절대위치예요
상대위치는 본인자리 기준이구요, 한마디로 운동장에서 '기준'하고 외치는 친구가 자기자신이죠
절대위치는 지정된 부모를 기준으로 움직이는데요, fixed는 무조건 body구요, absolute는 따로 지정된 부모가없으면 body 입니다
position이 static일때에는 left,top,right,bottom 속성을 사용할 수 없습니다.
링크텍스트
z-index: 앞뒤 구분 속성
z-index 기본값: 0? (자기가 있어야 하는곳이 기본값)
현재 쌓임 맥락에서 위치로 이값 사용. 해당 맥락에서 자신의 위치 0로 사용.
최대값 2147483647
position sticky 이면??
.other{
height:1000px;
background:yellow;
}
.other2{
height:1000px;
background:black;
}
.stiky{
position:sticky;
width:50px;
height:50px;
background:pink;
top:10px;
}
fixed와 sticky의 차이점
fixed와 sticky 둘 다 스크롤을 하더라도 보여지는 공통점을 가지고 있는데요. 이 두 position의 차이점은 fixed는 문서의 흐름을 따르지 않고 뷰포트를 기준으로 배치가 되는 반면 sticky는 문서의 흐름을 따르면서 containing box를 기준으로 상대적인 위치에 배치됩니다.
즉, fixed를 쓰면 요소들이 겹쳐보일 수 있는 상황이 나올 수 있는 반면 sticky를 쓰면 그러한 상황을 예방할 수 있습니다. 라고하네요..
float:left , float:right
