목록CSS (4)

공부블로그

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 - margin & padding, display, float, position

블록 레벨 요소 : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것, 넓이가 100% , , ... 인라인 레벨 요소 : 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음 , , ... 1. 콘텐츠 영역 크기를 지정하는 width, height 속성 크기 or 백분율 or auto로 지정 주변의 여백이나 테두리를 뺀 콘텐츠 영역의 크기 box-sizing 속성 : border-box (테두리까지 포함해서 너빗값을 지정) / content-box ( 콘텐츠 영역만 너빗값을 지정, 기본값 ) 2. 여백을 조절하는 margin, padding 속성 두 박스 모델 사이의 여백 → 마진 한 박스 모델에서 테두리와 내용 사이의 여백 → 패딩 margin (마..
CSS 2022. 7. 12. 01:11
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 다음