CS 기본 문법 및 참고사항
CSS 기본기를 다져야겠다는 생각이 든 계기 🙏
리액트 강의 중에 styled-components 를 적용하는 부분이 있는데, css 문법들이 난무하는 것을 보고 할 말을 잃었다.
위의 스크린샷은 어찌보면 단순한 속성들이 여러개일 뿐이라 어렵지 않아 보일 수도 있지만, position, flex, z-index, grid 등 여러개가 섞이다 보면 어느 순간 뇌정지가 온다.
그래서 어찌됐건 가져다 쓰더라도, 제대로 알고 있어야 제대로 갖다 쓸 수 있기 때문에 css를 처음부터 다시 공부하기로 했다.
헷갈리는 부분들만 정리해보자
🌈CSS: 인라인 요소와 블록 요소
CSS에서 요소(element)는 일반적으로 인라인(inline) 요소와 블록(또는 박스, block) 요소로 나뉨. 이 두 종류의 요소는 페이지의 레이아웃을 결정하는 방법에 있어서 주요 차이점을 가짐:
레이아웃
- 인라인 요소는 텍스트 또는 문장의 일부로 간주되며 텍스트와 함께 한 줄에 표시됨.
- 블록 요소는 전체 레이아웃에 영향을 주며, 항상 새로운 줄에서 시작하여 가능한한 넓게 확장됨.
크기 지정
- 블록 요소의 너비(width)와 높이(height)는 개발자가 직접 지정할 수 있음.
- 인라인 요소의 경우에는 너비와 높이를 지정해도 적용되지 않음. 이는 인라인 요소가 주로 텍스트와 같은 콘텐츠를 포함하기 때문에 그 콘텐츠의 크기에 따라 자동으로 결정되기 때문임.
마진과 패딩
- 블록 요소는 상하좌우 모든 마진(margin)과 패딩(padding)을 적용할 수 있음.
- 인라인 요소의 경우, 좌우 마진과 패딩은 적용되지만, 상하 마진은 적용되지 않음.
예시
- 인라인 요소:
<span>,<a>,<img>,<em>,<strong>등 - 블록 요소:
<div>,<p>,<h1>,<form>,<header>,<footer>등
🚀display 속성: inline-block 요소
CSS에서 inline-block은 인라인 요소와 블록 요소의 성질을 모두 가지는 특별한 유형의 요소임.
inline-block의 특성
-
인라인과 같은 특성:
inline-block요소는 인라인 요소처럼 텍스트 줄에 나란히 배치될 수 있음. 즉, 요소를 둘러싼 텍스트와 함께 한 줄에 배치되며, 새로운 줄에서 시작하지 않음. -
블록과 같은 특성:
inline-block요소는 블록 요소처럼 너비와 높이를 명시적으로 설정할 수 있음. 또한, 상하좌우의 마진과 패딩을 모두 적용할 수 있음.
inline-block의 사용
inline-block 요소는 주로 레이아웃을 세밀하게 제어하거나, 특정 요소들이 동일한 줄에 나란히 배치되도록 하면서도 각 요소의 크기와 간격을 제어할 필요가 있을 때 사용됨. 예를 들어, 메뉴 항목, 버튼, 카드 등의 UI 요소를 배치할 때 유용하게 사용할 수 있음.
예제코드
.main-nav__item {
display: inline-block;
padding: 10px;
}다양한 css 속성들
text-decoration: none; 텍스트에 적용된 스타일 제거
list-style: none; 글머리 기호 제거
💎CSS: 가상 클래스(pseudo-class)와 가상 요소(pseudo-element)
CSS에서 가상 클래스(pseudo-class)와 가상 요소(pseudo-element)는 특정 상황이나 요소의 특정 부분에 스타일을 적용하기 위해 사용되는 선택자임.
가상 클래스 (Pseudo-classes)
가상 클래스는 요소의 특정 상태를 선택하는 데 사용되며, :로 시작함. 자주 사용되는 가상 클래스에는 다음과 같은 것들이 있음:
:hover
요소에 마우스를 올려 놓았을 때 스타일을 적용함. 아래의 예시는 마우스를 올려놓았을 때 링크의 색상을 변경함:
a:hover {
color: red;
}:active
요소를 클릭하고 있을 때 스타일을 적용함. 아래의 예시는 버튼을 클릭하고 있는 동안 버튼의 배경색을 변경함:
button:active {
background-color: yellow;
}:focus
요소가 포커스를 받았을 때 스타일을 적용함. 아래의 예시는 입력 필드가 포커스를 받았을 때 테두리 색상을 변경함:
input:focus {
border-color: green;
}가상 요소 (Pseudo-elements)
가상 요소는 요소의 특정 부분을 선택하는 데 사용되며, ::로 시작함. 자주 사용되는 가상 요소에는 다음과 같은 것들이 있음:
::before
요소의 내용 앞에 콘텐츠를 삽입함. 아래의 예시는 각 항목 앞에 별표를 추가함:
li::before {
content: "* ";
}::after
요소의 내용 뒤에 콘텐츠를 삽입함. 아래의 예시는 각 링크 뒤에 화살표를 추가함:
a::after {
content: " ➡";
}::first-letter
요소의 첫 번째 글자를 선택함. 아래의 예시는 각 문단의 첫 글자의 폰트 크기를 크게 함:
p::first-letter {
font-size: 200%;
}css 기초 정리에서 끝판왕은 flex, grid 이니까, 거기까지 잘 가보자.
