728x90 반응형 > 메모/CSS12 [CSS] padding 축약 설정 padding 축약 속성은 1~4개의 값을 가질 수 있다.1개 값: 모든 방향의 패딩이 동일합니다.padding: 20px;/* padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; */ 2개 값: 첫 번째 값은 상하 패딩, 두 번째 값은 좌우 패딩입니다.padding: 20px 10px;/* padding-top: 20px; padding-right: 10px; padding-bottom: 20px; padding-left: 10px; */ 3개 값: 첫 번째 값은 상단 패딩, 두 번째 값은 좌우 패딩, 세 번째 값은 하단 패딩입니다.padding: 20px 10px 30px;/* padding-top: 20p.. 2024. 6. 23. [CSS] Pseudo, 이벤트 정리 Pseudo Class Pseudo Class - 가상 클래스: hover 할 때 , : ( 콜론) 이 하나 들어가는 것들을 CSS의 가상 클래스 라고 함.:active= 사용자에 의해 엘리먼트가 활성화 됐을 때( 마우스를 누르는 중일 때 ):hover= 사용자의 커서가 엘리먼트 위에 있을 때( 마우스가 올라가 있을 때):target= 상호작용된 요소가 가리킨 URL과target 요소가 일치할 때 사용되는 가상 class:any-link= link / visited 이 두개를 포괄하는 가상 class= 방문 여부와 관계없이 링크가 걸린 요소 전부의 style 적용 가능:checked= 대상 체크박스가 체크됐을 때:focus= 대상 요소가 활성화됐거나 된 직후일 때:focus-within= label/fo.. 2024. 6. 17. [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. [CSS] 자꾸 까먹는 가운데 중앙 정렬 텍스트 중앙정렬하기 맥도날드 라이브라는 글자를 중앙으로 오게하고싶음. HTML "MacDonald’s Live" style 태그를 추가해서 CSS 적용 text-align: center 이미지 중앙정렬 display:block; margin:auto; 2024. 3. 27. 이전 1 2 다음 728x90 반응형
