본격적으로 실전 프로젝트를 시작한 후 팀원 전체와 기획한 와이어프레임을 기반으로 어떤 뷰를 만들지 계속 생각하는 나날이 이어지고 있다. 그래도 기본적인 와이어프레임이 있어서 크게 어렵지는 않을 거라고 생각했는데 막상 그것을 구체적인 뷰로 구현하는 것은 또 다른 문제였던 것 같다. 그래서 오늘은 그런 과정을 좀 더 쉽게 하기 위해 일단 CSS를 살펴보는 시간을 가져보기로 했다.
CSS 정리
-
css standard syntax
selector { property: value; }
prpoerty : 속성 지정
value : 속성 값 -
css는 가급적 따로 style.css 와 같이 파일을 만들어 link 태그로 html 문서에 적용할 것.
▶ Box Model
What is box?
☞ html 문서가 rendering될 때 box 모양으로 처리됨 => html이 css로 표현될 때 box로 표현함.
ex) .box {
width: 500px;
height: 300px;
padding: 20px;
}
▶ Content : content가 포함되어 있는 box
가로 길이 : width
세로 길이 : height
▶ Padding : 안쪽 여백, content와 border 사이 공간
: 방향별 여백도 지정 가능 ( ex padding-left:30px)
▶ Border : 테두리 - 테두리의 굵기, 스타일, 색상 지정 필요, 필요 없을 경우 none으로 설정
▶ border-radius: 주어진 px 또는 %만큼 둥글어짐, 50%가 주어졌을 때 원으로 표현
: Padding과 같이 방향 별로 지정 가능
▶ Margin : 요소와 요소 사이의 간격
: 0 auto; => margin을 자동 분배 => 결과적으로 가운데 위치
▶ Shorthand : padding: 10px, 20px, 30px, 40px => 순서대로 top, right, bottom, left 의미
: margin: 20px, 40px => top&bottom : 20px, right&left : 40px => left에 대한 명시가 없으면 right의 값 대입
▶box-sizing : content-box;
: default value is content-box
: border-box -> width, height 값을 border까지 포함한 값으로 계산
▶Display : block - 다른 element가 침범하지 않도록 막음
: width를 선언하지 않은 경우, width= 부모의 content-box의 100%
: width를 선언한 경우, 남은 공간을 margin으로 자동 채움
: height를 선언하지 않은 경우, 자식 element의 height의 합
: inline - 옆으로 나열 (vs block)
: 공간이 모자랄 경우 줄바꿈
: width, height, top, bottom 값 사용 불가 -> 균일한 흐름을 방해하기 때문
: img 태그의 경우 width, height를 가질 수 있음
: inline-block : inline + block
▶ Float : 가로 배치
: float가 되었을 때, 부모 요소, 형제 요소와 떨어지게 됨 -> 본래 있던 곳을 빈 공간으로 인식함
: float된 요소는, block이 됨 but, 실제 conetnts의 길이만큼 width를 가지게 되며 margin도 자동으로 생기지 않음
: 모든 요소가 float될 경우 부모의 height값이 0이 됨
: inline요소들은 주위에 위치한 float 요소에 영향을 받음 -> float요소를 인식하고 inline 구성
: 부모에게 overflow: hidden; => float된 요소를 인식하게 됨
: clear : clear: left => float: left인 요소를 인식하게 됨 => clear된 요소를 이용하여 부모의 height값 자동 조정
: left, right, both
: block인 요소에게만 사용 가능
: Pseudo Element -> css를 이용하여 virtual element 생성 (::before, ::after 요소의 가장 앞, 마지막에 가상 요소를 생성)
ex) .pseudo::before{ content: value } -> value : 가상 요소가 가질 내용
▶ Opacity : 투명도 ( 0 ~ 1 ) 숫자가 클 수록 불투명
▶ Position : 요소를 원하는 위치로 이동시키기 위해 사용
: static - default
: relative - float와 유사하나, 원래 위치를 기억, 원래 위치를 기준으로 이동
- ex) top : 20px -> top에서부터 20px 이동
: absolute - display 값이 block, margin이 없어져 길막은 타요소 차단 불가
- 부모 요소가 인식 x
- inline요소 또한 인식 x ( float와 차이점 )
- 가장 가까운 static이 아닌 조상 요소를 기준으로 위치 이동 가능
: fixed - viewport 사이즈를 기준으로 이동 -> 스크롤과 상관 없이 위치 고정
: z-index: x; -> float된 정도, 값이 클수록 값이 낮은 요소를 덮음
text-align : center; : inline 성질을 갖고 있는 객체를 가운데 정렬
Flexbox : display: flex(or inline-flex); -> flex 사용 - 정렬하고자 하는 요소를 감싸는 부모에서 선언
: flex-direction: row; -> 가로 방향 정렬(main axis: row, cross axis: column) if 세로? column(main axis: column, cross axis: row),
row-revese, column-reverse의 경우 방향 반대(오른쪽에서 왼쪽, 밑에서 위쪽)
: flex-wrap: nowrap - 한줄로 정렬(감싸지 않음) -> 자식의 size를 강제로 줄일 수도 있음
wrap - 자식의 size를 줄이지 않고 정렬(강제 한줄 정렬 x)
: justify-content : flex-start; - flex line의 시작점부터 정렬
: flex-endl - flex line의 끝점부터 정렬
: center - 가운데 정렬
: space-between - 요소들 사이 간격을 같게 정렬
: space-around - 요소 좌우 별로 동일한 너비만큼 margin 제공하고 정렬
: align-items : (justify-conetnt attr) - cross axis 기준으로 정렬
: align-content : 전체 요소를 기준으로 정렬
: order : n - n번째 순서로 정렬 (자식 요소에 포함)
: flex-grow : n - 0 -> 키우지 않음, n > 0 -> 남는 영역을 채움
- media screen and (min-width: 768px){} => width 768px 이상인 device에서 적용
- vh = viewport height : viewport의 높이 기준 비율 -> 1vh = 1%(viewport 기준) <-> vw(viewport width)
▶ Typography - font-size : npx - 절대 단위
: nem - 상대 단위(비례값) => 실제로 적용된 폰트 사이즈를 기준으로 1em
: nrem - 상대 단위(비례값) => root(html) em - html에 적용된 font-size = 1rem
- line-height : 줄간격
: font-size와 같은 attr 적용
: em을 적용할 때는 생략 가능 ( EX. 1.5em = 1.5 )
: line-height의 중간에 글자가 위치
- letter-spacing : font-size와 같은 attr 적용
- font-family : "적용할 font"
: "적용할 font", sans-serif; -> font가 존재하지 않을 경우 임의의 sans-serif 적용
: "적용할 font1", "적용할 font2", sans-serif -> font1이 존재하지 않을 경우 font2, font2도 존재하지 않을 경우 임의의 sans-serif
- text-align : left - 왼쪽 정렬
: right - 오른쪽 정렬
: center - 가운데 정렬
- color : hex - 16진수 값
: rgb - (r, g, b)
: rgba - (r, g, b, a) => t는 투명도
- text-indent : npx - npx만큼 들여쓰기
- text-transform : alphbet based에만 영향
: none
: capitalize - 음절의 앞자리를 대문자로
: uppercase - 모든 문자를 대문자
: lowercase - 모든 문자를 소문자
- text-decoration: underline - 밑줄 생성
: line-through - 줄 가림(취소선)
: none
- font-style : normal
: italic - 글자 기울게
: oblique
▶ Background - background-color : hex, rgb, rgba => color와 같은 attr
- background-image : url() -> img 경로( 로컬 상대 경로 or 네트워크 이미지 주소 )
- background-repeat : repeat -> 반복(default)
: no-repeat -> 반족 x
- background-size : contain - background를 넘어가지 않도록
: cover - background를 가득 채우도록 ( 비율 유지 -> 이미지가 잘릴 수 있음 )
: custom - width, height를 조정 가능 ( 100% auto ...)
- background-position : x y 값 조정 -> center center, center bottom, center 30px...
- cusor : pointer -> 커서를 해당 요소 위에 올리면 선택 가능 커서로 변경
▶ Transition : property - 지정된 요소를 자연스럽게 변화 (ex. font-size) -> all => 모든 요소에 영향
: duration = ms
= s - 변화가 얼마동안 일어날지
: timing-function = ease-in - 천천히 바뀌다 빠르게
= ease-out - 빠르게 바뀌다 천천히
= ease-in-out - 천천히 -> 빠르게 -> 천천히
= cubic-bezier() - 속도 변화폭을 customizing (cubie-bezier 웹 테스트 가능)
: delay = 값으로 들어간 ms 이후 변화 시작
=> property와 duration은 필수 parameter
=> 각각의 property 마다 따로 transition을 적용도 가능
▶ Animation : 애니메이션 부여
: @keyframes name{ from{ Rules } to{ Rules } } -> 시작할 때는 from의 Rules, 끝날 때는 to의 Rules => name 애니메이션 정의
-> 0 ~ 100%로 범주로 Rules를 지정해도 됨( like Swtich )
: animation-name : name 으로 name 애니메이션 적용
: animation-duration = Transition의 duration과 동일
: animation-timing-function = Transition의 animation-timing-function과 동일
: animation-delay = Transition의 delay와 동일
: animation-iteration-count : 값만큼 반복, infinite - 무한 반복
: animation-direction : reverse - to->from - 애니메이션의 진행 방향 설정
: alternate - 방향을 번갈아가면서
▶ box-shadow : h-offset v-offset - 그림자의 방향 ( +이면 오른쪽 또는 아래쪽, -이면 왼쪽 도는 위쪽)
blur - 흐린 정도 (커질 수록 흐려짐)
spread - 그림자 크기
color - 그림자 색상
▶ opacity : 0(투명) ~ 1(불투명) 사이 값
▶ overflow : width, height값을 자식 요소 또는 컨텐츠가 넘어섰을 때 사용
: visible - default값 -> 넘치더라도 보여줌
: auto,scroll - 스크롤 표시
: hidden - 숨기기
- overflow-x, overflow-y로 가로 세로 각 방향에 대한 옵션도 설정 가능
▶ transform : 기존 요소의 크기와 위치를 기억해 다른 요소에게 영향 x
: translate(x, y) - x, y 방향으로 위치 - translateX, translateY로 x 또는 y 방향으로만 이동 가능
- % 단위를 사용할 경우 transform이 사용된 해당 요소의 width, height를 기준으로 움직임
: scale(N) - N배만큼 크기 조절
- scale(x, y)를 이용하여 가로는 x배, 세로는 y배 조절 가능
: rotate(Ndeg) - N도만큼 회전 (deg는 각도를 의미하는 단위)
▶ visiblity : visible - 보이기
: hidden - 숨기기 -> 요소는 존재 (opacity:0과 흡사) vs display: none -> 요소가 존재하지 않는 것으로 취급
▶ Selector - ID - #id로 선택 (EX in html, id = name in CSS, #name{})
- '>'을 이용하여 child 선택 EX section > h1 -> section의 child 중 h1
- ' '을 이용하여 descendants 선택 EX section h1 -> section의 자손 중 h1
- '+' 해당 선택자 바로 이후에 오는 형제 요소 하나 선택 EX .active + li -> active 이후에 위치한 li 하나
- '~' 해당 선택자 이후에 오는 형제 요소들 선택 EX .active ~ li -> active 이후에 위치한 li
- :first-child - 첫번째 요소에만 적용 EX li:first-child - 리스트의 첫번째 요소에 적용
- :last-child - 마지막 요소에만 적용 EX li:last-child - 리스트의 마지막 요소에 적용
- :nth-child(N) - N번째 요소에만 적용 EX li:nth-child(3) - 리스트의 3번째 요소에 적용 -> 짝수일 경우 N=2n, 홀수일 경우 N=2n-1도 적용 가능
- :hover - 마우스 커서가 해당 요소 위에 위치할 때 적용
- :active - 해당 요소를 클릭하였을 때 적용
- :focus - 요소가 선택(focus)되었을 때 (EX 입력창 등) 적용
- 나중에 선언된 스타일이 덮어씌움
- 선택자 우선 순위{
type 선택자가 우선 순위 마지막(EX span, div, a 등)
class, 가상 class 선택자가 2순위
ID 선택자가 1순위
}
- 선택자 우선 순위 무시{
inline style : html 내부에 style을 작성
!important : 최고 우선 순위
EX_ p{
color: red !important;
}
} => 가급적 지양
▶ Grid System : container - grid system이 적용되는 전체 범위
: column - container를 분할하는 칸 (일반적으로 12칸을 주로 이용)
: gutter - column간 여백 -> 간격을 위한 여백
