CSS 기초

jung_ho9 개발일지·2022년 10월 27일

CSS

HTML/CSS

목록 보기

2/11

CSS (Cascading Style Sheets)

css는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어다. HTML로 웹 페이지의 구조를 세운 후 더 나은 UX를 제공하기 CSS로 UI 및 레이아웃을 구성할 수 있다.

사용자 인터페이스 (UI , user interface)

사용자 인터페이스는 컴퓨터에 무지한 일반 사용자도 쉽게 사용할 수 있는 인터페이스를 의미한다.

사용자 경험 (UX , user experience)

사용자 경험은 복잡한 내용을 단순하게 구분 짓고 , 페이지를 나누어 사용자가 한 페이지에서 볼 수 있는 내용을 제한하여 사용자가 하나의 내용에 집중할 수 있게 하는 것을 의미한다.

CSS 문법 구성

셀렉터는 요소 이름이나 id, 또는 class를 선택한다. 셀렉터로 특정 요소를 선택했다면, 중괄호 안에서 이 요소에 적용할 내용을 작성한다.

이 요소에 적용할 수 있는 내요을 속성이라고 하고 색상, 글자 크기 등 다양한 속성이 있다. 속성에 적용할 적절한 값을 입력하여 스타일로 표현한다. 속성과 값의 끝에는 세미콜론(;)을 붙여 속성끼리 구분한다.

CSS 파일 추가

작성된 css 파일을 HTML에 적용하는 방법은 <link> 태그 안에서 href 속성을 통해 파일을 연결할 수 있다.

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

rel은 연결하고자 하는 파일의 역할이나 특징을 나타내고 css는 stylesheet이므로 속성에 stylesheet를 추가한다.
href 속성에는 파일의 위치을 연결하고 작성한 파일이 다른 폴더에 존재하는 경우 절대 경로 또는 상대 경로를 입력해 원하는 파일을 찾아 연결할 수 있다.

CSS 스타일 적용 방법

1. 인라인 스타일

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

1. 내부 스타일 시트

<style>
  nav {
      background : bule;
      color : #eee;
  }
</style>

1. 외부 스타일 시트

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

But 관심사 분리 측면에서 인라인 스타일과 내부 스타일 시트는 권장하지 않는다.

기본적인 셀렉터(Selector)

id로 스타일링 적용

id는 문서 내에 단 하나의 요소에만 적용할 수 있는 유일한 이름이어야 하고 #을 이용해 선택할 수 있다.

<h1 id="title"> Title </h1>

css
#title { 
	color : red;
}

class로 스타일링 적용

class는 문서 내에 여러 요소에 동일하게 적용할 수 있고 .을 이용해 선택할 수 있다.

html

<h1 class="title"> Title </h1>

css
.title { 
	color : red;
}

여러 개의 class를 하나의 엘리먼트에 적용하고자 한다면 띄어쓰기로 구분한다.

<h1 class="title action" > Title </h1>

id 와 class 차이

id
- #으로 선택
- 한 문서에 단 하나의 요소에만 적용
- 특정 요소에 이름을 붙이는 데 사용
class
- .으로 선택
- 동일한 값을 갖는 요소 많음
- 스타일의 분류에 사용

텍스트 꾸미기

color : 글자 색상
background-color : 배경 색상
border-color : 테두리 색상
font-family : 글꼴 설정
font-weight : 글자 굵기
text-decoration : 글자에 밑줄과 가로줄 지정
letter-spacing : 글자 자간
line-height : 글자 행간
text-align : 글자 정렬 (

Google Fonts 서비스로 쉽게 글꼴을 바꿀 수 있음

절대 단위와 상대 단위

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

1rem 이 16px 이므로

글꼴 사이즈를 정할 때

절대 단위를 사용한다면?

px를 사용한다면 절대 단위이기 때문에 사용자 접근성이 불리함
사용자가 기본 글꼴 크기를 더 크게 설정했더라도 항상 설정된 픽셀로 고정됨
픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리

상대 단위를 사용한다면?

rem을 추천함 ! 브라우저 기본 글자 크기가 1rem이며, 두 배로 크게 하고 싶다면 2rem, 작게 하려면 0.8 rem 등으로 조절해서 사용
이는 사용자가 설정한 기본 글꼴 크기를 따르므로 접근성에 유리함
em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어려움

화면 사이즈를 정할 때

반응형 웹에서 기준점을 만들 때

반응형 웹은 디바이스의 너비에 따라 유동적인 레이아웃이 적용되는 웹사이트를 말함
이때 디바이스의 크기를 나누는 기준을 보통 px로 정함

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

vw, vh 사용 웹사이트의 보이는 영역을 Viewport라고 함
vw, vh는 각각 viewport width 와 viewport height를 뜻하며, 1vw는 보이는 영역역 너비를 1/100을 , 1vh 는 보이는 영역 높이의 1/100을 뜻함

박스모델

하나의 웹 페이지 내에 모든 콘텐츠는 고유의 영역을 가지고 있다. 그 영역은 항상 직사각형으로 이루어져 있기 때문에 박스라고 부르며 박스는 높이와 넓이, 테두리와 여백 등 다양한 속성을 가지고 있다.

block과 inline, inline-block

block

줄 바꿈이 되는 박스

inline

줄 바꿈이 일어나지 않고 크기 지정을 할 수 없는 박스

inline-block

이 두 가지 박스 종류의 특징이 섞인 박스, 다른 요소의 옆으로 붙으면서 자체적으로 고유의 크기를 가짐

줄 바꿈이 되는 요소 : <h1> , <p> ...
줄 바꿈이 되지 않는 요소 : <span> ...

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

박스를 구성하는 요소

css 박스 모델은 border(테두리)를 기준으로 padding(안쪽 여백)과 margin(바깥 여백)이 있다.

border (테두리)

각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있도록 만듭든다.

p {
	border : 1px solid red;
}

border : 테두리 지정
border-width : 테두리 두께
border-style : 테두리 스타일
border-color : 테두리 색상

margin (바깥 여백)

각 영역의 바깥에 여백을 줄 수 있다. 각각의 값은 top, right, bottom, left로 시계방향으로 돌아간다.

p {
	margin : 10px 20px 30px 40px;
}

값을 두 개만 넣으면 10px - top과 bottom 적용 , 20px - left와 right 적용
p {
	margin : 10px 20px;
}

값을 두 개만 넣으면 10px - top과 bottom 적용 , 20px - left와 right 적용
p {
	margin : 10px 20px;
}

값을 하나만 넣으면 모든 방향의 바깥 여백에 적용
p {
	margin : 10px;
}

margin-top , margin-left , margin-bottom , margin-right 로도 적용 가능

padding (안쪽 여백)

padding은 border를 기준으로 박스 내부의 여백을 지정하고 값의 순서에 따른 방향은 margin과 동일하게 top, right, bottom, left 시계방향으로 돌아간다.

p {
  padding: 10px 20px 30px 40px;
}

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

overflow

p {
	height : 40px;
    overflow : auto;
}

overflow : auto -> 값은 콘텐츠가 넘치는 경우 스크롤을 생성함
overflow : hidden -> 값은 콘텐츠가 넘치는 경우 보여지지 않음
overflow-x : 스크롤을 가로 방향으로 지정
overflow-y : 스크롤을 세로 방향으로 지정

CSS Selector

전체 셀렉터

전체 셀럭터는 문서의 모든 요소를 선택함

* {}

태그 셀렉터

같은 태그명을 가진 모든 요소를 선택함 , 복수선택 가능

h1 {}
span, h1 {}

id 셀렉터

ID 셀렉터는 #id로 입력하여 선택함

#title {}

class 셀렉터

class 셀렉터는 .class로 입력하고 같은 class를 가진 모든 요소 선택

.title {}

attribute 셀렉터

attribute 셀렉터는 같은 속성을 가진 요소를 선택

a[href] {}
p[id="title"] {}
p[class~="out"] {} 
p[class*="out"] {}

자식 셀렉터

자식 셀렉터는 첫 번쨰로 입력한 요소의 바로 아래 자식 요소를 선택
header 요소 바로 밑에 두 개의 p 요소는 선택되지만 span 요소의 자식인 p 요소는 선택되지 않음

header > p {}

<header>
	<p>1
    	<span>
        	<p>span 안에 있는 p</p>
        </span>
    </p>
     <p>2</p>
</header>

후손 셀렉터

후손 셀렉터는 첫 번째로 입력한 요소의 후손을 선택. 아래 예시의 경우 header 요소의 자식인 p 요소뿐 아니라, header 자식의 자식인 span안에 있는 p요소까지 모두 선택됨

header > p {}

<header>
	<p>1//선택
    	<span>
        	<p>span 안에 있는 p</p>
        </span>
    </p>
     <p>2</p>//선택
</header>

형제 셀렉터

형제 셀렉터는 같은 부모 요소를 공유하면서 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택
section 요소 뒤의 세 개의 p 요소가 선택됨

section ~ p {}

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

인접 셀렉터

인접 형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택함
section 요소 바로 뒤에 첫 번째 p 요소가 선택됨

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) {} 
...

부정 셀렉터

input:not([type="password"]) {} // input type이 password인 요소를 제외하고 선택
div:not(:nth-of-type(2)) {}   //자식 중 두 번째 div를 제외하고 선택

정합성 확인 셀렉터

input [type="text"]:valid {} // 정합성 검증이 성공한 input 요소 또는 form 요소를 선택
input [type="text"]:invalid {}  정합성 검증이 실패한 input 요소 또는 form 요소를 선택

jung_ho9 개발일지

꾸준하게 기록하기

이전 포스트

HTML 기초

다음 포스트