Land of Joe

align-items와 justify-content는 이제 완벽히 이해한 듯하다. 그러나 그 개념만으로는 해소되지 않는 것을 만들 일이 있었다. 한 달짜리 달력을 만드는데 div 한 칸에 '날짜'와 '스케줄 개수'를 넣어주어야 했다. 두 요소를 감싸는 div에 align-items와 justify-content 속성을 지정해주는 것만으로는 두 위치를 모두 충족할 수 없었다. 이를 위해 서칭을 하다가 display: grid, justify-items, align-content 라는 처음 보는 속성들이 있다는 것을 알게되었다. 그중에서도 먼저 align-content에 대해 알아보고자 한다. align-content 우선 align-content는 flex-wrap: wrap과 함께 아이템들을 묶은 컨테이..

이런 걸 만들게 되었다. 이거 직접 하나하나 만들어야하는 거 실화인가..? 정말??? 이러고 혼자 계속 부정하면서 미루고 미루면서 가져올 수 있는 형식(?) 있는지 구글링하는데 아무 것도 안 나와서 울면서 만들기 시작했다. 디테일을 보자면 ... 1. 이용약관 전문 페이지 > - 동그라미로 리스트화: div 태그 안에 li 태그 사용하면 됨 - 들여쓰기: li 태그 안에 text-indent: 1em 사용함 2. 개인정보 수집 및 동의 전문 페이지 > - 표가 네 개 있음 - 표 아래에 구분선(border-bottom)이 있음 - 네 개의 표 모두 비슷한 모양 (회색 제목 칸, 흰색 내용 칸) [ 회색 제목 칸 ] : 표1,2는 회색 제목 칸이 하나만 있으므로 GrayBox로 공통 사용 : 표3,4는 회..

이런 동그란 체크박스를 만들고자 하였다. 태그는 input 타입은 checkbox 그리고 추가로 border-radius: 50% 까지 넣어줬는데 변화가 없어서 머리를 쥐어뜯었다. (아니다) 구글링 끝에 이런 글을 찾았고 [CSS] checkbox 둥글게 만들기 코드 input[type="checkbox"] { width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid #999; appearance: none; cursor: pointer; transition: background 0.2s; } input[type="checkbox"]:checked { background: #32e732; border: none; } 코드 풀이 해 gurtn.ti..

https://ts2ree.tistory.com/122 검색창 만들기 오늘은 위처럼 생긴 검색창을 만들어 볼 것이다. div 태그 안에는 input 태그, img 태그가 들어있다. .search { position: relative; width: 300px; } input { width: 100%; border: 1px solid #bbb; border-radius: 8px; padding: 10px 12p ts2ree.tistory.com

0. text 타입의 태그 만들기 1. 검색창 크기 변경 .navbar-search input { width: 500px;//검색창 가로 길이 height: 45px;//검색창 세로 길이 font-size: 20px;//검색창 내부 글씨 크기 } 2. 검색창 안에 이미지 삽입 (돋보기) .navbar-search input { width: 500px; height: 45px; font-size: 20px; background-image: url('');//삽입할 이미지 url background-repeat: no-repeat;//이미지가 작아서 반복되는 것 방지 background-size: 40px;//이미지 크기 설정 background-position: right;//이미지 위치 설정 } 3. 검..