[REACT/CSS] CSS 기초

** 자기 공부용 및 암기용으로 포스팅하는 글 입니다.

** 정확한 정보는 보장 할 수 없으니, 참고용으로만 봐주시면 감사하겠습니다.

** 제 개인적인 생각 및 자기 암시목적으로 작성되기에 이점 양해 부탁드립니다.

 

---

들어가기에 앞서..

REACT를 사용하기 위해서 CSS에 대해 알아야 할 필요가 있다. 

REACT를 잘 사용하기 위해서 기초를 공부해보자.

 

---

★ 알아볼 내용

1. CSS란..?

2. HTML TAG별 CSS로 꾸미기
3. CSS selector

4. CSS 속성

5. 절대 단위와 상대 단위

6. block & inline-block & inline에 대하여

7. 박스 구성과 margin

 

---

 

1. CSS란..?

HTML를 보다 직관적이게 꾸며 사용자가 사용하기 더욱 편한 UI를 제공해 주는 프론트앤드 툴.

HTML파일에  아래와 같이 적용할 경우 해당 HTML과 CSS파일이 연결이 된다.

<link rel="stylesheet" href="index.css" />

---

2.  HTML TAG별 CSS로 꾸미기

HTML구성을 보면 TAG와 TAG의 id 및 class로 이루어져 있다.

이를 통해 우리는 해당 tag의 설정값을 부여할 수 있다. 부여하는 구조 및 공식은 아래와 같다.

셀렉터는 두 가지를 동시에 선언하여 선택할 수도 있고 셀럭터 문법을 사용하여 더욱 상세하게 설계 할 수 있다.

셀렉터 문법은 이후 더 자세히 다루도록 하자.

---

3. CSS selector

기본적으로 tag를 선택하고 싶다면. 해당 tag의 명을 셀렉터로 설정하면 된다.

h4 {
  color: red;
}

 

id나 class를 선택하고 싶으면 id는 '#' 으로 class는 '.' 으로 선택하면 된다.

//id 선택
#navigation-title {
  color: red;
}

//class선택
.jemma-name {
   margin: 0 0 0 10px;
}

 

특정 문법을 사용하여 선택을 할 수도 있다. 내용은 아래와 같다.

1) 전체 선택자

* { }  <!-- 전체 태그 선택 -->

 

2) attribute 선택자

 - href 속성이 있는 모든 <a> 태그 선택

a[href] {
  color: blue;
}

<a href="https://example.com">Example</a> <!-- 선택됨 -->
<a>Text without href</a> <!-- 선택되지 않음 -->

 

 

 - id 속성이 only인 모든 <p> 태그를 선택

p[id="only"] {
  color: green;
}

<p id="only">This is the only paragraph.</p> <!-- 선택됨 -->
<p id="not-only">This is not the only paragraph.</p> <!-- 선택되지 않음 -->

 

 

- class 속성에 공백으로 구분된 단어 중 하나가 out인 모든 <p> 요소를 선택

p[class~="out"] {
  color: red;
}

<p class="shout out loud">This paragraph has class "out".</p> <!-- 선택됨 -->
<p class="outfit">This paragraph does not have class "out".</p> <!-- 선택되지 않음 -->

 

 

- class 속성이 out 또는 out-로 시작하는 모든 <p> 요소를 선택

p[class|="out"] {
  color: orange;
}

<p class="out">This paragraph has class "out".</p> <!-- 선택됨 -->
<p class="out-door">This paragraph has class "out-door".</p> <!-- 선택됨 -->
<p class="outfit">This paragraph does not match the pattern.</p> <!-- 선택되지 않음 -->

 

 

 - id 속성이 sect로 시작하는 모든 <section> 요소를 선택

section[id^="sect"] {
  background-color: yellow;
}

<section id="section1">This is a section.</section> <!-- 선택됨 -->
<section id="sectA">This is another section.</section> <!-- 선택됨 -->
<section id="abc">This section does not start with "sect".</section> <!-- 선택되지 않음 -->

 

 

 - class 속성이 2로 끝나는 모든 <div> 요소를 선택

div[class$="2"] {
  border: 1px solid black;
}

<div class="row2">This div's class ends with "2".</div> <!-- 선택됨 -->
<div class="column2">This div's class also ends with "2".</div> <!-- 선택됨 -->
<div class="row20">This div's class does not exactly end with "2".</div> <!-- 선택되지 않음 -->

 

 

 - class 속성에 w가 포함된 모든 <div> 요소를 선택

div[class*="w"] {
  padding: 10px;
}

<div class="row">This div's class contains "w".</div> <!-- 선택됨 -->
<div class="window">This div's class contains "w".</div> <!-- 선택됨 -->
<div class="content">This div's class does not contain "w".</div> <!-- 선택되지 않음 -->

 

3) 자식 선택자

 - 첫 번째로 입력한 요소의 바로 아래 자식 요소 선택.

header > div { }

<header>
  <div> <!-- 선택 -->
    <p>
      <div></div>
    </p>
  </div>
  <div> <!-- 선택 -->
    <p>
      <div></div>
    </p>
  </div>
</header>

 

 

4) 형제 선택자

같은 부모 요소를 공유하면서, 첫번째 입력한 요소 뒤에 오는 두 번째 입력한 요소들을 모두 선택

section ~ p { }

<header>
  <section>
    <p></p> <!-- 선택안됨 -->
  </section>
  <p></p> <!-- 선택 -->
  <p></p> <!-- 선택 -->
  <p></p> <!-- 선택 -->
</header>

 

 

5) 인접 형제 선택자
같은 부모 요소를 공유하면서, 첫번째 입력한 요소 뒤에 오는 두 번째 입력한 요소만 선택

section + p { }

<header>
  <section></section>
  <p></p> <!-- 선택 -->
  <p></p>
  <p></p>
</header>

 

6) 부정 선택자

기존 선택자 옵션에서 부정 옵션 추가

/*  type 속성이 "password"가 아닌 모든 <input> 요소를 선택합니다. */
input:not([type="password"]) { }

<form>
    <input type="text" placeholder="Username"> <!-- 선택 -->
    <input type="password" placeholder="Password">
    <input type="email" placeholder="Email"> <!-- 선택 -->
    <input type="submit" value="Submit"> <!-- 선택 -->
</form>

 

 /* 형제 요소들 중 두 번째 div 요소를 제외한 모든 div 요소를 선택합니다.*/
div:not(:nth-of-type(2)) { }

<div>첫 번째 div</div> <!-- 선택 -->
<div>두 번째 div</div>
<div>세 번째 div</div> <!-- 선택 -->
<div>네 번째 div</div> <!-- 선택 -->

 

 

7) 기타 선택자

a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다. 이 상태는 기본적으로 페이지가 처음 로드되었을 때 링크에 적용됩니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. 브라우저는 사용자가 방문한 링크를 기억하고 스타일을 다르게 적용합니다.*/
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다.  포커스는 키보드로 링크를 탐색할 때 발생합니다. (예: 탭 키 사용)*/

input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */

p:first-child { } /* 셀렉터는 부모 요소의 첫 번째 자식 요소가 <p>일 때 선택합니다. */

ul > li:last-child { } /* ul 요소의 마지막 자식인 li 요소를 선택합니다. */
<ul>
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
    <li>마지막 항목</li>
</ul>

ul > li:nth-child(2n) { } /* ul 요소의 짝수 번째 자식인 li 요소를 선택합니다. */
<ul>
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
    <li>세 번째 항목</li>
    <li>네 번째 항목</li>
</ul>

section > p:nth-child(2n+1) { } /*  section 요소의 홀수 번째 자식인 p 요소를 선택합니다. */
<section>
    <p>첫 번째 단락</p>
    <p>두 번째 단락</p>
    <p>세 번째 단락</p>
    <p>네 번째 단락</p>
</section>
ul > li:first-child { } /*  ul 요소의 첫 번째 자식인 li 요소를 선택합니다.*/
<ul>
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
    <li>세 번째 항목</li>
</ul>

li:last-child { } /* 부모 요소의 마지막 자식인 li 요소를 선택합니다. */
<ul>
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
    <li>마지막 항목</li>
</ul>
div > div:nth-child(4) { } /* div 요소의 네 번째 자식인 div 요소를 선택합니다. */
<div>
    <div>첫 번째 div</div>
    <div>두 번째 div</div>
    <div>세 번째 div</div>
    <div>네 번째 div</div>
</div>
div:nth-last-child(2) { } /* 부모 요소의 뒤에서 두 번째 자식인 div 요소를 선택합니다. */
<div>
    <div>첫 번째 div</div>
    <div>두 번째 div</div>
    <div>세 번째 div</div>
    <div>네 번째 div</div>
</div>

section > p:nth-last-child(2n + 1) { } /* 부모 요소의 뒤에서 홀수 번째 자식인 p 요소를 선택합니다. */
p:first-of-type { } /* 형제 요소 중 첫 번째 <p> 요소를 선택합니다. */
<div>
    <p>첫 번째 단락</p>
    <span>텍스트</span>
    <p>두 번째 단락</p>
</div>

div:last-of-type { } /* 형제 요소 중 마지막 <div> 요소를 선택합니다. */
<div>
    <div>첫 번째 div</div>
    <span>텍스트</span>
    <div>마지막 div</div>
</div>

ul:nth-of-type(2) { } /* 형제 요소 중 두 번째 <ul> 요소를 선택합니다. */
<ul>
    <li>첫 번째 목록</li>
</ul>
<ul>
    <li>두 번째 목록</li>
</ul>
p:nth-last-of-type(1) { } /* 형제 요소 중 마지막 <p> 요소를 선택합니다. */
<div>
    <p>첫 번째 단락</p>
    <span>텍스트</span>
    <p>마지막 단락</p>
</div>

 

---

4. CSS 속성

속성은 아래와 같이 있으며, 더 많은 속성이 존재한다. 필요할 때 구글링 해서 더 많은 정보를 찾아 사용해보자.

 

1) 텍스트 관련 속성

• color: 텍스트 색상
• font-family: 글꼴 종류
• font-size: 글꼴 크기
• font-style: 글꼴 스타일 (예: italic)
• font-weight: 글꼴 두께 (예: bold)
• letter-spacing: 글자 간격
• line-height: 줄 간격
• text-align: 텍스트 정렬
• text-decoration: 텍스트 장식 (예: underline)
• text-transform: 텍스트 변환 (예: uppercase)
• white-space: 공백 처리 방식
• word-spacing: 단어 간격

2) 배경 관련 속성

• background-color: 배경 색상
• background-image: 배경 이미지
• background-position: 배경 이미지 위치
• background-repeat: 배경 이미지 반복
• background-size: 배경 이미지 크기
• background-clip: 배경 그리기 영역
• background-origin: 배경 위치 기준

3) 박스 모델 관련 속성

• width: 너비
• height: 높이
• margin: 외부 여백
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
• padding: 내부 여백
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
• border: 테두리
  • border-width
  • border-style
  • border-color
  • border-radius: 테두리 둥글게 하기

4) 레이아웃 관련 속성

• display: 요소의 박스 타입 (예: block, inline, flex, grid)
• position: 요소의 위치 방식 (예: static, relative, absolute, fixed, sticky)
• top, right, bottom, left: 요소의 위치
• float: 요소를 왼쪽 또는 오른쪽으로 띄움
• clear: 떠 있는 요소의 영향을 제거
• z-index: 쌓임 순서

5) 플렉스박스 관련 속성

• display: flex 컨테이너로 설정
• flex-direction: 주 축 방향 (예: row, column)
• justify-content: 주 축 정렬
• align-items: 교차 축 정렬
• align-self: 개별 아이템 교차 축 정렬
• flex-wrap: 아이템 줄 바꿈 여부
• flex-grow: 성장 비율
• flex-shrink: 축소 비율
• flex-basis: 기본 크기

6) 그리드 관련 속성

• display: grid 컨테이너로 설정
• grid-template-columns: 열 정의
• grid-template-rows: 행 정의
• grid-gap: 행과 열 간격
• grid-column: 그리드 열 위치
• grid-row: 그리드 행 위치
• justify-items: 그리드 아이템 수평 정렬
• align-items: 그리드 아이템 수직 정렬

7) 기타 속성

• opacity: 투명도
• visibility: 요소 가시성
• overflow: 넘친 내용 처리 (예: hidden, scroll)
• cursor: 마우스 커서 모양
• transition: 전환 효과
• transform: 변형 (예: rotate, scale)
• animation: 애니메이션

---

 

5. 절대 단위와 상대 단위

css에서 단위는 두 가지의 종류가 있다. 절대 단위와 상대 단위.

절대 단위는 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기를 의미한다.

주로 px를 이용하며 단위는 픽셀 단위이다.

상대 단위에서 주로 사용하는 것은 글자크기에서는 rem를 주로 사용한다.

rem은 기본 글자 크기는 1rem으로 설정하며 이를 기준으로 2rem이나 0.8rem으로 설정하여 상대적 크기 설정이 가능하다.

화면 너비나 높이의 경우 vw와 vh를 사용한다. 

1vw는 보이는 영역너비의 1/100을 의미. 1vh는 보이는 영역 높이의 1/100을 의미한다.

 

 

6. block & inline-block & inline에 대하여

박스 구성에서의 각 태그에 대한 옵션을 나타낸다. 다음 라인으로 넘어가는 요소인지, 옆으로 넘어가는 요소인지 구별 할 수 있다.

박스 구성 옵션	특징	예시
block	항상 새로운 라인에서 시작 가능한 모든 가로 공간을 차지 width와 height 속성 사용 가능	<div> <h1> <p> <section> 등등..
inline	새로운 라인을 시작하지 않음 내용에 맞는 만큼 공간 차지 width와 height 속성 사용 불가	<span> <a> <img> 등등..
inline-block	다른 요소들과 같은 라인에 있기 가능 내용에 맞는 만큼 공간 차지 width와 height 속성 사용 가능 block과 inline 요소의 장점 결합 형태	<span style="display: inline-block; ... />

 

 

7. 박스 구성과 overflow

우선적으로 레이아웃 디자인을 할 때, 박스에 적용할 여백이 기본적으로 되어 있을 것이다.

이것 때문에 레이아웃을 설계할 때 불편한 점이 있을 수 있지만 해결 할 방법이 있다.

아래와 같이 옵션을 줄 경우 박스 크기 설정에서 불편함이 해소 된다.

* {
  box-sizing: border-box;
}

 

 

이제 다시 박스 구성에 대해 알아보자

박스 구성 모델은 아래의 이미지 처럼 되어있다.

 

border는 테두리를 의미하며,

심미적인 용도 외에 각 영역이 차지하는 크기 파악용으로도 자주 사용이 된다.

p {
  border: 1px solid red;
}

border에는 여러 속성을 설정 할 수 있다. " border-style mdn " 을 검색하여 확인할 수 있다.

 

margin은 바깥 여백을 의미하며, 한꺼번에 속성 설정이 가능하다.

요소를 몇개 넣으냐에 따라 설정되는 부분이 달라진다.

// 상단, 우측, 하단, 좌측
p {
  margin: 10px 20px 30px 40px;
}

// 상단, 하단
p {
  margin: 10px 20px;
}

// 전체 방향
p {
  margin: 10px;
}

// 개별 설정도 가능하다.
p {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

// 음수로 설정 시 다른 엘리먼트와 겹치게도 설정 할 수 있다.
p {
  margin-top: -2rem;
}

 

padding은 안쪽 여백을 의미하며, margin과 동일하게 요소에 따라 설정되는 방향이 다르다.

// 상단, 우측, 하단, 좌측
p {
  padding: 10px 20px 30px 40px;
}

// 상단, 하단
p {
  padding: 10px 20px;
}

// 전체 방향
p {
  padding: 10px;
}

// 개별 설정도 가능하다.
p {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

 

박스 안에 컨텐츠가 크기가 커 밖으로 빠져나가는 경우도 존재 할 것이다.

이때 tag 속성에 overflow를 추가 할 경우 스크롤이 나타나며 밖으로 빠져나오는 사태를 방지할 수 있다.

p {
  height: 40px;
  overflow: auto;
}