평소 나는 배경의 색을 지정할 때에 background-color를 사용했었다. 그러던 중 한 인강에서 background를 이용해서 배경색을 지정하는 것을 보게 되었다. 무슨 차이가 있는지 알아보자. 바로 결론부터 말하자면, background와 background-color 모두 배경 색상을 지정할 수 있다. 다만 background-color는 색깔만 지정할 수 있는 반면에, background는 color 이외의 다른 background 옵션들까지 지정해줄 수 있다. [background-color] 이 속성은 요소의 배경 색상을 지정하는데 사용된다. div { background-color: #ff0000; /* 빨간색 배경 */ } [background] div { background: #ff..

의 value 속성 태그의 value 속성은 요소의 초깃값(value)를 명시합니다 value 속성은 요소의 type 속성값에 따라 다른 용도로 사용됩니다 button / reset / submit : 버튼 내의 텍스트를 정의합니다 hidden / password / text : 입력 필드의 초깃값을 정의합니다 checkbox / image / radio : 해당 입력 필드를 선택 시 서버로 제출되는 값을 정의합니다 또한 요소의 type 속성값이 "file"인 경우에는 value 속성을 사용할 수 없습니다 문법 단점 value 속성의 단점은 초깃값을 사용자가 지우고 입력해야 한다는 점입니다 placeholder 속성을 사용하면 초깃값을 자동 삭제하도록 설정할 수 있습니다 출처 https://tcpscho..

코드를 작성하던 중 내가 작성한 코드가 적용되지 않았고 이는 user agent stylesheet에서 비롯되었음을 알 수 있었다 user agent stylesheet란? https://stackoverflow.com/questions/12582624/what-is-a-user-agent-stylesheet What is a user agent stylesheet? I'm working on a web page in Google Chrome. It displays correctly with the following styles. table { display: table; border-collapse: separate; border-spacing: 2px; border-color: g... stackov..

html의 특정 요소에만 다른 효과를 주고 싶을 때, 해당 요소에 클래스명 또는 아이디값을 할당하여 처리가 가능하다. 클래스(class)와 아이디(id)는 얼핏 보기엔 똑같은 기능을 하는 것 같지만, 알고 보면 이 둘은 큰 차이점을 가지고 있다. 이름을 불러오는 방식 클래스를 불러올 때는 클래스명 앞에 마침표(.)를 찍어준다. 아이디를 불러올 때는 아이디값 앞에 샵(#) 표시를 해준다. 아래는 아이디값과 클래스명을 모두 가진 태그가 있고, 이것을 css를 이용하여 꾸며준 예시이다. 김영희 중복 사용 여부 클래스는 중복 사용이 가능하며, 동일한 클래스명을 페이지의 여러 곳에 사용해도 무방하다. 그러나 아이디는 중복으로 사용할 수 없다. 한개의 아이디는 페이지에서 딱 한 번만 사용해야 한다. 김영희 박철수 ..

https://youtu.be/11uygoUcIm4 https://youtu.be/vODFbQm1hhw https://youtu.be/WgDpMfGByNI [index.html] 호스트가 되어보세요 도움말 회원가입 로그인 특색 있는 숙소와 즐길 거리를 예약하세요. 목적지 체크인 체크아웃 인원 1 2 검색 에어비앤비 둘러보기 숙소 및 부티크 호텔 트립 어드벤처 레스토랑 추천 여행지 에어비앤비 플러스를 만나보세요! 퀄리티와 인테리어 디자인이 검증된 숙소 컬렉션 전 세계 숙소 오두막, BALIAN BEACH, BALI BALIAN TREEHOUSE w beautiful pool ***** 185 슈퍼호스트 오두막, BALIAN BEACH, BALI BALIAN TREEHOUSE w beautiful pool ..

폰트사이트) fontawesome cdn.js [index2.html] [style2.css] *{ margin:0; padding:0; box-sizing: border-box; } body{ width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #171c3c; } .card{ width: 200px; height: 300px; background-color: #ed4848; position: relative; cursor: pointer; transition: all 0.5s; } .card:hover{ box-shadow: inset 0 0 0 100px ..