BackCoder

[ reset ] : 태그에 걸려있는 CSS 초기화 CSS 적용 전에 h, a 등 태그에 default 로 걸려있는 CSS 를 초기화 시키고 작업 시작 => reset 템플릿 사용 ( reset css cdn https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"> [ css 적용 우선순위 ] - 로컬에 가까운 순서대로 적용 - 로컬에서 우선순위 1. 직접 걸어둔 style 태그 2. id 3. class ( !important 부모 태그 부터 타고들어가서, ID로 CSS 를 줬다거나, 바로 class 로만 CSS 를 줬다거나 타고 들어가는 방법에 따라 점수합쳐서 우선순위 적용 => 부모 태그에서 들어가는 식으로 줘서 씹히지 않도록 => 개발자도구 st..

[ 반응형 웹 ] viewport / @media - media query => 기기별로 세팅 1. 사용 : 1개 html 파일만으로도, 자동 크기 세팅 해주는 기능 - meta 태그 - 검색엔진을 사용하는 기능인데, 이걸 사용해서 View Port 를 활성화 시킨다 html 브라우저 => pc, 노트북, 패드, 스마트폰, 워치 ( 브라우저에서도 크기에 따라 세팅 ) [ viewport 설정 ] - scalable : 확대축소 yes가능 no불가능 세트로 initial maximum 설정 필요 (1: 원본 / 2 : 두배 ) ..

[ 배치규칙 display / position / float / overflow ] block / inline / inline-block / none : 요소들을 배치하는 방식 - 기본 default 값 : block => 블록 형식으로 구성 - 각 태그들이 다 자기 블록을 가짐 - inline으로 잡으면, 최대한 한줄에 나란히 배치해서 보여주려고 조절함. (적당히 자기가 조절하면서 배치함. width 무시 ) ex.) 같은 크기의 태그일때도, inline 으로 display 잡으면 한줄에 두개 잡히고 block 형식으로 잡으면, 줄 구분 하면서 잡힘 - display : inline-block; : 섞은 형식 - display : none; : 안보이게 감..

[ 개발 방법 ] 웹페이지 => 개발자도구 => Elements => 각 태그별 픽셀 확인 [크기지정 단위] px : 16px 기본 - 직접 고정값으로 크기를 준다. % : 100% 기본 - 상대값이다 => 이걸 이용하면 창 크기에 상관없이 %로 주어지므로, 형식을 유지하며 적용 가능 em : 1em 기본 (배수) [크기지정 요소들] font-size : 16px; width / height : 200px; border margin padding --- [ Box모델 ] : 태그는 기본적으로 다 Box 형태로 이루어져 있다. => 이 Box 의 속성을 이용해서 위치조정 / 꾸미기 가능 border-width:20px; 두께 border-style:solid..

: CSS 꾸미기 적용 할껀데, 어디에 있는 어느 태그에 적용시킬꺼야? [#] 아이디속성 #special{color:green;} - 아이디 걸어둔 그 태그에만 적용 [.] 클래스속성 . target{color : blue;} - class 속성의 걸어둔 태그들에만 적용 ( 몇개의 태그만 적용하고 싶은 것에 class 걸어두고 사용 ) [*] 모두 *{color : red;} - 모든 태그에 적용 [body] body{color:pink;} - body 전체에 적용 [여러개] 쉼표 h6 , a {color:blue;} - 쉼표로 여러개 선택 적용 가능 [포함관계] 부모태그 > 자식태그 h1 > a {color:orange;} - h1 에 "직계..

[ CSS ] Cascading Style Sheet : html요소에 보여줄 방식 - 배치, 색상, 선, 크기 등 설정 (1) 부분만 적용 CSS ( inline 방식 ) 이렇게 해당 태그에 직접 적용하면 => 해당하는 h1 에만 적용 ( 로컬 개념 ) (2) Head에서 Style 태그 사용 - 안에서 설정 : 앞으로 h1 태그는 이 스타일로 할게 (3) 자체 css 파일 사용 a.css 파일 태그명 { scc속성:값; scc속성:값; } h1{color:red; font-size:20px; } css 파일에서 태그 style 설정해 두고, => html 파일에서 이렇게 "링크" 시켜서 사용 => 프로젝트할 때, CSS 를 쉽게 통일시킬 수 있다. 각 html 에서 모두 a.css 링크해서 사용하는 ..