YG - 96년생 , 강아지 있음, 개발자 희망

개인작업으로 만들어 볼 기회이기도 하고 상품이 혹했따! 바로 도전! 틈틈히 진행중인 결과물을 올려봐야겠다 https://nomadcoders.co/community/thread/711 #711 – 노마드 코더 Nomad Coders 개발자 99% 커뮤니티에서 수다 떨어요! nomadcoders.co

검색창에 이모티콘 넣는 법 이모티콘과 input 기능이 함께 나오는데 검색창 안으로 넣고 싶을 때는 .search-bar { width: 220px; height: 27px; border-radius: 5px; border: solid 1px rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; z-index: 1; opacity: 1; } 먼저 search-bar 의 너비 , 높이 그리고 flex 를 사용하고 center를 사용합니다 그 이후 .search-bar__input { width: 50px; } width 값을 주어서 search-bar 보다 작게 하여 center에 위치하게 하며 /* .search-..

이를 숨기는 방법 .screen-box{ -ms-overflow-style:none /* IE and Edge */ scrollbar-width:none /* Firefox */ } .screen-box::-webkit-scrollbar { display:none /* Chrome , Safari , Opera */ } 브라우저 환경에 따라 사용하면 되겠다

Pseudo Selector html에서 박스를 만드는데 맨 마지막 박스만 색을 변경하고 싶다 싶으면 클래스나 아이디를 새로 추가하는 것보다 더 좋은 방법인 Pseudo Selector을 이용하면 되겠다 여기서 클래스나 아이디를 입력하는 방법도 있지만 div : 하면 많은 자동완성들이 보일것이다 마지막 박스만 변경하려면 last-child를 사용하면 될것이다 https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes 의사 클래스 - CSS: Cascading Style Sheets | MDN CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을..

id id는 유일한 값으로 문서 안에서 오직 하나만 존재해야 합니다 id는 한번에 여러개를 가질 수 없습니다 "애플리케이션의 고유 영역 식별자" , 고유한 식별을 목적으로 하는 경우 사용합니다. id 특성의 값이 공백(스페이스나 탭 등)을 포함해서는 안됩니다. 공백으로 값을 구분하는 class 속성과 달리, 하나의 요소는 하나의 ID만 가질 수 있습니다. 만약 ID에 공백을 넣는다면, 브라우저는 그 공백마저 ID의 일부로 취급합니다. name name 은 문서 안에서 중복사용이 가능합니다 form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요한 속성입니다 ("폼 전송 이벤트 발생 시, 서버로 데이터를 전송하기 위한 식별자 역할") JavaScript 프로그래밍 코드를 사용하여 요소의 name..

Flexbox flexbox에는 주의해야 할 점 3가지가 있다. 자식 엘레멘트에는 어떤 것도 적지 말아야 한다. ( 부모 엘레멘트에만 명시해야함) >>자식들을 움직이려면 부모에게만 명시하면 됨 (예외적으로 부모의 지정된 align-items,justify-content의 내용을 무시하고 개별요소를 적용시킬 수 있는 align-self, justify-self를 이용할수도 있다) 다만 (부모-자식1)관계에서 (자식1-자식2)의 관계로 늘어나고 자식2의 내용을 정렬하고 싶다면 자식1에게 display:flex를 중복사용 할 수 있다. justify-content 와 align-items를 적용하고 싶으면 먼저 display:flex를 해야한다 justify-content는 주축 (main-axis)를 통해 ..

margin margin 은 box의 border(경계)의 바깥에 있는 공간 body의 경계로 부터 바깥에 있는 공간 입력하는 방법이 있는데 #id{ margin : 10px == 모든 네 면의 여백을 10px으로 설정하는 것 margin : 10px 20px == 위와 아래는 10px 왼쪽 오른쪽은 20px로 설정하는 것 margin : 10px 20px 30px == 위는 10px 왼쪽 오른쪽은 20px 아래는 30px로 설정하는 것 margin : 10px 20px 30px 40px == 위 10px 오른쪽 20px 아래 30px 왼쪽 40px로 설정하는 것 (시계방향) } margin 말고도 border, padding 입력하는 방법은 같다 border box의 경계 , 스타일을 변경할 수 있음 ..

block 블록 서식 상황에서 상자는 컨테이너 블록의 맨 위에서 시작하여 수직으로 하나씩 배치된다. 두 형제(동급) 상자 사이 수직 간격은 '여백' 속성에 의해 결정된다. 블록 서식 상황에 속하는 인접하는 블록 수준 상자 사이 수직 여백은 축소된다. 블록 서식 지정 상황에 속하는 각 상자의 왼쪽 바깥족 가장자리는 콘테이너 블록의 왼쪽 가장자리를 접한다. (오른쪽에서 왼쪽[아랍어] 방향 서식의 경우는 우측 가장자리를 접한다.)" - 9.4.1 “In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance..