CSS 란?
2023. 4. 15. 17:41
💡 CSS(Cascading Style Sheets)
➡️ 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어
➡️ 좋은 사용자 경험을 제공하기 위한 도구
UI 와 UX?
👉🏻 사용자 인터페이스(UI, User Interface)
: 웹 애플리케이션이 제공하고자 하는 웹 서비스와 사용자를 연결해주는 매개체
👉🏻 사용자 경험(UX, User eXperience)
: 사용자가 특정 서비스를 사용하고 경험하면서 직/간접적으로 느끼는 종합적인 만족도
⭐️ UI가 깔끔하고 직관적일 수록 좋은 UX를 이끌어낼 수 있음!
1. CSS의 문법 구성
- 셀렉터(Selector) : 태그이름, id, 클래스 선택
- 속성(Attribute) : 중괄호 안에서 셀렉터에 적용할 내용 작성한 것
- 선언 구분자(세미콜론, ; ) : 속성과 값의 끝에 붙여 각 속성의 내용 구분
2. CSS 스타일 적용 방법
- 인라인 스타일 : HTML 태그에 직접 스타일을 적용하는 방식
→ 특정 태그에만 스타일을 적용해야 할 때 사용
→ 많이 사용하면 유지 보수가 어렵고 코드 가독성이 떨어지기 때문에 권장하지는 않음
<!DOCTYPE html>
<html>
<body>
<p style="color: blue;">인라인 스타일을 사용</p>
</body>
</html> 2. 내부 스타일 시트 : HTML 문서 내부에 style 태그를 사용하여 적용하는 방식
→ 간단하고 빠르게 스타일 적용 가능, 하지만 매번 HTML 태그에 스타일을 적용해야 하기 때문에 유지 보수 어려움
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>내부스타일 시트를 사용</p>
</body>
</html> 3. 외부 스타일 시트 : CSS 파일을 따로 만들어서 HTML 문서에 링크 걸어 사용하는 방식
→ 여러 HTML 문서에서 같은 스타일을 적용할 수 있으면 유지 보수 용이함
→ 제일 권장하는 방법! ('관심사 분리')
관심사 분리(seperation of concerns, SoC)?
👉🏻 간단하게 이야기하자면,
HTML은 웹 페이지의 구조와 내용만 담당하고, CSS는 디자인만 담당하도록 HTML과 CSS의 역할을 분리하는 것을 의미
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>외부 스타일 시트를 사용</p>
</body>
</html>- link 태그 : HTML 파일과 다른 파일을 연결하는 목적
- rel 속성 : 연결하고자하는 파일의 역할이나 특징 → CSS는 stylesheet
- href 속성 : 파일의 위치(절대경로 또는 상대경로)
p {
color: blue;
font-size: 16px;
}- stylesheet 확장자는 .css
3. 기본적인 셀렉터(selector)
- Id vs class
| id | class |
| # 으로 선택 | . 으로 선택 |
| 한 문서 내에서 유일한 속성값 | 한 문서 내에서 중복 가능한 속성값 |
| 특정 요소에 이름 붙이는 데 사용 | 스타일의 분류에 사용 |
- Id로 스타일링 적용하기
- 만약 html 파일에 여러 <h4> 태그가 있고, 그 중 하나에만 스타일링을 적용하고 싶다면
태그에 id 속성값을 입력하고 css 파일에 #[Id 속성값]
<h4 id="navigation-title">This is the navigation section.</h4>#navigation-title {
color: red;
}<!-- 잘못된 예제 -->
<ul>
<li id="menu-item">Home</li>
<li id="menu-item">Mac</li>
<li id="menu-item">iPhone</li>
<li id="menu-item">iPad</li>
</ul>※ Id는 하나의 HTML 문서 내에서 유일한 이름이어야 함!!!!
- class로 스타일 분류하여 적용하기
- 주로 동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해 사용
- .[class 속성값]
<!-- 바른 예제 : 하나의 class를 여러 요소에 적용하기 -->
<ul>
<li class="menu-item">Home</li>
<li class="menu-item">Mac</li>
<li class="menu-item">iPhone</li>
<li class="menu-item">iPad</li>
</ul>.menu-item {
text-decoration: underline;
}<!-- 여러 개의 class를 하나의 엘리먼트에 적용하기 -->
<li class="menu-item selected">Home</li>.selected {
font-weight: bold;
color: #009999;
}
