이 글은 CSS의 기본 개념을 정리한 글 입니다.
Contents
- CSS 정의
- CSS 속성
- CSS 선택자
- CSS 단축 속성
1 - CSS 정의
1-1. 정의
- 종속형 시트 / Cascading Style Sheets
- 혼자서는 존재할 수 없으므로 종속형 시트라고 한다.
- 상속형으로 폭포처럼 부모의 값을 자식을 가지고 있다.
- Style Sheet 언어
CSS 문법
- p ⇒ selector : 태그, id, class
- { color: red; font-size: 30px; }
⇒ declaration block : 셀렉터에 적용할 요소 작성 - color: red; ⇒ declaration
- color: ⇒ property
- red ⇒ property value
- ; ⇒ 선언구분자
1-2. 사용성
- css는 전반적으로 스타일링 역할을 한다.
- 꾸미는것 이외의 레이아웃 설정이나 타이포그래피등 UX에 중요한 역할을 한다.
디자인의 영역?
- 기본적인 UI는 개발자의 기본 소양
- 이미 만들어진 UI들이 많고 콘텐츠들이 많다. 이를 이용해서 클론코딩으로 만드는건 어렵지 않다.
프론트엔드 개발자 소양
[ 필수 ]
- 화면의 구성이나 배치(레이아웃 디자인)
- 타이포그래피와 색상 적용
[ 선택 ]
- 정렬이나 배색에 대한 감각
- UX에 대한 고민과 UX가 잘 적용된 웹이나 앱 분석
CSS 방법론
배우기는 쉽지만 고유의 복잡함을 가지고 있기 때문에 이를 해결하기 위한 다양한 방법론들이 만들어졌다.
2 - CSS 속성
2-1. Layout
display
- block
- inline : 각 태그의 붙여쓰면 공간이 안생기는데, 태그에 enter를 하면 공간이 생긴다
- inline-block : inline성질과 block성질을 가지고 있음
- flex
- grid
- table-cell
- none : 안보이게 감춤
position
- relative
- absolute
- fixed
- sticky :
- IE에서는 지원안됨
- 모바일에서 지원
- 스크롤되어 해당 컨텐츠가 화면 top으로 가면 화면 위쪽에 붙게 된다.
float
- left
- right
** clear:both를 사용
2-2. Box Model
padding & margin
- margin(바깥 여백)
- 음수값을 지정 가능
- padding(안쪽 여백)
- border를 기준으로 박스 내부의 여백을 지정합니다.
border
- 영역이 차지하는 크기를 파악 가능
- 레이아웃을 만들면서 그 크기를 시각적으로 확인
- 속성 :
- border-width
- border-style
- border-color
box-sizing
- 속성
- border-box : padding, border를 포함한 전체 박스 사이즈를 지정
- content-box : padding, border를 제외한 컨텐츠 자체 사이즈를 지정
overflow
- 속성
- auto
- scroll
- hidden
2-3. Style
font
- font-style: 글꼴 스타일
- font-weight: 글꼴 굵기
- font-size: 글꼴 사이즈
- font-family: 글꼴 설정
3 - CSS 선택자
3-1. 기본 선택자
- : 전체
- div : 태그요소
- . : 클래스
- '#' : 아이디
- [attr] : 특성
- , :그룹
* { margin: 0; padding: 0; box-sizing: border-box; }
div { color : red; }
.class { color : red; }
#id { color : red; }
input[type="text"] { color : red; }
.class, #id { background-color: blue; }
class와 id 차이점
| id | class |
|---|---|
| #으로 선택 | .으로 선택 |
| 한 문서에 단 하나의 요소에만 적용 | 동일한 값을 갖는 요소 많음 |
| 특정 요소에 이름을 붙이는 데 사용 | 스타일의 분류(classification)에 사용 |
3-2. 결합자
- ' ' (자손결합자)
- '>' (자식결합자) : 부모의 바로 뒤에 있는 자식 선택
- '~' (일반형제 결합자) : 첫번째 자식 외의 자식들 선택
- '+' (인접형제 결합자)box-sizing : border-box ⇒ padding, border를 포함한 전체 박스 사이즈를 지정
box-sizing : content-box ⇒ padding, border를 제외한 컨텐츠 자체 사이즈를 지정
3-3. 가상 클래스 선택자
현재 상태에 대한 포커스
기본
- :hover - 마우스 호버 되었을때
- :focus - tab키를 이용해서 쉽게 확인
- :focus-visible (IE에서는 사용 불가) - 클릭 후에 focus 상태가 아닌 기존 상태로 돌아가도록 한다.
- :active - 클릭 한 상태
- :checked - input에서 체크되도록
- :disabled - 사용불가 하도록!
- :not() - 조건에 아닐 경우
button { font-size: 14px; }
/* :hover */
button:hover { background-color: red; }
/* :not, disabled */
button:not(:disable):hover { background-color: blue; }
/* :focus */
button:focus { background-color: orange; }
/* :active */
button:active { background-color: yellow; }
/* :checked */List요소
- :first-child
- :last-child - 마지막 요소
- :nth-child - 특정 요소 선택
- :only-child - 자식이 하나만 있는 경우
ol {
li {
/* li의 세번째 그 후에 오는 형제 li 모두 선택 */
&:nth-child(3) ~ li {
color: grey;
}
&:only-child {}
}
}3-4. 가상 요소 선택자
임의로 요소가 가상으로 존재하는 것처럼 사용함
- ::before
- ::after
- ::placeholder
span {
display: block; width: 100px; height: 100px;
/* ::before */
&::before { content: "(" }
/* ::after */
&::after { content: ")" }
}CSS 단축 속성
margin & padding
- margin 과 padding의 단축속성은 똑같이 적용된다.
- 시계방향으로 단축속성 선언(위/오른쪽/아래/왼쪽)
- ( 1-2-3-4 )( 1-3 / 2-4 )( 1, 2-4, 3 )( 1, 2, 3, 4 )
padding: 100px;
padding: 100px 80px;
padding: 100px 80px 100px;
{ padding: 100px 80px 100px 80px; }
font
font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;
/* 단축 */
font: italic bold .8em/1.2 Arial, sans-serif;border
border-width : 1px;
border-style: solid;
border-color: #000;
/* 단축 */
border: 1px solid #000background
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat: no-repeat;
background-position: top right;
/* 단축 */
background: #000 url(image/bg.gif) no-repeat top right;
Frontend Developer