매일 한 페이지씩 읽기. CSS3 편
CSS3
기본 문법
CSS3의 시작
HTML5가 '정보와 구조화', CSS3가 'styling의 정의'라는 본연의 임무에 충실하도록 명확하게 구분하기 시작함.
각자의 문법을 갖는 별개의 언어.
HTML-CSS 연동 방식
- Link style : 외부파일 링크
- Embedding style : head태그 - style 태그안에 선언
- Inline style : html태그에 각각 선언
Link style이 가장 일반적. Inline style은 js로 동적 생성시 사용하는 경우 있지만 웬만하면 link style로 통일할 것
Reset CSS
Eric Meyer’s reset
normalize.css
브라우저마다 존재하는 디폴트 CSS를 리셋하기 위함.
셀렉터
셀렉터 종류
- 전체 셀렉터 ( a,b,c )
- 태그 셀렉터 ( tagName )
- id 셀렉터 ( #id )
- class 셀렉터 ( .class )
- attribute 셀렉터 ( a[href], a[target="_blank"], h1[title="first"] )
- 복합 셀렉터
- 후손 ( div a )
- 자식 ( div>a )
- 인접형제 ( div+div )
- 일반 형제 ( div~div)
- 가상 클래스 선택자 ( selector:hover .. )
- 링크, 동적 셀렉터 ( :link, :visited, :hover, :active, :focus )
- UI 요소 상태 셀렉터 ( :checked, :enabled, :disabled )
- 구조 가상 클래스 ( :first-child, :last-child )
- 부정 셀렉터 ( :not(selector) )
- 정합석 체크 셀렉터 ( :valid(selector), :invalid(selector) )
- 가상 요소 셀렉터 ( ::after, ::before )
프로퍼티 값의 단위
키워드
- 문자로 정해진 값들. display 속성의 block, inline 같은 것들
숫자 단위
-
px : 디바이스 별로 픽셀 크기가 다르기 때문에 명확하진 않음. 대부분 브라우저는 1/96인치 = 1px로 인식
-
em : 요소에 지정된 폰트 사이즈의 배수. 콘텐츠 사이즈 설정, 콘텐츠를 포함하는 컨테이너 크기 설정에 상대적인 설정이 가능하여 편리.
다만 중첩된 자식 요소에 사용하면 모든 자식 요소에 영향을 미치므로 주의 -
rem : 최상위 요소(html)의 폰트 사이즈를 기준으로 함
-
% : 백분률 상대 단위.
-
vh vw, vmin, vmax : 뷰포트를 기준으로한 상대적 사이즈
색상 표현 단위
-
red, blue, tan 등 색상 이름.
-
hex코드, rgb, rgba, hsl, hsla등 사용 가능
박스 모델
box-sizing
-
box-sizing의 기본값이 content-box이기 때문에 지정한 width, height는 컨텐츠의 가로, 세로 크기를 지정한다.
-
box-sizing을 border-box로 지정하면 width, height값은 컨텐츠+padding+border를 포함한 영역을 지정한다. 그렇게에 padding을 높여도 박스크기가 커지지 않았던 것!!
-
box-sizing 속성은 상속되지 않기 때문에 box-sizing 속성을 사용하도록 초기화하려면 아래와 같이 정의해야한다 .
html {
box-sizing: border-box;
}
*, *:before, :after {
box-sizing: inherit;
}
display, visibility, opacity 프로퍼티
- 기본적인 것들만 있어서 패스!
background
속성들
-
- image : 배경이미지
-
- repeat : 배경 이미지 반복 관련.
-
- size : 배경 이미지 사이즈.
- cover : 크기 비율 유지하며 부모 요소의 width, height 중 큰 값에 이미지 크기를 맞춤. 잘릴 수 있음
- contain : 크기 비율 유지하며 배경 이미지가 잘리지 않는 최대 크기로
- size : 배경 이미지 사이즈.
-
- attachment
- fixed : 스크롤 되어도 배경 이미지는 고정.
- attachment
-
- position : 이미지 시작점 변경. 기본 좌상단 (0,0)
-
- color : 배경색 지정
-
- shorthand : color || image || repeat || attachment || position 순서로 요약해서 한 번에 쓸 수 있음
폰트와 텍스트
white-space
공백, 들여쓰기, 줄바꿈등을 컨트롤 하는 속성.
text-overflow
부모 영역을 벗어난, wrapping(자동 줄바꿈) 되지 않은 텍스트의 처리 방법을 정의한다.
- width가 지정되어 있어야 함
- 자동 줄바꿈을 방지하기 위해 white-space 값을 nowrap으로
- overflow 속성은 visible외의 다른 값이어야 함
이 속성의 값으로
- clip : 영역을 벗어난 값은 표시하지 않음 (기본)
- ellipsis : 벗어난 영역을 자르고 ... 를 표시함
word-wrap, word-break
-
한 단어의 길이가 부모 영역을 벗어날 때 처리 방법 정의
-
기본 값은 부모의 영역을 넘어 테스트가 표시된다
-
word-wrap:break-word는 단어를 어느 정도 고려하여 개행한다 (. , - 등)
-
word-break:break-all은 던어를 고려하지 않고 부모 영역에 맞추어 강제 개행한다.
요소의 위치 정의
position
기준, 좌표 프로퍼티(top, bottom, left, right)
-
static(기본) : 부모 요소의 위치 기준
-
relative : 자신이 static일 때 기준에서 좌표 프로퍼티만큼 이동
-
absolute : static이 아닌 부모, 조상 요소중 가장 가까운 요소를 기준으로 좌표 프로퍼티만큼 이동.
absolute 선언시 black 요소의 width는 content에 맞게 변환 되므로, width를 지정해줘야 함. -
fixed : 부모요소와 관계 없이 브라우저의 viewport 기준으로 좌표 프로퍼티만큼 이동. 스크롤되어도 고정(viewport에)
absolute와 마찬가지로 content에 맞게 width가 변환되므로 width를 지정해줘야 함
z-index
- 숫자가 클수록 앞으로 배치. position이 static이 아닌 요소에만 적용
overflow
-
자식 요소가 부모 요소를 벗어날 때 처리 방법 정의
-
visible, hidden, scroll, auto
요소 정렬 float
해당 요소를 다음 요소 위에 떠있게 한다. (가리지는 않음)
absolute와 병행해서 사용하면 안 됨.
width
float 적용시 inline처럼 content의 크기만큼 width가 변경됨.
단, 다음 block 요소가 그 크기만큼 가로가 작아지는게 아님. 여전히 width 100%
관련 문제
- float이 선언된 요소와 그렇지 않은 요소간 margin이 사라짐- 원인 : 후자 요소가 float이 아니기 때문에 박스 모델 상에서 문제가 생김
- 원인 : 후자 요소가 float이 아니기 때문에 박스 모델 상에서 문제가 생김
- 해결 방법 : 후자 요소에 overflow: hidden을 선언
- float 요소를 포함하는 부모 요소의 높이가 정상적으로 반영되지 않음
- 원인 : float 요소의 높이를 부모가 알지 못 함.
- 해결 방법 : .clearfix::after 가상 요소 추가(권장) / 부모 요소에 overflow: hidden 선언
.clearfix:after {
content: "";
display: block;
clear: both;
}
스타일 상속, 적용 우선 순위
모든 프로퍼티가 상속되는 것은 아니다.
여기 다 적기엔 너무 많으니 포엠에서 확인하자.
상속되지 않은 속성에 inherit을 적용하면 상속시킬 수 있다.
우선순위
-
중요도. 어디에 선언되었는가(head에 직접? inline에? 파일로 따로? 등)
-
명시도. 어떤 선택자를, 얼마나 구체적으로 조합했는가(id인가 class인가 등)
-
선언 순서.
벤더 프리픽스
별거 없다.. 걍 공통으로 지원하지 않는 CSS속성을 각 브라우저용으로 사용하라는 것..
근데 가능하면 안 쓰고 개발하는게 좋지
그림자
별거없다.. 인자 순서에 따른 값이 무엇인지만 참고
그레이디언트
비교적 최근 CSS3에 추가되어 대부분 브라우저에서 벤더 프리픽스를 사용해야한다고 함.
그래서 그레이디언트를 직접 작성하기보단 여기와 같은 작성 툴을 사용하는걸 권장하는 듯
트랜지션
-
transition은 자동으로 발동되지 않는다. 가상 클래스 선택자, JS등의 액션에 의해 발동된다.
-
자동 발동을 원한다면 CSS 애니메이션을 사용하도록 한다
-
property, duration, timing-function, delay 4가지 속성이 있다.
-
모든 css 속성이 transition이 가능한 것이 아니다.
// Box model
width height max-width max-height min-width min-height
padding margin
border-color border-width border-spacing
// Background
background-color background-position
// 좌표
top left right bottom
// 텍스트
color font-size font-weight letter-spacing line-height
text-indent text-shadow vertical-align word-spacing
// 기타
opacity outline-color outline-offset outline-width
visibility z-index -
프로퍼티 값이 변하면 브라우저는 그에 영향을 받는 모든 요소의 기하값을 재연산하여 layout 작업을 수행한다. 즉 다수의 자식요소를 가지고 있는 요소가 변경되면 성능 저하가 우려되므로 가능하면 layout에 영향을 주는 효과는 피해야한다.
width height padding margin border
display position float overflow
top left right bottom
font-size font-family font-weight
text-align vertical-align line-height
clear white-space
애니메이션
-
단순히 요소의 프로퍼티 변화로 동작하는 transition과 달리,
애니메이션 속성은 하나의 줄거리를 구성하고, 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어하며 전체 줄거리의 재생과 정지, 반복까지 제어할 수 있다. -
일반적으로 JS를 이용한 애니메이션보다 더 나은 렌더링 성능을 가진다고 알려졌지만, 경우에 따라 다르다.
-
비교적 작은 효과나 CSS만으로 충분한 효과를 볼 수 있는가 vs 바운스, 중지, 되감기 등의 고급 효과가 필요한가 (JS로)
-
transition에 비해 훨씬 디테일한 조정(움직임 중 hover시 정지 등)이 더 쉽고 용이하니 꼭 학습하자
트랜스폼
- 요소의 이동, 회전, 확대축소, 비틀기 등의 효과를 부여하기 위한 함수를 제공한다
- transform 속성에 원하는 function들을 값으로 전달하면 된다.
- transform-origin : 요소의 기준점을 설정. 기본적으로 50%,50%
- 3d도 가능
웹디자인 타이포그래피(Typography)
- 웹 브라우저는 로컬 소프트웨어이므로, 당연히 로컬 환경의 리소스만 사용 가능하다.
- 이를 해결하기 위한 웹폰트
- CDN 링크 방식, 서버 폰트 로딩 방식 등이 있다.
레이아웃
-
모바일 사용자가 많아지면서 반응형 웹이 모던 웹 사이트의 필수가 됨. (하지만 내가 알기로 다시 적응형으로 가는 추세..)
-
css를 정교하게 초기화하고, box-sizing:border-box로 직관적인 박스 모델을 구성한다.
-
float를 이용한 시맨틱 웹 구조 예제가 있는데, 최근에는 flexbox를 사용하는게 더 편할것이다.
반응형 레이아웃
-
디스플레이, 브라우저가 재각각인 각종 디바이스에 맞는 화면을 제공하기 위한 방식.
-
@media : (print, screen..)(min-width ..)에 따라 style을 달리 정함
-
개인적으로 반응형은 블로그나 요소가 적은 단순한 페이지에서 사용하는 용도라고 생각한다.
한 화면에 다양한 요소가 있거나, 디자인 구현을 위해서 반응형을 포기해야하거나, 너무 어려울 수 있기에 요즘처럼 ux, ui를 중시하는 경향에서는 반응형을 지양한다고 알고있다.
- 네이버의 경우에도 반응형을 버리고 적응형으로 모바일용, pc을 아예 따로 구분하고 있다.
플렉스 박스 레이아웃
-
요소의 정렬과 순서 변경, 간격조절, 서로 다른 height의 요소 수평 정렬등 여러가지 모두 간단하게 해결 가능
-
비교적 최신 브라우저가 아니면 지원하지 않지만, 의미있게 사용할만 하다.
-
부모가 inline이면 inline-flex로 선언하면 된다. (몰랐음)
-
flex container 속성
- flex-direction : main-axis(item 방향) 정의
- flex-wrap : item witdh가 container 보다 클때 어떻게 할지
- flex-flow : direction, wrap의 shorthand
- justify-content : lex container의 main axis를 기준으로 flex item을 수평 정렬한다.
- align-items : flex item을 flex container의 수직 방향(cross axis)으로 정렬한다
- align-content : flex container의 cross axis를 기준으로 flex item을 수직 정렬한다.
-
flex item 속성
- order : 배치 순서
- flex-grow : item 너비에 대한 확대 인자
- flex-shrink : item 너비에 대한 축소 인자
- flex-basis : item 너비 기본값 지정
- flex : grwo, shring, basis의 shorthand
- align-self : container의 align-items 높은 우선순위로 정렬
수평/수직 중앙 정렬
수평 정렬
- inline, inline-block은 text-align : center
- block은 width값을 지정한 후에 margin : 0 auto
- 복수의 block 요소의 경우 부모에 text-align : center 적용 후 자식 요소를 inline-block으로
- flex를 사용하면 justify-contnet : center로 뚝딱
수직 정렬
-
단일 inline : padding-top, bottom에 동일 값 적용 / height === line-height (단 이 방법은 여러 줄일 경우 행간이 지나치게 넓어지거나, Click Dead Zone 이슈 발생)
-
복수 inline : padding-top, bottom에 동일 값 적용 / flex 사용
-
block : 부모요소 기준으로 position : absolute, top : 50% (요소 높이 고정 or 유동에 따라 추가조절 필요 ) / flex 사용
image 요소 아래에 패딩된 여분의 공간 제거하기
-
컨테이너 요소로 img 요소를 래핑하면 img 요소 아래에 의도하지 않은 여분의 공간이 패딩된다.
-
이유 : image 요소는 inline 요소이기에 텍스트로 취급된다. 타이포그래피를 이해한다면 텍스트의 높이는 어센더 + x-height + 디센더로 나눌 수 있으며, 이 '디센더'가 이미지에도 적용되어 아래 여백이 생기는 것이다.
-
해결 방법 :
- image 요소를 block요소로 변경한다.
- block으로 변경할 수 없는 상황이라면 vertical-align을 bottom으로 변경한다.
