[S1U3] CSS 기초

🔸 인터페이스(interface) : 컴퓨터와 교류하기 위한 연결고리.
🔸 예전에는 버튼도 없고, 마우스도 없던 시대의 개발자는 자신이 만든 애플리케이션과 소통하기 위해서 CLI를 사용했었고, 키보드로 작성한 비밀 암호 같은 코드를 적어서 엔터를 눌러야만 애플리케이션을 작동시킬 수 있었음. 하지만 오늘날에는 간단하게 마우스로 버튼 모양의 인터페이스를 누르면 실행시킬 수 있음.
🔸 이렇게 컴퓨터에 무지한 일반 사용자가 쉽게 사용할 수 있는 인터페이스에는 앞에 “사용자"를 붙여 사용자 인터페이스, UI라고 부름.
🔸 아무리 훌륭한 내부 기능을 갖고 있더라도, UI가 없으면 소용없기 때문에, 사용자가 애플리케이션을 사용하게 하려면 UI가 꼭 필요. 이처럼 중요한 UI를 만드는 것이 프론트엔드 개발자의 역할.

사용자 경험 UX (User Experience)

🔸 사용자가 제품, 서비스, 시스템 등을 사용하면서 느끼는 전반적인 경험.
🔸 좋은 사용자 경험(UX; user experience)은 직관적이고 쉬운 UI에서 나옴.

📌 CSS의 문법 구성

🔸 Selector : 요소 이름이나 id, 또는 class를 선택.
🔸 중괄호({}) 내에 이 요소에 적용할 속성명, 속성값을 작성.
🔸 속성과 값의 끝에는 세미콜론(;)을 붙여 속성끼리 구분.

html과 css 연결하기

🔸 외부 스타일 시트
HTML 파일 외부에 css 파일을 따로 작성하는 것.

<link rel="stylesheet" href="index.css" />

<link> : HTML 파일과 다른 파일을 연결하는 목적으로 사용.
rel : 연결하고자 하는 파일의 역할이나 특징을 나타냄.
href : 파일의 위치 추가. (다른 폴더에 파일이 존재하는 경우, 절대 경로 또는 상대 경로를 입력할 수 있음)

🔸 인라인 스타일
HTML 파일 내의 요소의 같은 줄에서 스타일을 적용하는 것. 작은 웹사이트나 간단한 HTML 페이지에서는 편리할 수 있지만, 대규모 프로젝트에서는 권장되지 않음.

복잡도가 증가로 유지보수성 감소.
코드 재사용성 감소
검색 엔진 최적화(SEO)에 불리.
디자인과 로직을 분리하지 못함.

<nav style="background: #eee; color: blue">...</nav>

🔸 내부 스타일 시트
CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 <style> 요소 내에 작성하는 것.

🔸 하나에 집중하기 위해 파일이나 구간을 구분하는 관심사 분리 측면에서 인라인 스타일과 내부 스타일 시트는 권장하지 않음. 하지만 파일로 굳이 구분하지 않아도 될 만큼의 적은 CSS를 사용할 경우, 직접 CSS 속성을 추가하는 방법이 있음.

📌 기본적인 선택자 (selector)

📌 텍스트 꾸미기

색상

🔸 color : 글자의 색상을 변경, 속성값은 HEX (16진수로 RGB; Red Green Blue가 표현된 값) 또는 주요 색상의 이름을 사용할 수 있음.
🔸 background-color : 배경 색상
🔸 border-color : 테두리 색상

글꼴

🔸 font-family : 글꼴의 이름은 따옴표를 붙여서 적용할 수 있음.
🔸 사용하려는 글꼴이 존재하지 않거나, 디바이스에 따라 지원하지 않을 경우, fallback 글꼴을 추가할 수 있으며, 쉼표로 구분하여 입력. 입력된 순서대로 fallback이 적용됨.

웹 폰트 기술

로컬의 폰트 설치 상황에 상관없이 웹에서 항상 원하는 타이포그래피를 사용할 수 있게 하는 기술.

기본 사용법

@font-face 규칙을 사용해 적용.

font-family : 사용할 웹 폰트의 이름. 폰트 파일의 이름과 일치하지 않아도 되지만, 비슷하게 설정하는 것이 유지 보수에 좋음.

src : 폰트 파일의 경로와 폰트의 형식. url 폰트 파일 경로, format 폰트 파일 형식.

@font-face 규칙을 설정한 다00음, 필요한 선택자(selector)의 font-family 속성에서 사용할 웹 폰트의 이름을 호출해 사용. 만약 웹 폰트 로딩이 실패하면 다음에 선언된 폰트가 렌더링되며, 이를 폴백 폰트(fallback font)라고 함.

기타 스타일링

🔸 font-size : 크기
🔸 font-weight : 굵기
🔸 text-decoration : 밑줄, 가로줄
🔸 letter-spacing : 자간
🔸 line-height : 행간

정렬

🔸 text-align : 가로로 정렬. (속성값: left, right, center, justify)
🔸 세로로 정렬할 경우, 부모 속성이 display : table-cell이어야 vertical-align을 할 수 있음.
🔸 세로 정렬은 정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가 글자 높이보다 큰 경우에만 적용 가능.

📌 절대 단위 & 상대 단위

🔸 절대 단위 : 일반적으로 항상 동일한 크기로 간주됨. px, pt 등
🔸 상대 단위 : 다른 요소 (상위 요소의 글꼴 크기 또는 viewport 크기)와 관련이 있음. %, em, rem, ch, vw, vh 등

글꼴 사이즈를 정할 때

🔸 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우, px 사용.

인쇄와 같이 화면의 사이즈가 정해진 경우에 유리.
픽셀은 크기가 고정된 절대 단위이기 때문에 사용자 접근성에 불리.
모바일 기기처럼 작은 화면임과 동시에 고해상도인 경우에 적합하지 않음. 기본적으로 고해상도에서 1px이 모니터의 한 점보다 크게 업스케일되서 뚜렷하지 못한 형태로 출력되는 경우가 있음.

🔸 일반적인 경우, 상대 단위인 rem 추천.

root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두 배로 크게 하고 싶다면 2rem
사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리.
em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵지만, rem은 root의 글자 크기에 따라서만 상대적으로 변함.

화면 사이즈를 정할 때

🔸 반응형 웹(responsive web)에 기준점을 만들 때 px.

반응형 웹은 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트로, 디바이스 크기별로 css를 달리 적용해야 함.
디바이스 크기를 나누는 기준은 보통 px로 정함. (보통 450px 미만의 너비를 갖는 디바이스는 스마트폰 세로 모드로 생각하면 됨)

🔸 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우 vw, vh.

웹사이트의 보이는 영역을 viewport라 하며, 1vw는 보이는 영역 너비의 1/100을, 1vh는 보이는 영역 높이의 1/100을 뜻함.
화면을 가득 채우며 딱 떨어지게 스크롤되는 사이트는 100vw, 100vh를 사용해 구현한 것.
<body> 태그에서의 %는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤했을 때 보이는 영역까지 포함했을 때 비율임.

CH2. 박스모델

📌 박스모델 기초

🔸 모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 됨.
🔸 박스는 항상 직사각형이고, 너비(width)와 높이(height)를 가지고, CSS를 이용해 속성과 값으로 그 크기를 설정.

줄 바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)

🔸 block : 줄 바꿈이 되는 박스. <div>, <p>
🔸 inline : 줄 바꿈이 되지않고, 크기 지정을 할 수 없는 박스. <span>
🔸 inline-block : 줄 바꿈이 되지않고 block 박스의 특징을 가지는 박스.

inline 박스의 경우 width, height 속성이 적용되지 않음.

만약 inline 박스처럼 다른 요소의 옆으로 붙으면서, 자체적으로 고유의 크기를 가지고 싶게 하고 싶으면 display: inline-block를 적용.

📌 박스를 구성하는 요소

border (테두리)

🔸 속성값은 테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color).

margin (바깥 여백)

🔸 속성값은 top, right, botton, left로 시계 방향, top/bottom, right/left 혹은 모든 방향에 적용.
🔸 음수 값을 지정하면, 다른 엘리먼트와의 간격이 줄어듬. 극단적으로 적용하면, viewport에서 아예 사라지게 하거나, 다른 엘리먼트와 겹치게 만들 수도 있음.

padding (안쪽 여백)

🔸 속성값은 top, right, botton, left로 시계 방향, top/bottom, right/left 혹은 모든 방향에 적용.
🔸 border를 기준으로 박스 내부의 여백을 지정.

박스를 벗어나는 콘텐츠 처리

🔸 박스 크기보다 콘텐츠 크기가 더 큰 경우, 콘텐츠가 박스 바깥으로 빠져나옴. 이를 해결하기 위해서 박스 크기에 맞게 콘텐츠를 더 이상 표시하지 않거나, 혹은 박스 안에 스크롤을 추가하여 콘텐츠를 확인할 수 있게 만듬.
🔸 overflow 속성의 auto 값은, 콘텐츠가 넘치는 경우 스크롤을 생성함. 가로 방향이나 세로 방향으로 스크롤할 수 있게끔 지정하려면 overflow-x 속성과 overflow-y 속성을 이용.
🔸 넘치는 콘텐츠의 내용을 보여주고 싶지 않을 때는 hidden값을 사용.

박스 크기 측정 기준

<div id="container">
  <div id="inner">
    안쪽 box
  </div>
</div>

#container {
  width: 300px;
  padding: 10px;
  background-color: yellow;
  border: 2px solid red;
}

#inner {
  width: 100%;
  height: 200px;
  border: 2px solid green;
  background-color: lightgreen;
  padding: 30px;
}

🔸 여기서 id가 container인 박스의 넓이는 width 300px ➕padding 10px ✖️ 2 ➕border 2px ✖️ 2로 324px의 값을 가짐.
🔸 이는 박스에 적용할 여백을 고려하지 않았기 때문에 발생한 결과로, 모든 박스에서 여백과 테두리 두께를 포함해서 박스 크기를 계산하기 위해서 아래와 같이 작성함.

* {
  box-sizing: border-box;
}

🔸 box-sizing을 일부 요소에만 적용하는 경우 혼란을 가져올 수 있기 때문에, box-sizing은 일반적으로 HTML 문서 전체에 적용.
🔸 content-box는 박스의 크기를 측정하는 기본값. 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장.

CH3. CSS Selector

📌 다양한 CSS selector

기본 선택자

🔸 전체 선택자 - * : 문서의 모든 요소.
🔸 태그 선택자 : 같은 태그명을 가진 모든 요소. 복수로도 선택가능.

h1 { }
div { }

section, h1 { }

🔸 ID 선택자 - #id
🔸 class 선택자 - .class
🔸 attribute 선택자 : 같은 속성을 가진 요소 선택.

a[href] { } // href 속성을 가진 <a>요소를 선택하는 것으로 모든 하이퍼 링크를 선택하는데 사용될 수 있음.
p[id="only"] { } // id가 only인 모든 <p>요소를 선택.
p[class~="out"] { } // class 속성 값에 out이라는 단어를 포함하고 있는 모든 <p>요소 선택.
p[class|="out"] { } // class 속성 값이 out으로 시작하는 ~~
section[id^="sect"] { } // id 속성 값이 sect로 시작하는 ~~
div[class$="2"] { } // class 속성 값이 2로 끝나는 ~~
div[class*="w"] { } // class 속성 값에 w라는 문자열을 포함하고 있는 ~~

/*
|= : 하이픈으로 구분된 값에서 첫 번째 부분이 특정 값과 일치할 때 선택.
^= : 값이 정확히 일치하는지 여부와 상관없이 특정 값으로 시작하는 경우 선택.
*/

자식 / 후손 / 형제 선택자

🔸 자식 선택자 header > div : 첫 번째로 입력한 요소의 바로 아래 자식인 요소 선택.

<header>
	<div> <!-- 선택 -->
		<p>
			<div></div>
		</p>
	</div>
	<div> <!-- 선택 -->
		<p>
			<div></div>
		</p>
	</div>
</header>
// <header> 요소 바로 아래에 있는 두 개의 <div> 요소는 선택되지만, <p> 요소의 자식인 <div> 요소는 선택되지 않음.

🔸 형제 선택자 section ~ p { } : 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택.

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
</header>

🔸 인접 형제 선택자 section + p { } : 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소 선택.

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p>
	<p></p>
</header>

기타 선택자

🔸 가상 클래스 선택자 : 요소의 상태 정보에 기반해 요소를 선택

a:link { } /*사용자가 방문하지 않은 <a> 요소 선택*/
a:visited { } /*사용자가 방문한 <a> 요소 선택*/
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택*/
a:active { } /* 활성화 된(클릭된) 상태일 때 선택*/
a:focus { } /* 포커스가 들어와 있을 때 선택*/

🔸 UI 요소 상태 선택자

input:checked + span { } /*체크 상태일 때 선택*/
input:enabled + span { } /*사용 가능한 상태일 때 선택*/
input:disabled + span { } /*사용 불가능한 상태일 때 선택*/

🔸 구조 가상 클래스 선택자

p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }

🔸 부정 선택자

input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }

🔸 정합성 확인 선택자

input[type="text"]:valid { }
input[type="text"]:invalid { }

👽

코린이👽

이전 포스트

[S1U2] HTML과 자기소개 페이지 만들기

다음 포스트