본문 바로가기

✏️ 공부/HTML • CSS3

[CSS] '가상 클래스 선택자'와 '가상 요소 선택자' 📘 가상 클래스 선택자(Pseudo class selector) 콜론 1개 사용 실재로 html에 존재하지 않는 클래스지만, 마치 클래스가 존재하는것 처럼 작동한다고 하여 가상 클래스 선택자로 부른다. 가상 클래스 선택자 설명 :nth-child(n) • 해당 클래스명의 n번째 자식인 엘리먼트를 선택 :nth-child(odd) • 해당 클래스명의 홀수 번째 자식인 엘리먼트를 선택 :nth-child(even) • 해당 클래스명의 짝수 번째 자식인 엘리먼트를 선택 :nth-child(3n) • 해당 클래스명의 3번째 자식마다 엘리먼트를 선택 :nth-child(3n+1) • 해당 클래스명의 3n+1번째 자식인 엘리먼트를 선택 a:visited • 방문한 적이 있는 링크를 선택 hello world 📘 사.. 2022. 9. 15.
[CSS] @font-face와 google fonts 사용 방법 * 공부한 내용을 다시 기억하고 정리하기 위해 쓰는 글입니다. * 부족한 내용이나 틀린 내용을 알려주시면 감사합니다. @font-face 사용하는 방법 (단, 폰트 파일 갖고 있어야 함) @font-face { font-family: '폰트명_지어주면_됨R'; font-weight: 400; src: url(폰트_디렉토리_경로); } @font-face { font-family: '폰트명_지어주면_됨B'; font-weight: 800; src: url(폰트_디렉토리_경로); } body { font-family: '폰트명_지어주면_됨R'; } 근데 위와 같은 경우는 폰트 파일을 내가 갖고있어야 함. 그리고 한글 폰트는 용량이 커서 1~2개만 사용해야 함. (용량 줄이려면 ttf 대신 woff 쓰면 됨).. 2022. 7. 25.
[HTML] ul, ol, dl 언제 쓰는 거임? HTML5 에는 리스트(목록)을 만드는 태그가 3개 있다. ul (Unorder List) : 순서가 없는 리스트 ol (Order List) : 순서가 있는 리스트 dl (Description List) : 설명 정리 리스트 나는 여태껏 코드를 작성 하면서 ul 을 제일 많이 사용했다. 사실 처음에 배울 땐 ul 밖에 안배워서 몰랐다. 나중에 혼자 강의 보고 공부하면서 ol, dl 의 존재를 알았음; ul 과 ol 은 직계 자식으로 li 태그만을 사용한다. dl 은 dt, dd 이런 태그를 사용함. ul 을 사용하면 이런 목록이 생긴다. 여기저기 목록 형식의 UI에 많이 사용한다. ol 을 사용하면 이런 번호로 된 목록이 생긴다. 주로 실시간 검색어나 레시피 같은 순서가 필요한 곳에 사용한다. dl 은.. 2022. 5. 24.