CSS(Cascading Style Sheets)
- HTML로 작성된 웹 애플리케이션의 구조에 디자인을 적용하는데 사용되는 스타일시트 언어
인터페이스와 UI/UX
- 인터페이스 : 컴퓨터와 교류하기 위한 연결고리
- UI(User Interface, 사용자 인터페이스) : 일반 사용자가 쉽게 컴퓨터에게 의도한 행동을 명령할 수 있게 만든 인터페이스. 아무리 훌륭한 내부 기능을 갖고 있더라도 UI가 없으면 소용이 없다.
- UX(User Experience, 사용자 경험) : UI를 포함해 사용자가 특정 서비스를 직/간접적으로 경험하면서 느끼는 종합적인 만족도. UX는 직관적이고 쉬운 UI에서 나온다.
CSS의 문법 구성
- 셀렉터(Selector) : 특정 태그(요소)의 이름, id, 또는 class 선택
- 선언 블록(Declaration block) : 해당 요소에 적용할 내용(속성)을 중괄호{} 안에 작성
- 선언(Declaration) : 속성명(Property)과 속성값(Value) 지정. 속성명: 속성값; 의 형태로 작성
작성한 CSS 파일을 HTML 파일에 적용하기
- 외부 스타일 시트 : HTML 파일에서 <link> 태그를 이용해 CSS 파일 연결
<link rel="stylesheet" href="index.css" /><link> 태그 - HTML 파일과 다른 파일을 연결
rel 속성 - 연결하고자 하는 파일의 역할이나 특징
href 속성 - 연결하고자 하는 파일의 위치. CSS 파일이 HTML 파일과 다른 폴더에 존재하는 경우, 절대 경로 또는 상대 경로를 입력
- 내부 스타일 시트 : HTML 파일 내 <style> 태그에 작성
- 인라인 스타일 : HTML 파일 내 요소와 같은 줄에서 스타일 적용 (파일로 구분하지 않아도 될만큼 CSS 코드가 많지 않은 경우)
셀렉터를 통해 스타일링 적용하기
- id : 요소에 id 속성을 넣고, "#속성값"으로 요소를 선택해 스타일링
하나의 문서에서 한 요소에만 적용 가능 → 특정 요소의 이름을 붙이는 데 사용
- class : 요소에 class 속성을 넣고, ".속성값"으로 요소를 선택해 스타일링
동일한 기능을 하는 CSS를 여러 요소에 적용 가능 → 스타일의 분류에 사용
하나의 class를 여러 요소에 적용하거나, 여러 class를 하나에 요소에 적용하기 모두 가능 → id보다 훨씬 빈번하게 사용됨
cf. 다양한 셀렉터 요소 선택 방법들, CSS Selector Reference
자주 사용하는 CSS 속성
- color : 글자 색상. HEX(RGB를 16진수로 표현한 값) 또는 주요 색상 이름 입력
background-color(배경 색상), border-color(테두리 색상)
- font-family : 글꼴. 속성값에 "큰따옴표"를 붙여 적용
fallback - 사용하려는 글꼴이 없거나 사용할 수 없는 경우를 위해 여러 글꼴 사용. 쉼표로 구분하여 입력해 순서대로 적용
구글 폰트 : 다양한 웹 폰트를 사용하고, 임베드를 위한 <link> 태그 코드 제공
- font-size : 글자 크기. 절대 단위(px, pt 등)와 상대 단위(%, em, rem, ch, vs, vh 등) 사용
- font-weight : 굵기
- text-decoration : 밑줄, 가로줄
- letter-spacing / line-height : 자간, 행간
- text-align : 텍스트 가로 정렬. left, right, center, justify(양쪽 정렬)
- vertical-align : 텍스트 세로 정렬(부모 요소의 display 속성이 반드시 table-cell이어야 하며, 글자를 둘러싸는 박스의 높이가 글자 높이보다 클 때 적용 가능)
박스 모델
- 웹 페이지 내의 모든 콘텐츠는 고유의 영역(박스)을 가지고 있음
- 박스는 항상 직사각형이고, 너비(width)와 높이(height)를 가짐
박스의 종류
- block 박스 : 줄바꿈이 되는 박스. 기본적으로 100%의 width값을 갖고 있으며, width/height값 변경 가능
e.g. <div> 태그, <p> 태그
- inline 박스 : 줄바꿈이 일어나지 않고, 크기 지정을 할 수 없는 박스. 글자 길이 만큼의 width값을 갖고 있으며, width/height값 변경 불가능
e.g. <span> 태그
- inline-block 박스 : 기본적으로는 줄바꿈이 일어나지 않으면서, width/height값 변경이 가능한 박스
박스의 구성 요소
- Margin : 바깥 여백. 박스 외부 상하좌우에 여백 추가. 시계 방향(top, right, bottom, left) 순서로 여백 지정. 음수값 지정 가능
- Border : 테두리. 심미적인 용도 외에도, 영역이 차지하는 크기를 시각적으로 확인할 수 있음
- Padding : 안쪽 여백. Margin과 동일하게 시계 방향 순서로 여백 지정
- Content : 내용. 박스보다 크기가 클 경우, 박스 바깥으로 빠져나올 수 있음
overflow: auto; - 콘텐츠가 넘치는 경우 스크롤 생성
overflow: hidden; - 콘텐츠가 넘칠 경우 내용 숨김
박스 크기 측정 기준
- content-box : 박스의 크기를 측정하는 기본값으로, content의 크기를 기준으로 하여 여백과 테두리를 포함하지 않아 레이아웃 디자인에 혼동이 생길 수 있음
- border-box : 박스의 여백과 테두리를 포함한 크기를 기준으로 하며, 모든 요소에 적용하여 디자인하는 것을 권장
* {
box-sizing: border-box;
}
References
- W3Schools : 프론트엔드(HTML, CSS, JavaScript) 레퍼런스, 예제
'백엔드 개발자 공부 > 프론트엔드 기초' 카테고리의 다른 글
| [프론트엔드 기초][실습] 트위틀러 목업 구현하기 (0) | 2022.08.25 |
|---|---|
| [프론트엔드 기초][실습] 와이어프레임 만들기 - 풋몹(fotmob.com) (0) | 2022.08.24 |
| [프론트엔드 기초] 웹 앱 화면 설계하기 (0) | 2022.08.24 |
| [프론트엔드 기초] 페이지 레이아웃 (0) | 2022.08.24 |
| [프론트엔드 기초] HTML (0) | 2022.08.23 |