CSS
CSS(Cascading Style Sheets) : 웹페이지의 스타일과 레이아웃을 정의하는 스타일시트 언어
사용자 인터페이스 (UI)
- 인터페이스 : 컴퓨터와 교류하기 위한 연결고리
- CLI(Command Line Interface) : 명령어 인터페이스, 사용자가 터미널을 통해 애플리케이션과 상호작용하는 방식
- UI(User Interface) : 사용자 인터페이스, 일반 사용자가 애플리케이션과 상호작용할 수 있도록 만들어진 매개체
사용자 경험 (UX)
- UX(User Expertience) : 사용자가 애플리케이션을 이용하면서 느끼는 종합적인 만족
- 좋은 사용자 경험은 직관적이고 쉬운 UI에서 온다.
CSS 문법 구성
body {
color: red;
}body: 셀렉터(selector){ ... }: 선언 블록(declaration block)color: red;: 선언(declaration)color: 속성명(property)red: 속성값(value);: 선언 구분자
background속성과background-color속성의 차이
background-color: 오로지 배경색(단일 색상)만 지정할 수 있다.background-color: red; /* 키워드 값 */ background-color: rgba(225, 225, 225, 0.5); /* rgba값, 50% 불투명 */
background: 단축 속성으로 다음의 하위 속성들을 포함하고 있다.
- 하위 속성 :
background-colorbackground-imagebackground-positionbackground-repeatbackground-sizebackground-attachmentbackground-clipbackground-originbackground: linear-gradient(blue, pink); /* color 속성 */ background: url(./image0) no repeat; /* image, repeat 속성 */
CSS 적용법 (3)
인라인 스타일(Inline style)
: HTML 요소 내부에 <style> 속성을 이용해 스타일을 적용하는 방법
<nav style="color: blue; background: white"> ... </nav>내부 스타일 시트(Internal stylesheet)
: CSS 코드를 별도의 파일로 구분하지 않고, HTML문서 내의 <head> 요소 안에서 <style>요소를 사용하여 스타일을 적용하는 방법
<head>
<style>
nav {color: blue;
background: white;
}
</style>
</head>외부 스타일 시트(External stylesheet)
: .css 확장자를 가진 스타일 시트 파일을 별도로 만들고, HTML 문서에 연결하여 사용하는 법
<link>: HTML 파일과 다른 파일을 연결할 때 사용하는 요소href속성 : 파일의 경로(위치)rel속성 : 연결하고자 하는 파일과의 연결 관계(relation)
<head>
<link rel="stylesheet" href="style.css" />
</head>파일 경로 (File paths)
: 웹 사이트의 폴더 구조에서 파일의 위치를 나타내며 다음과 같은 외부 파일에 연결할 때 사용된다.
- 웹 페이지
- 이미지
- 스타일 시트
- 자바스크립트
1) 절대 경로(Absolute file paths)
: 웹 페이지나 파일의 고유한 URL
<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">
<a href="https://velog.io@wlwl99">My velog</a>2) 상대 경로(Relative file paths)
: 현재 파일의 위치를 기준으로 한 상대적인 경로
./: 현재 파일과 같은 폴더 (./ 생략 가능)
<img src="./mountain.jpg" />
<img src="mountain.jpg" />/: 현재 파일의 폴더보다 하위 폴더
<img src="/images/mountain.jpg" /> <!--하위폴더 images 안에 있는 mountain.jpg 선택-->../: 현재 파일의 폴더보다 상위 폴더
<img src="../images/mountain.jpg" /> <!--상위폴더 images 안에 있는 mountain.jpg 선택-->기본적인 셀렉터 (selector)
element로 선택
: 같은 이름의 요소에 스타일을 적용하고 싶을 때 사용한다.
/* CSS */
h4 { /* 모든 h4요소를 선택 */
color: red;
}id로 선택
: 문서 내에서 단 하나의 요소에만 특정 스타일을 적용하고 싶다면 id를 사용한다.
<!-- HTML -->
<h4 id = "nav-title"> ... </h4>/* CSS */
#nav-title {
color: red;
}class로 선택
: id는 문서 내 단 하나의 요소에만 적용할 수 있는 유일한 이름이어야 하므로, 여러 개의 요소에 동일한 스타일을 적용하고 싶다면 class를 사용한다.
<!-- HTML -->
<ul>
<li class="menu item">Mac</li>
<li class="menu item">iPad</li>
<li class="menu item">iPhone</li>
</ul>/* CSS */
.menu-item {
text-decoration: underline;
}- 하나의 요소에 여러 개의 class를 적용할 수도 있다. (띄어쓰기)
<li class="menu-item selected">Mac</li>정리
| id | class | |
|---|---|---|
| 선택자 | # 으로 선택 | . 으로 선택 |
| 중복 사용 | 한 문서에 단 하나의 요소에만 적용 | 여러 개의 요소에 적용 |
| 목적 | 특정 요소에 이름을 붙이는 데 사용 | 스타일의 분류(classification)에 사용 |
개발 공부 기록 블로그