프로그래머스 데브코스 TIL 3일차

프로그래머스 데브코스 TIL 3일차이다.

 

사실 AI에 의존하면 되지 않을까 해서 프론트에 흥미가 없어서 내용에 집중이 잘 되지 않았는데 프론트 엔드도 상당히 흥미로운 내용들이 많았다.

 

꾸미고 만드는걸 좋아하는 나에게 집중할 수 있는 계기가 되었기에 열심히 들었던 것 같다.

 

---

 

 

CSS 기초부터 선택자까지 체계적으로 정리하기

 

1. CSS란 무엇인가?

CSS(Cascading Style Sheets)는 HTML 문서의 시각적 표현을 정의하는 스타일 시트 언어이다. 즉, HTML이 웹 페이지의 구조를 담당한다면, CSS는 그 구조를 어떻게 보이게 할지 지정하는 역할을 한다. 글꼴, 색상, 여백, 레이아웃, 애니메이션 등 모든 시각적인 요소를 제어할 수 있다.

CSS는 다음과 같은 방식으로 HTML과 연결할 수 있다:

 

1. 인라인 스타일: HTML 태그에 직접 스타일을 지정
2. <p style="color: blue;">본문</p>
3. 내부 스타일 시트: <style> 태그를 이용하여 문서 내부에서 지정
4. <style> p { color: blue; } </style>
5. 외부 스타일 시트: .css 파일로 작성하여 HTML에서 연결
6. <link rel="stylesheet" href="style.css">

---

 

2. CSS의 주요 기능 및 속성

 

CSS는 시각적인 스타일뿐만 아니라 레이아웃 구성과 사용자 인터랙션에 대한 설정도 가능하게 한다. 아래는 주요 기능과 자주 사용하는 속성들을 분류별로 정리한 내용이다.

 

2.1 텍스트 관련 속성

• color: 글자 색상 지정
  예: color: red;
• font-size: 글자의 크기 설정
  예: font-size: 16px;
• font-family: 글꼴 지정
  예: font-family: Arial, sans-serif;
• font-weight: 글자 두께
  예: font-weight: bold;
• text-align: 텍스트 정렬 (left, right, center, justify)
  예: text-align: center;
• line-height: 줄 간격 설정
  예: line-height: 1.5;
• text-decoration: 밑줄, 취소선 등 설정
  예: text-decoration: underline;

 

2.2 박스 모델 관련 속성

• width, height: 요소의 너비와 높이 설정
• margin: 요소의 외부 여백
• padding: 요소의 내부 여백
• border: 테두리 설정
• border-radius: 테두리의 모서리를 둥글게 처리
• box-shadow: 그림자 효과를 추가

.box {
    width: 300px;
    height: 200px;
    margin: 20px;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

 

2.3 배경 관련 속성

• background-color: 배경 색상
• background-image: 배경 이미지
• background-size: 배경 이미지의 크기
• background-position: 배경 이미지 위치
• background-repeat: 반복 여부 설정

 

2.4 레이아웃 및 정렬 관련 속성

• display: 요소의 표시 방식 (block, inline, flex, grid 등)
• position: 위치 지정 방식 (static, relative, absolute, fixed, sticky)
• top, left, right, bottom: 요소의 위치 조정
• z-index: 요소의 쌓이는 순서
• float: 요소를 좌우로 띄움
• clear: float 이후 흐름 제어

 

2.5 기타 속성

• cursor: 마우스 커서 모양 지정
• overflow: 넘치는 콘텐츠 처리 방식 (visible, hidden, scroll, auto)
• visibility: 요소의 보임 여부 (visible, hidden)
• opacity: 투명도 설정
• transition: 스타일 변경 시 애니메이션 효과 부여
• transform: 회전, 확대 등 변형 효과 지정

---

3. CSS 선택자 정리

 

CSS 선택자는 HTML 요소를 선택하고 스타일을 적용하는 규칙이다. 올바른 선택자를 사용하는 것은 효율적인 스타일링의 핵심이다.

3.1 기본 선택자

선택자 설명 예시

*	전체 선택자	* { margin: 0; }
p	태그 선택자	p { color: gray; }
.class	클래스 선택자	.box { background: #eee; }
#id	아이디 선택자	#header { font-size: 24px; }

3.2 결합 선택자

선택자 설명 예시

div p	자손 선택자 (모든 하위 p)	div p { color: red; }
div > p	자식 선택자 (직계 하위)	div > p { font-weight: bold; }
h1 + p	인접 형제 선택자	h1 + p { margin-top: 0; }
h1 ~ p	일반 형제 선택자	h1 ~ p { color: gray; }

3.3 속성 선택자

선택자 설명 예시

[type="text"]	정확히 일치하는 속성	input[type="text"] { border: 1px solid gray; }
[href^="https"]	특정 문자로 시작	a[href^="https"] { color: green; }
[href$=".pdf"]	특정 문자로 끝남	a[href$=".pdf"] { color: red; }

3.4 가상 클래스 및 가상 요소

선택자 설명 예시

:hover	마우스 오버 시	a:hover { color: blue; }
:first-child	첫 번째 자식 요소	li:first-child { font-weight: bold; }
:nth-child(n)	n번째 자식 요소	tr:nth-child(2) { background: #eee; }
::before	요소 앞에 가상 콘텐츠 추가	h2::before { content: "※"; }
::after	요소 뒤에 가상 콘텐츠 추가	p::after { content: "끝"; }

---

 

마무리

 

3일차도 이렇게 끝이 났다.

 

생각보다 하루가 굉장히 빨리 간다.. 조금 더 긴장하고 하루를 살 필요가 있을까 싶다.

 

오늘도 화이팅 했고 내일도 화이팅!