📌 학습 내용 정리
오늘은 스타일링(상속관련)하는 방법을 학습했다. 주요 개념과 적용한 스타일을 정리해본다.
1. HTML 구조
<!doctype html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>멤버 서비스 링크 예제</title>
<link rel="stylesheet" href="/src/ui/styles/01-member-service.css" />
</head>
<body>
<h1>멤버 서비스 링크 예제</h1>
<div class="member-service">
<a class="item first" href="/">홈</a>
<a class="item" href="/">로그인</a>
<a class="item" href="/">회원가입</a>
<a class="item" href="/">사이트맵</a>
<a class="item" href="/">english</a>
</div>
</body>
</html><div class="member-service">안에 멤버 서비스 관련 링크들을 배치했다.<a>요소로 각각의 링크를 만들고.item클래스를 부여했다.
2. CSS 스타일링
/* 배경색 설정 및 텍스트 변환 */
.member-service {
background-color: yellow;
text-transform: uppercase;
font: 1.125rem, suit, sans-serif;
}
/* 링크 스타일 재정의 */
.item {
text-decoration: none;
color: inherit;
}
/* 링크 앞에 ':' 기호 추가 */
.item::before {
content: ':';
}
/* 첫 번째 링크(홈)에는 기호 제거 */
.member-service a:first-child::before {
content: '';
}적용한 주요 스타일
.member-service클래스에 배경색yellow지정text-transform: uppercase;을 사용하여 모든 링크 텍스트를 대문자로 변환.item클래스에text-decoration: none;을 적용해 기본 링크 밑줄 제거.item::before { content: ':'; }을 활용해 모든 링크 앞에:기호 추가.member-service a:first-child::before { content: ''; }을 이용해 첫 번째 링크(홈)에는 기호 제거
🧐 학습하면서 배운 점
- 텍스트 변환 속성: 처음에는
font-variant를 사용해 대문자로 변환하려 했으나, 원하는 효과를 얻기 어려웠다. 검색을 통해text-transform속성을 알게 되어 적용했다. - CSS 가상 요소 활용:
::before을 사용해 링크 앞에:기호를 추가하는 방법을 배웠다. 이를 통해 가독성을 높이고 디자인 요소를 추가할 수 있었다. - 우선순위와 상속:
.member-service에text-transform을 선언하면 모든 자식 요소에 적용된다는 점을 확인했다. - 가상 요소와 우선순위 조정:
:first-child::before를 활용해 첫 번째 요소만 예외적으로 스타일을 변경할 수 있음을 학습했다.
✨ 회고
오늘 학습을 통해 CSS의 가상 요소와 텍스트 변환 속성을 깊이 이해할 수 있었다. 또한, 기존의 스타일을 재정의하면서 우선순위를 고려하는 방법을 연습할 수 있었다. 앞으로는 보다 다양한 스타일링 기법을 적용해보고, 실제 프로젝트에서도 활용할 수 있도록 연습을 계속해야겠다!
프론트엔드 공부중입니다