[멋쟁이사자처럼 부트캠프 TIL 회고] 백엔드 부트캠프 13기: Java 23일차 CSS

CSS

웹 페이지의 디자인과 레이아웃을 정의하기 위한 스타일 언어

 

CSS의 주요 역할

1. 스타일 지정:
   • 텍스트의 색상, 폰트, 크기, 배경색 등을 지정.
   • 예: 제목을 빨간색으로 만들거나 본문 글씨체를 바꾸는 등.
2. 레이아웃 구성:
   • 웹 페이지의 요소를 정렬하고 배치.
   • 예: 화면 중앙 정렬, 요소 간의 간격 조정.
3. 반응형 웹 디자인:
   • 화면 크기나 디바이스 종류에 따라 다른 스타일을 적용.
   • 예: 모바일, 태블릿, 데스크톱에 맞는 레이아웃 제공.
4. 일관성 유지:
   • 한 번 정의한 스타일을 여러 페이지에서 재사용 가능.

 

별도의 CSS 파일에 작성하고 HTML에서 링크하는 법

<link rel="stylesheet" href="styles.css">
-------------------------------------------
(styles.css 예시)
h1 {
    color: green;
}

 

CSS의 기본 구성 요소

1. 선택자 (Selector):
   • 스타일을 적용할 HTML 요소를 지정.
2. 속성 (Property):
   • 스타일의 종류를 정의.
   • 예: color, font-size, margin 등.
3. 값 (Value):
   • 속성에 적용할 구체적인 값.
   • 예: red, 16px, auto 등.

1.  

 

• 자주 쓰이는 30가지 CSS 선택자 설명 웹페이지.

https://webdesign.tutsplus.com/the-30-css-selectors-you-must-memorize--net-16048t?ec_unit=translation-info-language

 

• 텍스트와 글꼴 스타일링 속성

/* 글자 색상 설정 */
color: red;

/* 글자 크기 설정 */
font-size: 16px;

/* 글꼴 설정 */
font-family: Arial, sans-serif;

/* 글자 굵기 설정 */
font-weight: bold; /* 100~900, normal, bold */

/* 줄 간격 설정 */
line-height: 1.5;

/* 텍스트 정렬 설정 */
text-align: center; /* left, right, justify */

/* 밑줄, 취소선 등 설정 */
text-decoration: none; /* underline, overline, line-through */

/* 텍스트 대소문자 변환 */
text-transform: uppercase; /* lowercase, capitalize */

기타 유용한 속성

overflow: 넘친 콘텐츠 처리
overflow: hidden; /* scroll, auto, visible */

opacity: 투명도 설정
opacity: 0.5; /* 0~1 */

cursor: 마우스 커서 모양 설정
cursor: pointer; /* default, move, text */

 

/* 카드 디자인 */
.card {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 버튼 스타일 */
.btn {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

 

1. em vs rem 차이

em과 rem은 모두 상대적인 단위로, 주로 글꼴 크기나 레이아웃 크기를 설정할 때 사용됩니다. 하지만 그 차이는 상속 방식에 있습니다.

• em:
  em은 현재 요소의 폰트 크기를 기준으로 크기를 계산합니다. 즉, em 값은 부모 요소나 자기 자신의 폰트 크기에 따라 달라집니다.
• 예를 들어:

p {
    font-size: 2em; /* 부모 요소의 글꼴 크기 2배 */
}

만약 부모 요소가 font-size: 16px라면, p의 글꼴 크기는 32px가 됩니다.

 

• rem:
  rem은 루트 요소(html)의 폰트 크기를 기준으로 크기를 계산합니다. 즉, 항상 html 요소에 설정된 폰트 크기를 기준으로 계산됩니다.
• 예를 들어:

html {
    font-size: 16px;
}

p {
    font-size: 2rem; /* html의 글꼴 크기 2배 */
}

html의 기본 폰트 크기가 16px이라면, p의 글꼴 크기는 32px가 됩니다.

차이점 요약:

• em: 현재 요소 또는 부모 요소의 글꼴 크기를 기준으로 설정.
• rem: 루트 요소(html)의 글꼴 크기를 기준으로 설정.

 

2. span vs div 차이점

span과 div는 HTML에서 주로 레이아웃을 잡거나 스타일을 적용하기 위해 사용되는 컨테이너 요소입니다. 두 요소는 주로 사용되는 목적과 디스플레이 속성에 차이가 있습니다.

• span:
  • 인라인 요소입니다.
  • 콘텐츠를 구분할 때 사용되며, 줄 바꿈을 일으키지 않습니다.
  • 텍스트나 작은 영역을 스타일링하거나 그룹화할 때 사용합니다.
•  

예:

<p>This is a <span style="color: red;">highlighted</span> text.</p>

• div:
  • 블록 요소입니다.
  • 기본적으로 줄 바꿈을 일으키며, 여러 개의 요소를 그룹화하는 데 사용됩니다.
  • 레이아웃을 구성할 때나 여러 콘텐츠를 구분할 때 주로 사용됩니다.

예:

 

<div style="background-color: lightgray; padding: 10px;">
    <p>This is a div container.</p>
</div>

 

차이점 요약:

• span: 인라인 요소, 텍스트나 작은 영역을 스타일링할 때 사용.
• div: 블록 요소, 콘텐츠를 그룹화하거나 레이아웃을 구성할 때 사용.

 

---

https://css3generator.com/

CSS3Generator by @RandyJensen

https://meyerweb.com/eric/tools/css/reset/

CSS Tools: Reset CSS

 

 

위와 같은 사이트에서 CSS에 대한 도움을 얻을 수 있다.