[코드스테이츠]-CSS익히기

오다경·2022년 12월 23일

코드스테이츠

목록 보기

2/13

UX와 UI의 정의

좋은 사용자 경험(UX)는 직관적이고 쉬운 UI에서 나온다.

UX(user experience) : 사용자 경험. 즉 사용자가 어떤 서비스를 직접적이거나 간접적으로 이용하면서 느끼는 반응과 행동들 같은 경험을 총체적으로 설계하는 것이다.

UI(user interface) : 인터페이스란 컴퓨터와 교류하기 위한 연결고리이다. 즉 컴퓨터에 무지한 일반 사용자가 쉽게 사용할 수 있는 인터페이스에는 앞에 “사용자"를 붙여 사용자 인터페이스, UI라고 부른다.
eg) 메시지를 보내기 위해 키보드 인터페이스를 입력하고, 마우스로 버튼 모양을 누르는 것

CSS 스타일을 적용하는 3가지 방법

1. 인라인 스타일 : html에서 태그 내 같은 줄에서 스타일을 적용한다.
2. 내부 스타일 시트 사용하기 : CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 : CSS 파일을 만들고 셀렉터를 적용하여 작성한다.

CSS 문법 구성 이해하기

기본적인 셀렉터인 id와 class의 차이점

id
1. #으로 선택한다.
2. 한 문서에 단 하나의 요소에만 적용된다.
3. 특정 요소에 이름을 붙이는데 사용한다. (여러개 사용 금지!)
eg) id를 사용할 때
#navigation-title {
color: red;
}
class
1. .으로 선택한다.
2. 동일한 값을 갖는 요소가 많다.
3. 스타일의 분류에 사용된다.
eg) class를 사용할 때
.menu-item {
text-decoration: underline;
}

자식 / 후손 / 형제 셀렉터

아래 예시로 자식, 후손 셀렉터의 차이를 알 수 있다.
<header>
	<p>
		<span>
			<p>
			</p>
		</span>
	</p>
	<p>
		<span>
			<p>
			</p>
		</span>
	</p>
</header>
자식셀렉터
자식 셀렉터는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택한다. 위의 예시의 경우 <header> 요소 바로 아래에 있는 두 개의 <p> 요소는 선택되지만, <span> 요소의 자식인 <p> 요소는 선택되지 않는다.
header > p {}
후손셀렉터
후손 셀렉터는 첫 번째로 입력한 요소의 후손을 선택한다. 위의 예시의 경우 <header> 요소의 자식인 <p> 요소뿐 아니라, <header> 요소의 자식의 자식인 있는 <p> 요소까지 모두 선택된다.
header p {}

아래의 예시로 형제 셀렉터를 알아볼 수 있다.
<header>
	<section></section>
	<p></p> 
	<p></p>
	<p></p> 
</header>
형제 셀렉터
형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택한다. 위의 예시의 경우 <section> 요소 뒤에 있는 세 개의 <p> 요소를 모두 선택한다.
section ~ p {}
인접 형제 셀렉터
인접 형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택한다. 예시의 경우 <section> 요소 뒤에 있는 세 개의 <p> 요소 중 첫 번째 <p> 요소를 선택한다.
section + p {}

이 외에도 다양한 기타 셀렉터인 가상 클래스 셀렉터, UI요소 상태 셀렉터, 구조 가상 클래스 셀렉터, 부정 셀렉터, 정합성 확인 셀레터가 있다.
이 부분은 사용할 때 구글로 검색해서 사용 방법을 익혀보자!

글꼴 크기

절대 단위: px, pt 등
상대 단위: %, em, rem, ch, vw, vh 등

일반적인 경우 rem을 사용한다. root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두 배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있다.이는 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리하다.
(em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵다)

박스모델

html에서 줄 바꿈이 되는 요소 : <div>, <p>, <h1>
html에서 줄 바꿈이 되지 않는 요소 : <span>
block 요소의 대표적인 예 : <div>, <p>
inline 요소의 대표적인 예 : <span>
-> inline요소에서의 span에서는 width와 height가 적용되지 않는다.

박스를 구성하는 요소

-border(테두리)를 기준으로 padding(안쪽여백)과 margin(바깥여백)이 있다.
-각각의 값은 top, right, bottom, left로 시계방향으로 값을 지정할 수 있다.
-콘텐츠가 박스를 뚫고 나가는 경우에는 박스 크기에 맞게 overflow 속성을 auto로
지정하면 박스 안에 스크롤을 추가하여 콘텐츠를 확인할 수 있게 만들 수 있다.

박스크기 측정 기준