CSS3
-
[html css] first / last 순서 선택자 child & of type오늘의 정보 2022. 12. 17. 08:00
같은 선상의 구조에서 first 혹은 last로 선택자를 선택할때 child를 사용하여 선택할 경우 first-child / last-child 로 선택할 경우 태그종류가 다르더라도 한묶음으로 취급 첫번째/ 마지막 태그를 선택함. 아래 예시와 같은경우 h1이 first-child h3가 last-child 로 선택됨 body 구조내에 first-child는 처음 태그인 h1이므로 h2에서 first-child로 선택해도 h2는 선택되지 않음. 대신 first-of-type을 사용해서 같은 type중 처음을 선택해야함. Header1 Header2 Header3
-
[html css] 웹폰트 넣는 방법 font-family(폰트패밀리)사용 방법 2가지오늘의 정보 2022. 12. 8. 08:00
1. 구글폰트 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 원하는 서체를 누르고 다음 화면으로 진입- 스크롤해서 아래 화면이 보일때까지 내려가서 select Thing ** + 버튼을 눌러준다. 버튼의 +가 -가 되면서 옆의 화면이 뜬다. ( 사이의 내용 css파일 상단에 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap'); 내용을 붙여 넣고, 해당 폰트를 사용할 객체의 스타일 시트 내용에 더 아래로 스크롤 하면 나..
-
[html css] select에 [appearance] 속성으로 화살표 지우고 이미지 넣기오늘의 정보 2022. 12. 4. 08:00
appearance: none; 요소의 자체구성 요소 숨김 select 태그의 css 내용에 사용 하면 원래 화살표를 지워준다. 대신 사용할 이미지는 배경으로 깔아서 넣어줌 배경으로 작은 이미지를 넣어주면 공간만큼 반복되므로 no-repeat 속성을 넣어서 한번만 나오도록 해준다. 뒤에 %로 위치 선정 ex) 100% 50% 100% (가로 위치)가장 오른쪽 50% (상하 위치) 가운데 백그라운 사이즈를 조절해서 대신할 이미지 크기 변경.