Coding Story

이미지를 px로 지정하면 이미지가 늘어나거나 뭉개지는 현상이 발생한다. 이미지를 지정한 px을 제외하고 다른 부분은 안보이도록 자르게 하려면 이렇게 하면 된다. img { object-fit: cover; }

.box { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .box::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ }

div{ overflow:hidden; height:auto; } 이미지와 같이 안의 컨텐츠가 div 박스의 height 범위를 넘어설 때가 있다. 그럴 때 위와 같이 해주면 자동으로 div크기가 조절되어 늘어난다.

기본 값은 클릭시 검은색인데 안이뻐 보일때가 있다. 색상을 바꾸고 싶으면 이렇게 하면 된다. input:focus { outline: 1px solid gray; } 테두리를 아예 없애고 싶으면 none을 해주면 된다. input:focus { outline: none; }

https://getcssscan.com/css-box-shadow-examples CSS Scan - The fastest and easiest way to check, copy and edit CSS Goodbye to "Inspect Element" — Visualize the CSS of any element you hover over, instantly, and copy its entire rules with a single click. getcssscan.com 항상 이리저리 해보면서 box shadow를 조정하는데, 그런 시간을 단축시켜줄 사이트를 발견했다. box shadow 미리보기 모양과 코드를 제공해주기 때문에 원하는 모양을 골라 코드를 복붙하기만 하면 된다!

Reset CSS 각 브라우저마다 제공하는 기본 스타일이 다르다. Reset css란, 브라우저 간의 요소들 차이를 없애 디폴트 값으로 초기화시키는 코드다. reset.css 파일을 추가하고, https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a ..

CSS와 HTML을 섞는 방법 ​ 1.같은 html 파일에 html, css 코드 넣는 방법 -inline CSS -head 태그 안의 style 태그 안에 css 작성 2.CSS 파일을 만드는 방법 -external CSS -link태그로 파일을 연결. css와 html 과의 관계(rel)는 stylesheet이라고 명시 ​ ​ CSS ​ css가 하는일은 html 태그를 가리키는 일! Cascading Style Sheet - 브라우저가 css 코드를 읽을 때 위에 있는 코드부터 차례대로 읽음 (코드의 순서가 결과에 영향을 미친다. 밑의 줄에 있는 코드를 읽는다.) ​ css 작성법 : 태그{ 속성이름: 속성 값; } ​ selector : 가리키는 대상. 많은 속성을 가질 수 있다. ID 특정 id..

HTML, CSS, Javascript -html : markup(content) language 브라우저에게 웹사이트의 content 구조가 어떤지 설명해줌 뼈대 ​ -css : Cascading Style Sheets html과 함께 사용함 브라우저에게 웹사이트가 어떻게 보여야 하는지 알려줌 link들이 어떻게 보이는지 알려줌 근육 ​ -javascript : web programming laugnage 웹사이트를 동적 상호작용하게 해줌 뇌 ​ css와 html은 따로 하나만 사용하지 않고 같이 사용한다. HTML ​ -리스트 1. ordered list - ol 2. unordered list- ul ​ -속성(attributes) : 태그에 추가하는 부가적인 정보 ​ -href : http (or..