본문 바로가기

CSS

 (5)
[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을..
[CSS]2.박스모델 @@@@@유튜브 생활코딩으로 학습한걸 메모하는 용도인 점 참조 부탁드립니다@@@ @@@@@@@8강~9강@@@@@ 박스모델 [1]박스모델 1. 태그 영역 구분 (전체영역 vs 내영역) (1) block level element(태그) - 전체 블록을 사용하는 태그 (2) inline element - 자기 자신의 부피만큼 사용하는 태그 예시)h1태그는 블록라벨, a태그는 인라인 (3) display -블록레벨이지만 인라인으로 변경해 사용하는 방법 Cf)display:none; 으로 코딩하면 해당 태그 자체가 사라짐 >>>위에 Border-width:5px; border-color:red; border-style:solid;이거를 간단하게 Border:5px solid red; 이렇게 사용도 가능 2. 박스..
[CSS]1.CSS기본 (속성, 선택자, class, id, 중복/자손/자식/일반/인접 선택자) @@@@@유튜브 생활코딩으로 학습한걸 메모하는 용도인 점 참조 부탁드립니다@@@ @@@@@@@@2강@@@@@ CSS가 등장하기 전의 상황 [1]HTML로 꾸미기 시작 태그 등 내용 >>>html은 정보전달인데 디자인이 들어가면서 일관성이 없음, 또한 몇만개의 태그를 모두 바꿔야한다면 너무 노가다..아니 불가한 작업이됨… >>>그래서 지금은 디자인할 때 html안쓰고 새롭게 CSS언어 만들어서 꾸밈 @@@@@@@@3~7강@@@@@ CSS등장, 기본문법, 혁명적변화,속성,선택자,class,id [2]기본문법 1. CSS 사용방법 2가지 (1) 따로 태그생성 >>>여러 태그에 디자인 줄 때 (2)html의 속성으로 활용 내용 >>>1개 html태그에만 디자인 줄 때 2. 선택자와 속성 예시) >>> a태그에 ..

티스토리툴바