Style Sheet/CSS

CSS 레이아웃 구성 방법 Floats, Positioning, Display, Box Model, CSS Grid, Flex Box Floats left : 요소를 왼쪽으로 띄웁니다. right : 요소를 오른쪽으로 띄웁니다. none : 플로팅을 전혀 지정하지 않습니다. (기본값) inherit : 플로팅 속성의 값을 요소의 부모 요소에서 상속하도록 지정합니다. Float 속성 설정 : 요소에 'float' 속성을 적용하고 원하는 방향을 지정합니다. Float 해제 : Float를 적용한 요소 다음에 다른 요소가 따라오는 경우, 그 요소의 레이아웃이 예상치 못하게 변경될 수 있습니다. 이를 방지하기 위해 'clearfix' 클래스를 추가하는 것입니다. 예시코드👇 더보기 위 코드에서는 '.box' 클래..

반응형 웹(Responsive Web) 반응형 웹(Responsive Web)은 다양한 디바이스( 데스크톱, 노트북, 태블릿, 스마트폰 등 )에서 웹 사이트가 적절하게 표시되도록 하는 디자인 및 개발 접근 방식입니다. 주요 특징과 장점 다양한 디바이스 호환성 : 반응형 웹은 데스크톱, 노트북, 태블릿, 스마트폰 등 모든 디바이스에서 일관된 경험을 제공합니다. SEO 향상 : 구글과 같은 검색 엔진은 모바일 친화적인 웹 사이트를 선호하며, 반응형 디자인은 SEO(검색 엔진 최적화)를 향상시키는 데 도움이 됩니다. 유지 보수 용이성 : 하나의 코드베이스를 유지보수하면 되므로 개발 및 업데이트가 간편합니다. 사용자 경험 향상 : 사용자는 화면크기에 관계없이 일관된 경험 느낄 수 있습니다. 반응형 웹의 핵심 원..

CSS 선택자(selector) 우선순위 CSS 선택자 우선순위는 스타일 규칙이 적용될 때 어떤 규칙이 우선적으로 적용되는지를 결정합니다. 기준은 다음과 같습니다. 점수가 높은 선언이 우선합니다. 점수가 같으면, 가장 마지막에 작성된 선언이 우선합니다. 점수는 비유가 아닌 진짜 점수입니다. 선택자 점수 매기기 !important : 무한 ♾️ div { color: red !important; } !important를 속성 값 옆에 작성하면 우선순위가 가장 높게 부여가됩니다. 인라인 선언 : 1000점 Contents 인라인 작성 방식은 html 문서 내부에서 style 속성에 직접 스타일을 작성합니다. 우선순위가 너무 높기 때문에 CSS에서 !important를 써주지 않는 이상 다른 스타일을 덮을 수..

CSS 선택자(selector) 선택자(selector)란 CSS로 UI 의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다. 선택자의 종류 선택자의 종류는 타입 선택자, 아이디 선택자, 클래스 선택자, 전체 선택자, 하위 선택자, 자식 선택자, 인접 선택자, 형제 선택자, 그룹 선택자, 속성 선택자, 가상 클래스 선택자, 가상요소 선택자, 종속 선택자, 선택자의 우선순위 가있습니다. 타입 선택자 p{ color: red; } HTML의 태그 이름을 선택자로 사용할 수 있습니다. 아이디 선택자 #red { color: red; } HTML 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, 다른 요소에 같은 id를 주어서는 안됩니다. CSS에서는 id선택자 앞에 '#'을 붙여..

CSS란? Cascading Style Sheets 약자로, HTML, XHTML, XML 같은 문서의 스타일을 꾸며주는 스타일 시트 언어입니다. HTML과 CSS 설명 HTML(구조), CSS(스타일) 나눌수 있습니다. HTML은 건축에서 건물의 철골 구조를 만드는 것과 비슷하고 어디에 위치할지 웹페이지의 기본적인 구조를 정의합니다. 이는 텍스트, 이미지, 링크 등의 콘텐츠가 어디에 위치할지를 정의합니다. CSS는 마치 건축에서 외부 장식이나 인테리어 디자인을 하는 것과 비슷합니다. 건축가가 건물의 구조를 만든 후, 디자이너가 외부 모양과 내부를 꾸미는것 처럼, CSS는 HTML에서 정의된 구조를 스타일링하고 디자인합니다. 이는 색상, 폰트, 크기 간격 등의 스타일을 적용하여 웹 페이지를 더욱 시각적으..