벌써 강의의 2주차 수강완료..
2주차는 CSS의 세부 속성 내용을 담고 있었다.
2년 정도 CSS를 다루는 업무를 했음에도
정확한 용도를 잘 모르는 CSS 속성들이 많아서
눈치코딩(..) 했었는데 이 주차 수강완료를 하면서 개념을 잘 잡을 수 있었다.CSS 속성
박스모델
- width : 요소의 가로 너비
- max-width: 요소가 커질 수 있는 최대 가로 너비
- min-width: 요소가 작아질 수 있는 최소 가로 너비
- height: 요소의 세로 너비
- max-height: 요소가 커질 수 있는 최대 세로 너비
- min-height: 요소가 작아질 수 있는 최소 세로 너비
인라인요소의 width, height 는 포함한 콘텐츠 크기만큼의 auto가 기본 값
블록요소의 width, height 는 부모 요소의 크기만큼 auto가 기본 값
- 단위 : px, % (상대적), em (글꼴), rem (루트요소의 글꼴크기)
vw (화면 가로너비의 백분율), vh (화면 세로너비의 백분율)
- margin : 요소의 외부 여백(공간) 지정하는 속성
- 음수 사용이 가능하며 auto를 사용할 경우 브라우저가 여백을 계산
- top/right/bottom/left 로 일정한 방향에만 지정이 가능함
- padding: 요소의 내부 여백(공간) 지정하는 속성
- 음수 사용이 가능하며 % 사용할 경우 부모 요소의 가로너비에 대한 비율로 지정
- top/right/bottom/left 로 일정한 방향에만 지정이 가능함
- border: 요소의 테두리 선을 정하는 단축 속성
- 기재 방법 - border : 1px (선의 두께) solid (선의 종류) red (선의 색상);
- border-style(선의 종류)
- none : 선 없음
- solid : 실선 (일반 선)
- dotted : 점선
- dashed : 파선
등이 있음
- border-color 에 transparent를 사용할 경우 투명으로 표시됨
- top/right/bottom/left 로 일정한 방향에만 지정이 가능함
일정한 방향에만 속성을 지정하고 싶을 경우
border-top(방향)-width / border-bottom-style / border-left-color
로 써야함 - border-radius : 요소의 모서리를 둥글게 깎는 속성
- box-sizing : 요소의 크기 계산 기준을 지정
- content-box : 요소의 내용으로 크기 계산
- border-box : 요소의 내용 + 여백 + 테두리로 크기 계산
- overflow : 요소의 크기 이상으로 내용이 넘쳤을 떄, 보여짐을 제어하는 속성
- visible : 그대로 보여줌(기본)
- hidden : 넘친 내용 자르기
- scroll : 스크롤바 생성
- auto : 넘친 내용이 있을 경우에만 스크롤바 생성
- overflow-x / overflow-y : 가로/세로에 개별적으로 생성
- display : 화면 출력 특성
글꼴
- font-style : 글자 기울기
- font-weight : 글자의 두께
- font-size : 글자의 크기
- line-height: : 한 줄의 높이, 행간
- font-family : 글꼴(서체 지정)
문자
- color : 글자 색상
- text-align : 문자의 정렬 방식
- text-decoration : 문자의 장식(선)
- text-indent : 문자 첫 줄의 들여쓰기
배경
- background-color : 요소의 배경 색상
- background-image : 요소의 배경 이미지 삽입
- background-repeat : 배경 이미지 반복
- background-position : 배경 이미지 위치
- background-size : 배경 이미지 크기
- background-attachment : 배경 이미지 스크롤 특성
배치
-
position : 요소의 위치 지정 기준
- static : 기준 없음 (기본)
- relative : 요소 자신을 기준
- absolute : 위치 상 부모 요소를 기준
- fixed : 브라우저 기준
-
z-index : 요소 쌓임 순서(Stack order) 에서 쌓임 정도를 지정, 숫자가 높을 수록 위에 쌓임
-
position 속성의 값으로 absolute, fixed가 지정되면 display 속성이 block으로 변경됨
플렉스 (flex)
- 자식 요소를 수평 정렬할 때 주로 쓰임
- flex : 블록 요소로 정의
- inline-flex : 인라인 요소로 정의
- flex-direction : 주 축을 설정
- flex-direction: row;
행의 축이 좌 -> 우 - flex-direction: row-reverse;
행의 축이 우 -> 좌 - flex-direction: column;
행의 축이 상 -> 하 - flex-direction: column-reverse;
행의 축이 하 -> 상
- flex-direction: row;
- flex-wrap : 묶음(줄 바꿈 여부)
- flex-wrap: nowrap;
묶음(줄 바꿈) 없음
부모 너비의 맞춰서 요소의 너비가 맞춰 수정됨 - flex-wrap: wrap;
여러 줄로 묶음
설정한 너비의 맞춰서 줄바꿈이 됨
- flex-wrap: nowrap;
- justify-content : 주 축의 정렬 방법
- flex-start : flex-items를 시작점으로 정렬 (기본)
- flex-end : 끝 점으로 정렬
- center : 가운데 정렬
- align-content : 교차 축의 여러 줄 정렬 방법
- 여러 줄에 있는 컨텐츠가 붙어서 이동
- align-items : 교차 축의 한 줄 정렬 방법
- 한 줄 기준으로 컨텐츠가 따로 이동
- order : flex item의 순서
순서가 작을 수록 순서가 먼저가 됨
- flex-grow: flex item의 증가 너비 비율
- flex-shrink: flex item의 감소 너비 비율
- flex-basis: flex item의 공간 배분 전 기본 너비
- item에 flex-grow:1 추가 시 1 : n의 비율로 너비를 줌
- flex-grow에 숫자 부여할 시 너비가 넓어짐
- flex-shrink 1(기본값)을 제거하고 0을 부여하면 container가 줄어서 아이템이 차지할 자리가 없더라도 유지할 수 있음
- flex를 사용하여 수평 정렬을 할 때 요소들이 찌그러지지 않는 걸 희망하면 item들에게 속성을 넣어줘야 함
- flex-basis 0으로 설정해야 요소의 가로길이가 잘보임
- flex-grow는 아이템 기본 너비를 뺸 나머지 비율로 맞춰주는 것이기 때문에 flex-basis를 설정햊우어야 함
전환
- transition : 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성
- transition : 속성명 지속시간 타이밍함수 대기시간;
- transition-property : 속성이름 지정
- transition-duration : 지속시간을 지정
- transition-timing-function : 타이밍 함수 지정
- transition-delay : 몇 초 뒤에 시작할지 대기시간을 지정
변환
- transform : 변환 효과
- transform : 변환함수1 변환함수2 변환함수3 ...
- 2D 변환 함수
- translate(x / y / x,y) : 이동
- scale(x,y) / scaleX(x) / scaleY(y) : 크기
- rotate(degree) : 회전(각도)
- skewX(x) / skewY(y) : 기울임
- 3D 변환 함수
- rotateX(x) / rotateY(y) : 회전(x/y축)
- perspective(n) : 원근법(거리)
- perspective : 하위 요소를 관찰하는 원근 거리를 지정
- 단독 속성으로 쓰일 때
적용 대상: 관찰 대상의 부모 - 함수로 쓰일 때
적용 대상: 관찰 대상의 자체
- 단독 속성으로 쓰일 때
- backface-visibility : 3D 변환으로 회전된 요소의 뒷면 숨김 여부
2주차 내용 정리 완료 그리고 이번 2주차는 예제가 있었다.
바로 오버워치 캐릭터 선택 페이지 만들기 예제
(예제 참고이미지 첨부) 
html
...
<body>
<div class="container">
<div class="heroes">
.hero*32>.image 작성 후 tab 누르면
hero 안의 image가 있는 32개의 영역 생성됨
</div>
</div>
</body>
...
css
body{
height: 100vh;
background-image: url("...");
background-size: cover;
/* 더 넓은 이미지에 맞게 출력되게 하는 것 */
background-repeat: no-repeat;
background-attachment: fixed;
/* 배경 이미지가 스크롤에 딸려 내려오지 않음 */
}
...
.container .heroes {
display: flex;
flex-wrap: wrap;
justify-content: center;
...
}
.container .heroes .hero{
...
transform: skewX(-14deg);
transition:
transform .1s,
background-color .6s;
/* 내가 원하는 속성을 구분할 수 있게 설정 */
overflow: hidden;
...
}
.container .heroes .hero:hover{
...
transform: skewX(-14deg) scale(1.3);
z-index: 1;
...
}
.container .heroes .hero .image{
...
/* 이미지가 보여지게 하기 위해선 너비와 높이가 설정되어야 함 */
...
}
.container .heroes .hero:nth-child(n) .image{
background-image: url(...);
}
...
2주차 예제까지 완료!