🔥 CSS 기초
1. CSS와 프론트엔드 개발
CSS (Cascading Style Sheets) : 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어
- 좋은 사용자 경험을 제공하기 위한 도구이다.
사용자 인터페이스(UI; user interface)
사물 간 또는 사물과 인간 간의 의사소통이 가능하도록 일시적, 영구적인 접근을 목적으로 만들어진 매개체
- 직관적이고 쉬운 UI를 제작하는 것이 프론트엔드 개발자의 역할이다.
사용자 경험(UX; user experience)
사용자가 어떤 제품이나 서비스를 이용하면서 축적하게 되는 모든 지식과 기억, 행동과 감정의 총체적 경험
- 좋은 사용자 경험(UX)는 직관적이고 쉬운 UI에서 나온다.
2. CSS 따라하기
CSS 문법
선택자(selector) : 스타일을 적용할 HTML 요소를 가리키는 데 사용 (id, class)
속성(Porperty) : 중괄호 안에 요소에 적용할 수 있는 내용을 작성하여 요소에 적용할 수 있는 내용
속성의 값의 끝에 세미콜론(;)을 붙여 속성끼리 구분한다.
(색상, 글자크기 등 다양한 속성 존재)
HTML에 CSS 적용 3가지 방법
- 외부 스타일 시트 : CSS를 별도의 파일로 분리시키는 방법
<link rel="stylesheet" href="index.css" /><link> 태그 안에서 href 속성을 통해 파일을 연결
rel : 연결하고자 하는 파일의 역할이나 특징
=> CSS는 stylesheet이므로 rel 속성에 stylesheet 를 추가
href : 연결하려고 하는 파일의 위치 작성
=> 다른 폴더에 파일이 존재하는 경우, 절대 경로 또는 상대 경로를 입력해 원하는 파일을 찾아 연결
- 인라인 스타일 : 태그에 직접 CSS 스타일 적용
<h1 style="color:blue;">글자색 변경</h1>- 내부 스타일 시트 : 별도의 파일로 구분하지 않고
<style>요소 내에 작성
<head>
<style>
h1{
color:blue;
}
</style>
<head>셀렉터 (selector)
- id로 이름 붙여서 스타일링 적용하기
요소를 정확하게 선택하기 위해서 id를 붙여서 해결이 가능하다.
- id가 있는 요소를 선택할 때는
#을 이용한다. - 단 하나의 요소에만 적용할 수 있는 유일한 이름으로 사용해야 한다.
- class로 스타일을 분류하여 적용하기
동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해서는 class를 사용한다.
class가 있는 요소를 선택할 때는.을 이용한다.- 여러 개의 class를 하나의 엘리먼트에 적용하기
=> 띄어쓰기로 적용하려는 class들의 이름을 구분하여 작성한다.
3. 텍스트
color : 글자의 색상을 변경하는 속성
속성 값 : HEX (16진수로 RGB; Red Green Blue가 표현된 값) , 주요 색상의 이름
font-family : 글꼴(폰트)의 속성
font-size : 글자의 크기
font-weight : 글자의 굵기
text-decoration : 밑줄, 가로줄
leter-spacing : 자간
line-height : 행간
text-align : (가로)정렬
유효한 값 : left, right, center, justify(양쪽 정렬)
4. 절대 단위와 상대 단위
절대 단위 : px, pt 등
상대 단위 : %, em, rem, ch, vw, vh 등
- 글꼴 사이즈를 정할 때
- px : 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우
- 일반적인 경우 rem 사용 (브라우저의 기본 글자 크기가 1rem)
em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵다.
- 화면 사이즈를 정할 때
- 반응형 웹(responsive web)에서 기준점을 만들 때, 보통 px 사용
- 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우 vw, vh 사용
( vw : viewport width ,vh : viewport height )
🔥 2. 박스모델
1. 박스모델 기초
모든 콘텐츠는 각자의 영역을 가지며,
일반적으로 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 된다.
박스 : 너비(width)와 높이(height)를 가진다.
줄 바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)
줄 바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 inline-block 박스
- block 요소의 대표적인 예 :
<h1><p> - inline 요소의 대표적인 예 :
<span>
<span>요소의 경우는 width, height 속성이 적용되지 않는다.
하지만display: inline-block;을 설정해주면 width, height 적용 가능하다.
2. 박스를 구성하는 요소
border (테두리)
각 영역이 차지하는 크기를 파악
- border 스타일 세부 속성
테두리 두께 (border-width),테두리 스타일(border-style), 테두리 색상(border-color)
margin (바깥 여백)
border를 기준으로 박스 외부의 여백을 지정한다.
값의 순서에 따른 방향은 top, right, bottom, left으로 시계 방향이다.
p {
margin: 10px 20px 30px 40px;
}
/* 방향을 특정해서 작성해도 된다. */
p {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}- 값을 두 개만 넣으면 top & bottom이 10px, left & right가 20px 적용된다.
값을 하나만 넣으면 모든 방향의 바깥 여백에 똑같이 적용된다. - 음수 값을 지정하면 다른 엘리먼트와의 간격이 줄어든다.
padding (안쪽 여백)
border를 기준으로 박스 내부의 여백을 지정한다.
값의 순서에 따른 방향은 top, right, bottom, left으로 시계 방향이다. (margin과 동일)
박스를 벗어나는 콘텐츠 처리
overflow: auto; : 콘텐츠가 넘치는 경우 스크롤을 생성하도록 한다.
overflow: hidden; : 넘치는 콘텐츠의 내용을 보여주고 싶지 않을 때 사용한다.
박스 크기 측정 기준
box-sizing: border-box : 모든 박스에서 여백과 테두리를 포함한 크기로 계산된다.
box-sizing: content-box : 박스의 크기를 측정하는 기본값이다.
=> 여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장한다.
🔥 3. CSS Selector
CSS Selector : CSS 속성을 적용할 대상을 선택하는 방법
1. 다양한 CSS selector
기본셀렉터
* : 전체 셀렉터, 문서의 모든 요소 선택
h1 { }
div { }
section, h1 { } /* 복수 선택 */태그 셀렉터 : 같은 태그명을 가진 모든 요소 선택, 복수 선택 가능
#only { } : ID 셀렉터, #id로 입력하여 선택
.center { } : class 셀렉터, .class로 입력하여 선택, 같은 class를 가진 모든 요소 선택
attribute 셀렉터 : 같은 속성을 가진 요소를 선택
자식 / 후손 / 형제 셀렉터
- 자식 셀렉터
: 첫 번째로 입력한 요소의 바로 아래 자식인 요소 선택
header > p {}
- 후손 셀렉터
: 첫 번째로 입력한 요소의 후손을 선택
header p {}
- 형제 셀렉터
: 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택
section ~ p { }
- 인접 형제 셀렉터
: 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택
section + p { }
기타 셀렉터
가상 클래스 셀렉터, UI 요소 상태 셀렉터, 구조 가상 클래스 셀렉터, 부정 셀렉터, 정합성 확인 셀렉터
