본문 바로가기

전체 글

(96)
[CSS]5.코드 재사용 (CSS공통파일 > 중복제거) @@@@@유튜브 생활코딩으로 학습한걸 메모하는 용도인 점 참조 부탁드립니다@@@ @@@@@@@@14강@@@@@@ css코드의 재사용 [1]css코드 재사용 지금까지 만든 코드 다른페이지들에도 모두 적용시키려면 1번)페이지마다 모두 복붙 (만약 페이지가 1만개 라면????) 2번)css파일을 별도로 만들어서 붙여넣기 > link태그 사용
[CSS]4.미디어쿼리 (media) @@@@@유튜브 생활코딩으로 학습한걸 메모하는 용도인 점 참조 부탁드립니다@@@ @@@@@@@@12강~13강@@@@@@ 미디어쿼리 소개 및 써먹기 [1]미디어 쿼리 기본 - 화면의 크기에 따라 반응형 최적화 되는 디자인 (1)div태그를 어쩔 때 보이고, 어쩔때 안보이도록 하고싶다면 1)개발자도구에서 화면의 크기 확인 2)screen width > 800px 이때 div태그를 display:none;으로 하고싶음 -min(최소) 과 max(최대) 개념 Ex)max-width:800px >>> 800피셀보다 작을 때 [2]미디어쿼리 사용해보기 (1)800px보다 작을 때 아티클 아래로 내리기 (@media부터 )
[CSS]3.그리드(grid) @@@@@유튜브 생활코딩으로 학습한걸 메모하는 용도인 점 참조 부탁드립니다@@@ @@@@@@@@10강~11강@@@@@@ 그리드 소개 및 써먹기 [1]그리드 기본 (가장 최신 굳굳) “실습에서 본문 내용을 오른쪽으로 배치시키기 위함” (1)div 태그 -아무런 의미가 없고, 단지 디자인을 위한 태그 (기본적으로 블록레벨 element) (2)span 태그 - div와 동일한데 인라인 element임 (3)grid 속성 Ex) display:grid; Grid-template-columns: 150px 1fr; Cf)fr 화면전체에서 어느정도 사용할지. 아래 예시에서 navagation은 105px, article은 1fr 만약 2fr 1fr하면 > navagation은 3분의2, article은 3분의1을..