목록CSS (3)

공부블로그

CSS 의사클래스(pseudo class), list, table, box-sizing, transform, transition, calc( ), media query, from태그

- 의사 클래스 - CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있습니다 a:link : 아직 방문하지 않은 요소의 상태 a:visited : 방문한 후의 상태 a:active : 클릭할 때의 상태 a:hover : 마우스가 올라갔을 때의 상태 ◆ CSS List list - style - type : 마커 모양 - position : 마커 위치 - image : 마커 이미지 * 클래스 이름을 사용해 원하는 리스트만 가져오고 싶을 때 = ul.원하는 클래스 이름 (공백없이 바로 클래스 선택자 사용) sushi salad noodle html..
CSS 2022. 9. 23. 15:42
CSS 선택자

전체 선택자 * 모든 요소를 선택한다. /* Selects all elements */ * { color: green; } 유형 선택자 태그 이름을 사용해 요소를 선택한다. span { background-color: DodgerBlue; color: #ffffff; } 클래스 선택자 . 요소의 class 특성에 기반해 선택한다. Hello css hohoho hahaha .head{ text-shadow: 4px 4px 3px #77f; } ID선택자 # 동일한 id를 가진 요소를 선택한다. /* id="demo" 요소 선택 */ #demo { border: red 2px solid; } *클래스는 중복이 가능하지만 id는 유일해야한다* 선택자 목록 , 일치하는 모든 요소를 선택한다. /* 모든 spa..
CSS 2022. 9. 22. 10:05
CSS - inline/block, FlexBox

드림코딩을 보고 정리한 글입니당 + 추가 Margin: 바깥쪽 여백( 공백 ) -------------------- border ---------------------- Padding : 안쪽 여백 - block레벨(box) 요소 : , ~, , , , , 한 줄 전체를 차지한다. Display를 inline-block으로 바꾸면 가로로 채워서 박스 - inline레벨 요소: , , 컨텐츠만큼 차지한다. Display를 block으로 바꾸면 div처럼 Inline: (content자체만 꾸밈)은 내용이 없으면 아예 나오지 X Block: 일반적, 한줄씩 차지, width, height사용 Inline-block: 가로로 쪼르륵 나오는 block + 요소를 가리는..
CSS 2022. 4. 27. 02:23
이전 Prev 1 Next 다음