코딩 기록들

Grid 레이아웃을 만드는 property - Flex는 1차원 레이아웃 (가로 아니면 세로) - Grid는 2차원 레이아웃 (가로와 세로) - Flex 보다 복잡한 레이아웃을 간편하게 만들 수 있다. 그리드 형태 정의1 (pixel) .container { display: grid; grid-template-columns: 200px 200px 500px; grid-template-rows: 200px 200px 500px; } 그리드 형태 정의2 (비율, fraction) .container { height: 500px; display: grid; grid-template-columns: 1fr 1fr 2fr; grid-template-rows: 1fr 1fr 2fr; } 그리드형태 정의3(pixel..

용어정리 TAG : HTML에 작성하는 TAG ELEMENT : 브라우저에 보이는 요소(쓸때는 TAG, 브라우저에 보일땐 ELEMENT라고 부름) -> 브라우저에서 TAG를 분석하고 브라우저에 노출시키는 요소 DOM : ELEMENT의 집합 DOM, ELEMENT : 브라우저가 직접 관리함 TAG: 우리가 직접 사용하는것 !important - Cascading & Specificity 를 모두 무시하고 스타일을 덮어씀 - 다른 모든 선언보다 우선됨 https://developer.mozilla.org/ko/docs/Web/CSS/Specificity#!important_%EC%98%88%EC%99%B8 - 사용가능한 경우 : 명시도가 적용된 Style을 별도의 스타일로 표현할 수 없을 때 덮어쓸 용도로..

Position - floating 보다는 좀더 세밀하고 정확하게 배치할 수 있는 방법 - 총 4개의 좌표가 있고, 해당 좌표에 배치를 하는 것. - 배치하는 방법에 따라 4가지로 구분 : relative, fixed, absolute, sticky (static은 기본값. 아무런 효과없음) - static : 정상적 흐름 : html을 작성한 순서 - relative : 상대배치 : element를 작성한 위치를 기준으로 'top, left, right, bottom' 좌표가 만들어짐, 가장많이 씀 - fixed : element를 (스크롤을 하더라도)항상 같은 위치에 배치시킴 - absolute : 절대적인 위치를 지정해줌. -> 문서 내에서 절대적인 위치 지정. 개인쇼핑몰에서 배송일정 팝업 띄울때 ..

Text decoration - 텍스트의 색상이나 밑줄, 굵기, 크기 등을 처리할 수 있음 - 이름으로 쓰는 단색 ex)red, blue 은 안씀 - 색을 만들어서 쓴다 : red = rgb(255, 0, 0); or #FF0000; -- 이때, #FF0000 의 경우 2자리단위로 같은게 2개씩 있으면 하나로 줄여도 됨-> #F00 color - 텍스트의 색상 변경 text-decpration - 텍스트에 밑줄그음 font-weight - 텍스트의 굵기 조절(100~900범위의 숫자, bold 등 쓸수 있음) font-size - 텍스트의 크기 변경 * font-size를 %, em, rem 등으로 지정할 경우, 브라우저의 기본 텍스트 크기를 기준으로 계산 * - Edge: 설정 -> 브라우저 디스플레이..

Margin collapsing - Margin 을 가진 엘리먼트가 나란히 있을 때, 중첩된 Margin은 제거된다(Margin이 더 큰 쪽으로 덮어씌운다) Width & Height - Inline Element를 제외한 Block Element, Inline-Block Element의 폭(width)과 높이(height)를 지정할 수 있다 - 높이와 너비는 항상 부모 Element의 영역 내에서만 할당된다. (부모 width가 300px이라면, 자식의 width에 100% 주면 300px이 된다) width와 height는 Percent로도 값을 지정할 수 있다 - width 는 100%를 줄 수 있지만, height는 100% 주기 힘들다 - 만약, div의 높이를 100%로 설정하면? : 아무변화..

What is CSS? html = 웹페이지를 구성하는 방식 (컨텐츠를 추가 & 보여줄 때 사용, 웹페이지의 필수사항) CSS (Cascading Style Sheets) : html을 꾸밈. (색, 그림자효과 부여 & html위치 조정 등 html요소가 화면또는 기타 미디어에 표시되는 방법을 작성), 계단식 스타일의 문서(부모태그에 CSS가 정의되면 자식태그에도 동일하게 적용됨) - selector : css를 누구에게 지정할것인지 대상 선택(id, class, attribute, sudo, universial, tag ... ) - declaration : 스타일 정의, 여러개 작성할수 있음, ';' 세미클론으로 구분 - property : 이미 css에 존재하는 값 body { background-..

HTML의 주요 공통 속성 (Attributes) - 모든 태그에 쓸수있는 속성들 (java script에서 쓰기위한 용도) - accesskey : alt누르고 다른걸 눌렀을때 포커싱 - data : 데이터의 변수. 태그에 필요한 데이터(변수)를 지정할 수 있음( java script로 제어하기 위한 속성. 쇼핑몰(ex쿠팡)에 굉장히 자주 쓰임) - hidden : 보여주고싶지않을대 사용 - id : 북마크 기능을 만들때 활용 -> 한 페이지 안에서 반드시 고유해야한다 - style : 색, 굵기 등 css용도를 tag에 부여 - tabindex : tab를 눌러 선택하기 위함. 장애인차별방지법(시각장애인이 주로 사용) - title : 시각장애인이 주로 사용. 해당하는 값을 장치가 읽어줌. title..

vedio태그 - https://www.w3schools.com/html/html5_video.asp - 상세속성 https://www.w3schools.com/tags/tag_video.asp - 유트브같은 영상 표현할때 - DFY(https://www.dfy.co.kr/) 처럼 영상을 배경에 깔고 홈페이지 구성하고 싶을때 사용 Your browser does not support HTML video. Video courtesy of Big Buck Bunny. audio태그 - https://www.w3schools.com/html/html5_audio.asp Your browser does not support the audio element. controls 대신 autoplay loop 주면 위..