원조맛집

고급 선택자 종류 input 요소중 select 와 check box는 특수한 요소라 webkit-appearance의 기본 스타일이 적용된다 따라서 내 입맛대로 스타일을 변경하려면 -webkit-appearance: none -moz-appearance: none appearance: none 을 설정해줘야 한다 폰트의 종류 제네릭의 종류가 계열의 느낌이고 이 제너릭의 종류를 타고가서 해당 제너릭의 기본 속성이 포함된 폰트 패밀리가 여러개 있는 것이다 (같은 제너릭 = 같은 뿌리라고 생각하면 되겠다) serif: 작은 돌출선이 있는 것 sans-serif: serif가 없는 것 cursive: 필기체 폰트가 보여지는 3가지 방법 font-familiy: "a-font" , "b-font", sans-s..

모바일 기기는 많은 픽셀이 작은 기기에 포함되기 때문에 기존의 브라우저에서 96px 을 1inch로 적용하는 계산식에 맞지 않게된다 (모니터에서는 잘 맞다) 그래서 실제 모바일 기기의 픽셀을 pixel ratio라고 부르는 비율을 참고해서 브라우저에서 실제 크기가 아닌 비율만큼 작아진 픽셀로 인식하게 하는 방법을 취한다 이때 실제 기기의 화면 크기를 '하드웨어 픽셀' 이라고 하며 소프트웨어상 조정된 화면의 크기를 '소프트웨어 픽셀'이라고 한다 브라우저에서 소프트웨어 픽셀로 인식하게 하기 위해 뷰포트 메타태그를 넣어준다 반응형을 위한 두가지 도구 메타 태그를 통해 줌 최대 배율, 최소 배율, 초기 브라우저 배율, 배율 가능 유무등을 지정할 수 있다 요즘엔 모바일 버전을 먼저 만들고 데스크탑 버전을 만드는게..

태그 직전에 을 넣어서 js 파일을 포함시켜준다 요소가 다 구현되고 이를 js가 건들이기에 안전하다 브라우저는 html의 요소들을 DOM (문서객체모델)이라는 가상의 모델로 구현하는데 js언어를 통해 이 dom에 접근할 수 있다 let element = document.querySelector('#아이디 .클래스 요소 etc...') 을 통해 요소 1개를 가져올 수 있고 let elements = document.querySelectorAll('#아이디 .클래스 요소 etc...') 을 통해 여러개의 요소를 가져올 수 있다 그 후 addEventListener()와 같은 메소드를 이용해서 이벤트(상황) 발생시 요소의 변화를 주는 코드를 작성할 수 있다 element.classList .add() .rem..

px,%,rem,em,vh,vw 등 다양한 종류의 단위가 있다 각각은 어떻게 적용되고, 나는 어떤걸 써야할까? 절대 길이 : px 뷰포트 길이: vh 폰트 상대 길이: rem, em %는 무엇을 기준으로 하는 걸까? %는 컨테이너 블록을 기준으로 하는데 이 컨테이너 블록은 position에 따라 달라진다 fixed인 경우 뷰포트가 %의 기준이 된다 absolute인 경우 조상(position이 static이 아닌 가장 인접한 부모 요소)콘텐츠와 패딩의 합이 %의 기준이 된다 그외에 경우 가장 인접한 block ㅎ 부모 요소의 컨텐츠를 %의 기준으로 한다 max-width,min-width: %로 값을 설정하게 되면 기기마다 그 크기가 다를건데 거대 tv같은 곳에서 너무 커지는 것을 방지하고자 max-wi..

background 특성 background-repeat: 이미지가 컨테이너보다 작을경우 반복을 하는데 no-repeat, x,y 등으로 반복을 하지 않거나 x축,y축으로만 반복하게끔 설정 가능 background-size: 너비,높이 크기 설정 (px ,% ,cover, contain ...) cover: 컨테이너를 꽉 채움 (확대,축소를 알아서 함, 따라서 이미지 잘림) contain: 이미지의 크기(비율) 그대로 출력 background-position: 이미지 위치 이동 (px은 그만큼 공간을 띄우고, %는 그만큼 이미지를 잘라냄,기본 50% 50%) background-origin: 이미지 컨테이너의 크기를 지정함 (기본값은 padding, 즉 컨텐츠+패딩까지 이미지를 채우고, border-bo..

css(캐스케이딩 스타일 시트) 뜻 : 여러 스타일이 같은 요소에 적용될 수 있다는 뜻 따라서 충돌을 해결하기 위해 명시도라는게 존재함 명시도 이해하기 우선순위 (위에 있을수록 아래와 충돌시 위에것이 적용됨) 1. 인라인 스타일 2. id 선택자 3. 클래스, pseudo클래스, 속성 선택자 4. HTML 태그 선택 5. * 전역 선택 6. 브라우저의 기본 설정 값 같은 순위일경우 css 파일상 아래에 있는것이 적용됨 상속 이해하기 스타일은 자식요소에게 상속됨(모든 스타일이 되는 것은 아님) 그리고 상속의 우선순위는 브라우저 기본 설정 값 보다 낮음(즉, 최하단 명시도) 결합자 #product h1{ //내용 } 위 처럼 할 경우 product라는 클래스를 가진 요소 안에 있는 모든 h1에 적용됨 위 처..

박스 이해하기 html 요소들은 박스(요소 컨텐츠와 border로 구성)의 형태를 띄고 있는데 border(테두리) 와 요소 컨텐츠 사이의 공간을 padding이라고 한다 border밖 공간을 margin이라고 하며 margin은 요소에 포함되지 않는다 (이때까지 명확하게 이해가 안갔는데 이 강의듣고 1방에 이해했다 갓맥스 ㄷㄷ) 마진 상쇄(margin collapsing) 두 요소의 margin이 겹치는 부분이 있으면 마진이 큰쪽이 그 공간을 차지한다(덮어씌운다) css에서 자동으로 상쇄하는 것이기에 의도하지 않았다면 margin-top 혹은 margin-bottom을 쓰도록 하자 프로퍼티 축약 border: a b c 처럼 한 줄로 작성하는 것 %의 의미 width, height를 %로 지정할 경우 ..

positioning 기본값은 static 이외에도 여러가지 설정값이 존재한다 위치를 변경하려면 기본값인 static을 사용해서는 안된다 fixed: 원래 문서 대열에서 제외시킨다(다른 요소들의 입장에서는 없는 것처럼 느껴진다), 그리고 요소를 인라인-블록 요소로 변경시킨다, top,left 같은 프로퍼티를 쓸경우 뷰포트를 기준으로 설정된다 (스크롤을 하면 따라 내려옴) z-index 화면상 x,y축이 아닌 z축 즉, 요소가 겹쳤을떄 어느 것이 위로 올지를 결정하기 위해 사용. static에서는 사용불가, 음수면 뒤로, 양수면 앞으로 (숫자 크기에 따라 상대적) 값이 같을 경우 코드상 아래에 위치한 요소가 위로 옴 absolute: 뷰포트가 아닌 html을 기준으로 위치가 결정됨 (부모 요소에 posit..