CSS 1 : CSS 기본 개념

목차

1. CSS란?

2. CSS 작성 방법

3. 선택자

4. 상속

5. 접근성

---

1. CSS란?

Cascading Style Sheets의 약자로, 웹페이지의 스타일을 정의하는 언어이다.

HTML로 구조/내용을 작성하고, CSS로 디자인(색상, 폰트, 레이아웃 등)을 작성한다.

 

CSS의 핵심 개념

• Cascading : 여러 스타일이 겹칠 때, 우선 순위 규칙에 따라 적용
• Selector : 어떤 HTML 요소에 스타일을 적용할 지 지정하는 문법
• Property & Value : 스타일의 속성과 속성값

 

CSS 사용 방식

• 인라인 : html 문서에서 코드 내에 직접 작성하는 방식이다.
  <p style="color: red;">
• 내부 스타일 : html 문서에서 <style> 태그를 작성하여 따로 모아 작성하는 방식이다.
  <style>
      color: "red";
      ...
  </style>
• 외부 스타일 시트 : .css 파일로 분리하여 작성하고, html 문서에는 <link>로 연결한다.
  <link rel="stylesheet" href="style.css">

---

2. CSS 작성 방법

위에서 CSS 사용 방식으로 인라인, 내부 스타일, 외부 스타일 시트로 총 세 가지 방법을 언급했는데,

그 중 가장 많이 쓰이는 외부 스타일 시트의 작성 방법을 기준으로 알아보자.

 

css를 작성하는 데에는 세 가지 요소를 사용한다.

 

• h1 : 선택자(스타일을 적용할 대상을 가리킴)
• color : 속성(어떤 속성의 스타일을 정의할 것이닞)
• #aaddcc : 속성값(어떻게 바꿀지)

// style.css
h1 {
	color: #aaddcc;
}


//index.html
...
<link rel="stylesheet" hrel="style.css>
...
<h1> Hello Word! </h1>

 

---

3. 선택자

규칙을 어떤 요소에 적용할 것인지 선택하는 부분이다.

선택자 {
	속성: 값;
    속성: 값;
}

 

 

자세한 내용은 따로 정리했다.

https://ldd6cr-adness.tistory.com/334

CSS : CSS 선택자 (CSS Selector)

 

---

4. 상속

CSS 프로퍼티 중에는 상위 요소에 적용되면, 자식 요소까지 상속되는 것들이 있다.

 

⭕ 상속되는 대표 속성들

• color
• font, font-size, font-family
• letter-spacing, line-height
• text-align, visibility

<div style="font-size: 20px;">
	parent
    <!-- child의 font-size도 20px로 노출 됨 -->
    <p>child</p>
</div>

 

❌  상속되지 않는 속성들

다음과 같은 박스 모델이나 레이아웃 관련 속성은 기본적으로 상속되지 않는다.

• width, height
• margin, padding
• border
• display, position

<div style="border: 1px solid #ccc">
	parent
    <!-- child는 border가 적용되지 않음 -->
    <p>child</p>
</div>

 

 

부모 요소의 프로퍼티를 꼭 상속받고 싶다면 inherit 값을 지정할 수 있다.

<div style="font-size: 20px">
	parent
    <!-- 원래 상속을  받지 않던 button 내부 폰트도 20px를 상속받음 -->
    <button style="font-style: ingerit">child</button>
</div>

---

6. 접근성

웹 접근성은 모든 신체적, 환경적 한계를 고려하여 개발하는 것을 의미한다.

W3C에서 설립한 WAI(Web Accessibility Initiative)에서 전문적으로 연구하며 웹 접근성 가이드라인을 제공한다.

✅ 속어, 약어 사용의 지양하기

사용자가 의미를 정확히 이해하기 어렵거나, 보조기기(스크린 리더 등)가 제대로 읽지 못할 수 있으므로

약어(AI, CSS 등)와 속어는 가능한 풀어서 작성하거나, <abbr> 태그로 전체 의미를 제공해야 한다.

<abbr title="Artificial Intelligence">AI</abbr>

✅ 콘텐츠의 제목과 단락을 명확하게 구분하기

문서 구조를 논리적으로 구성하면, 시각장애인 사용자도 스크린 리더로 제목(h1~h6)과 본문을 구분해 쉽게 탐색할 수 있다.
또한 적절한 줄바꿈과 단락 구분은 가독성을 높이고, 정보 전달력을 향상시킨다.

 

✅  키보드 동작 제공하기

<div>와 css의 무분별한 사용 지양

html의 <button>, <input>과 같은 기본 요소를 사용하지 않고, <div>와 css로 모양만 흉내낸다면,

기본 요소들이 제공하는 키보드 동작(엔터 키와 탭 키로 이동하는 상호작용)을 사용하기 어려워진다.

 

반드시 <div>를 사용해야하는 경우, 아래와 같은 추가적인 html 속성을 작성해야한다.

• role : 해당 요소의 원래 목적을 작성 (role=button)
• tab-index : 해당 요소를 탭 키로 도달하게 하는 속성으로, 탭 키로 이동할 다음 위치를 지정
• 키보드 이벤트 리스너 추가 : 버튼 동작이 엔터/스페이스로 동작하도록 자바스크립트 코드 작성

 

Focus 지점을 명확하게

어떠한 항목에 Focus가 된다면, 해당 요소에 윤곽선을 주어야 마우스 없이 키보드로 이용하는 사람들에게 포커스 지점을 명시할 수 있다.

 

멀티미디어 요소에 접근성 부여하기

스크린 리더는 이미지, 동영상, 오디오에 접근할 수 없기 때문에 src, alt와 같은 속성을 부여하여 해당 요소에 대한 설명을 주어야 한다.

의미가 없다면 빈 문자열을 지정할수도 있다.

 

 

** 최근에 많이 사용하는 프론트엔드 프레임워크에서도 웹 접근성을 어떻게 추구하는지 문서를 제공한다.

Angular : https://v17.angular.io/guide/accessibility

React : https://legacy.reactjs.org/docs/accessibility.html

 

 

 

                  flex를 이용한 레이아웃                  

유연한 레이아웃을 위해 flex와 grid 레이아웃 방식이 많이 사용된다.

 

flex는 디바이스/디스플레이의 크기에 따라 컨테이너에 들어있는 컨텐츠의 너비, 높이, 순서를 변경하여 컨테이너 공간을 효율적으로 채운다.

 

flex container와 flex items

display 프로퍼티에서 flex(inline-flex)를 가지는 요소를 flex container라고 한다.

flex container 안에 있는 자식 요소들은 flex items이다.

 

flex items는 flex-flow,flex-direction을 기준으로 배치된다.

 

 

flex container

어떤 html 요소에 display 프로퍼티로 flex나 inline-flex를 지정하면 해당 요소는 flex container가 된다.

또한 flex container에 몇 가지 flex 프로퍼티를 주어 자식 요소의 레이아웃을 변경시킬 수 있다.

 

flex-direction : main-axis의 방향 지정(아이템 배치 방향의 수평, 수직 지정)

flex-wrap : 개행 여부 지정

justify-content : main-axis의 아이템을 어떻게 배치할 것인지 결정(앞으로 정렬, 가운데 정렬, 요소 사이에 일정하게 공간 분배 등등..)

** justify-content 프로퍼티는 브라우저에 따라 지원하는 값이 제한되므로, 미리 확인 후 사용해야한다.

align-items : cross axis에 대해 item을 어떻게 배치할 지 결정

align-content : cross axis와 item 간 공간이 있을 때 공간을 어떻게 분배할 지 결정

.container {
	display: flex | ininline-flex;
}

.container {
	flex-direction: row | row-reverse | column | column-reverse;
}

.container {
	flex-wrap: nowrap | wrap | wrap-reverse;
}

.container {
	justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
	 | start | end | left | right... + safe | unsafe;
}

.container {
	align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline
    | start | end | self-start | self-end +... safe | unsafe;
}

.container {
	align-content: flex-start | flex-end | center | space-between | space-around | space-evenly |
    stretch | start | end | baseline | first baseline | last baseline+... safe | unsafe;
}

 

 

flex items

부모 요소가 flex container일 때 자식 요소들은 자동으로 flex items이 된다.

 

order : flex items의 배치 순서를 지정한다. 기본값은 0이고, 양수 음수 모두 사용할 수 있다.

button-1 {
	order: 5;
}

button-2 {
	order: 1;
}

 

 

flex-grow : item이 차지하는 비율을 나타낸다. 양수만 가능하며, 해당 프로퍼티를 가진 요소들과 균등 분배한다.

 

align-self : flex container에서 정의된 align-items의 프로퍼티를 오버라이딩 하며, 값과 동작은 align-items와 동일하다.

.item {
	align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

 

 

                  미디어 쿼리                  

미디어 쿼리는 미디어 타입과 미디어 기능을 기준으로 동작한다.

 

미디어 타입 : 모든 장치(all), 인쇄 미디어(print), 화면(screen) 등

@media screen {
	...
}

 

 

미디어 기능 : width, height 등 장치의 환경 및 특성

@media (min-width: 700px) {
	...
}

or

@media (width >= 700px) {
	...	/* 직관적이나, 지원되지 않는 브라우저가 많다. */
}

or

@media (min-width: 700px) and (orientation: landscape) {
	...	/* , and, not, only 등의 연산자로 이어서 작성할 수 있다. */
}

 

 

 

 

 

참고

기초부터 완성까지, 프런트엔드 (이재성|한정)

css box model

flex 구성 요소