728x90 > 메모/CSS22 [CSS] display: inline 과 inline-block 차이 display: inline 하고display: inline-block 차이display: inline = 딱 자기 컨텐츠 영역만 차지 = 가로 정렬이 된 것처럼 보임. = 높이가 지정이 안됨. - 높이를 지정해도 설정이 되지 않음.display:inline-block - 자기 컨텐츠 만큼 차지 - 높이 값 지정 가능= 인라인 요소지만, 블록 속성 가짐. = 높이 값을 바꿔주지 못했던 기존 인라인 요소와 달리 블록 속성이 추가돼서 하위 값을 지정할 수 있음. = 인라인 요소기 떄문에 자기 컨텐츠 만큼 차지를 해서 가로 정렬처럼 보임. = 중간에 인라인 요소가 끼어든다면, 해당 요소에 높이값은 지정되지 않은 채 차이를 보이게 됨. 2024. 6. 17. [CSS] position의 사용법 #12 위치를 내맘대로! CSS Position 이해하기 - 웹 코딩 강좌 (youtube.com)고윤서 강의 참고 (콜로소) position 속성(5 가지 속성)toprightbottomleftz-index속성 같이 쓰임기본 값 - static포지션과 쓰이는 5가지 속성은static 일 때는 적용되지 않음.속성들이 적용되기 위해서는relative를 함께 써야함.fixed = 브라우저의 "뷰포트" 기준으로 절대 위치로 이동.sticky = 평소에는 static 처럼 자리.컨테이너가 스크롤 되면서 요소가 사라질 무렵에는 위치 속성이 지정한 위치에서 고정되어 멈춤.psoition: relative원래 위치에서 상대적인 값을 추가해서 가짐position을 다주고 (기본적으로 띄우는 속성)z-index (더 띄.. 2024. 5. 13. [CSS] rem 또는 em 계산 방법 (변환) 폰트 사이즈가 19.2px 일 때, rem 으로 변환 하는 방법. ( html 의 font-size 는 16px 일 때의 경우 ) 참고 사이트 PX to REM converter (instantly and bidirectional) (nekocalc.com) PX to REM converter (instantly and bidirectional) PX ↔︎ REM conversion tables PixelsREM1px0.06rem2px0.13rem3px0.19rem4px0.3rem5px0.3rem6px0.4rem8px0.5rem10px0.6rem12px0.8rem14px0.9rem15px0.9rem16px1rem18px1.1rem20px1.3rem24px1.5rem25px1.6rem28px1.8rem32.. 2024. 4. 22. [CSS] li들 사이에 간격 주고 싶을 때 li들 사이에 간격 주고 싶을 때 li { margin-bottom: 20px; /* 아래쪽 간격 추가 */ } li:last-child { margin-bottom: 0; } 2024. 3. 29. [CSS] li 꾸밀 때 사용하는 자꾸 까먹는 것 li 꾸미기 li{ text-decoration: none; /*밑줄 제거*/ color: white; /*색 넣기*/ list-style-type: none; /*점지우기.*/ } 2024. 3. 29. [CSS] 폰트 적용하기 (구글 폰트) 폰트 적용하기 (구글폰트) Browse Fonts - Google Fonts Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 해당 사이트 이용 사용할 폰트 검색 Get font 눌러주기 Get embeded code 눌러주기 @import 를 눌러주기 CSS 맨 위에 복사붙여주기 해주면 된다. 이렇게 CSS 맨 상단에 넣어줌. 그리고 적용하고 싶은 부분 font-family 찾아서 CSS 에 넣어주기 아이디 mclive 에 적용 font-weight 를 SemibBold로 적용하기 위해 600 으로 수정. 2024. 3. 27. 이전 1 2 3 4 다음 728x90
