영이로운 개발 생활 ⌯･˕･⌯ಣ

말풍선 만들기!넘버 카운팅을 위해 말풍선을 만들려고 한다.   에 숫자를 써주고배경색을 넣어 동그랗게 만들어준다  그럼 이런 모양이 나온다. 말풍선의 모양 처럼 꼬리를 넣어주려고 한다.   ::after 가상 선택자를 사용해서 넣어준다.4면 에서 한쪽을 제외한 나머지 부분은 투명으로보이게 하여 없애준다. transform: rotate 를 사용해 기울여준다. 동그라미 위로 작은 삼각형이 올라와z-index 로 아래로 내려준다.(여기에만 주면 아예 내려가서 .num_count 에z-index: 1을 주니 말풍선 뒤로 잘 보인다.)   결과적으로 이런 말풍선 모양이 나타난다 :)

bacground :  백그라운드 배경색  -  이미지 경로 url  - 반복여부  - 백그라운드 위치(가로, 세로)  / 사이즈  background 배경색 background 이미지 경로 background 가로위치 세로위치background 사이즈를 넣으려면 꼭 '/'를 (슬래시로 구분) 써준다.백그라운드 사이즈는 %나 px, cover 또는 contain 중 하나 사용background 이미지 반복여부 background 이미지 스크롤 여부

Grid(그리드)css 그리드 레이아웃은 웹페이지 제작을 위한 이차원 레이아웃 시스템!그럼, flex는 일차원 레이아웃 시스템!그리드는 수평선, 수직선으로 이루어져있으며하나의 그리드는 columns, rows로 구성되어있다.columns: 열의 크기를 정의row: 행의 크기를 정의설정하기부모요소 container --> 그리드 컨테이너자식요소 item --> 그리드 아이템display: grid 를 설정!! 100px 씩 설정을 해주고 확인을 해보니 item 들이 각 100px 자리잡혀있다. (가로)*반응형으로 진행할 때 px값 사용은 자제..*fr로 사용! (공간 비율)숫자 비율대로 영역의 크기를 나눈다.1fr은 1:1:1 의 크기를 만들겠다는 의미!그럼 이렇게 1:1:1 로 item 들이 영역을 가지..

태그의 cols 속성은 텍스트 입력 영역 중 보이는 영역의 넓이!!(👉ﾟヮﾟ)👉 작성방법  태그의 rows 속성은텍스트 입력 영역 중 보이는 라인의 수!!(👉ﾟヮﾟ)👉 작성방법 예시넓이 80만큼의  보이는 라인의 수는 10줄로 설정!정말 10줄에 작성할 수 있는지 세보았다10까지 열 줄을 적을 수 있었다* textarea 속성을 지정하지 않아도텍스트 입력 영역의 width, height 은 css에서 설정할 수 있다!오늘도 영이로운 개발 완👍

영이로운 개발 생활 ( ˶’ᵕ’˶ )readonly 속성 input 태그에서 자주 사용되는 readonly  속성,,읽기 전용으로 처리하는 방법 HTML에 태그에 "readonly"  속성을 준다. ✔입력하면선택은 되지만 수정할 수 없게 된다사용자에게 선택되었다는 효과를 보여주기 위해background-color를 주려고 한다. 필요 없으면 css에 넣지 않고 html에만 사용해도 된다.   css에 background-color를 적용시키면!! 짠! 이렇게 변하게 된다!

🌟기초 세팅🌟 CSS폰트 설정하기! 웹 폰트 불러오기 👉 한글: 눈누폰트 👉 영문: 구글폰트 사용할 폰트 검색 후 사용할 굵기 ➕ 눌러서 추가! @import 에서 부분 복사 reset.css 맨 위에 붙여 넣기 해준다. (맨 위쪽에 넣어주는 이유: 제일 먼저 불러올 수 있게!) 기본 폰트는 맨 위에 넣어주고 font-famile 복사 후 ( font-family: 'Roboto', sans-serif; ) 아래 body 부분에 붙여넣기해준다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

⭐ overflow: hidden - 지정한 넓이를 넘어가면 보이지 않게 처리 ⭐ text-overflow: ellipsis - 지정한 넓이를 넘어가면... 부호 표시 ⭐ white-space: nowrap - 줄바꿈 하지 않고 한 줄로 나오게 처리 ⭐ word-break: break-all - 어절이 유지되지 않고 끊어져서 줄바꿈 됨 🌈 말 줄임을 하려면 블록 요소여야 함 인라인 요소는 가로 넓이를 가질 수 없기 때문에 또한, 한 줄일 때 말 줄이기를 하고 싶으면 white-space: nowrap을 적용 ▶ 여러줄 일 때 텍스트 말 줄이기 - 위에 한 줄과 다르게 white-space 속성이 필요 없음 overflow, text-overflow 속성은 필요 overflow: hidden; text-o..