[CSS] Selector 정리

CSS 선택자 선택자(Selector)는 스타일을 지정하고 싶은 HTML 요소를 가르키며, 세미콜론을 구분자로 하나 이상의 선언을 포함한다. 여기서 선택자(Selector)는 p이고, 2개의 선언(Declaration)으로 이루어져 있습니다. p - 선택자 color - 속성(property), red는 속성값 padding - 속성(Property), 5px는 속성값 종류 1. 전체 선택자 전체 선택자는 별표(*)를 사용하며, HTML 내부의 모든 태그에 지정된 스타일을 적용하도록 해줍니다. /* 전체 선택자 사용방법 */ * { property : property value; } /* 사용 예시 */ * { color : blue; } 2. 태그 선택자 태그 선택자는 앞에 붙여 무언갈 따로 붙여줄 필..

• format_list_bulleted Web
• · 2022. 12. 18.
• textsms

[CSS] 벤더 프리픽스(Vendor Prefix)란?

웹 페이지를 제작할 때 HTML 태그나 CSS 속성이 어떤 브라우저의 어떤 버전에서 지원하는지 미리 확인해야 합니다. Can I use HTML, CSS, JS 등 각 브라우저의 지원 현황을 확인할 수 있는 웹 서비스입니다. https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com 빨간색 : 지원 X 초록색 : 지원 O 베이지색 : 현재 버전 어두운 초록색: 지원하기 위한 조건이 존재 위의 지원 조건을 보면 -(하이픈)을 볼 수 있습니다. 이는 '벤더 프리픽스(Vender Prefix)가 필요합니다' 라는 조건입니다. 벤더 프리픽스(Vender Prefix)란? 가장 많이 사용되는 웹 브라우저에는 익스플로러, 크롬,..

• format_list_bulleted Web
• · 2022. 12. 9.
• textsms

[CSS] Reset CSS - 브라우저에 따라 다르게 보이는 차이

웹 브라우저에는 많은 종류가 있으며 각 브라우저에 기본으로 적용된 독자적인 CSS가 존재합니다. 그렇기 때문에 브라우저 마다 다르게 표시되는 것이며 이를 방지하기 위해 CSS를 초기화하면 브라우저에 기본적으로 적용된 CSS를 취소해 다른 브라우저에서도 웹 페이지가 동일하게 보이는 효과를 가져옵니다. 초기화 방법 직접 CSS를 초기화해도 되지만 공개된 CSS를 사용하면 더 편하게 초기화 할 수 있다. destyle.css https://github.com/nicolas-cusan/destyle.css GitHub - nicolas-cusan/destyle.css: Opinionated reset stylesheet that provides a clean slate for styling your html. ..

• format_list_bulleted Web
• · 2022. 12. 9.
• textsms

[CSS] Box Model과 Box Sizing

위에 보이는 CSS 프로퍼티들을 많이 보셨겠지만, 위 프로퍼티들이 어떤 요소에 영향을 주는지 또 사용하면서 원하던 크기대로 잡히지 않는 경우가 발생하기도 하는데 왜 그런지 살펴보도록 하겠습니다. 이 부분을 이해하기 위해선 먼저 박스 모델(box model)이라는 개념을 알아야 합니다. 박스 모델(Box Model)이란? HTML의 모든 요소들은 BOX 모양으로 구성되어 있는데, 이것을 박스 모델(box model)이라고 부릅니다. 박스 모델은 안쪽부터 content, padding, border, margin으로 구분합니다. content 텍스트, 이미지, Input, div 요소 등 모든 콘텐츠 가로는 width, 세로는 height로 표현 padding - content를 둘러싼 공간(border와 ..

• format_list_bulleted Web
• · 2022. 10. 17.
• textsms