패스트캠퍼스 react 강의 학습후기 2주차

 

2주차까지는 HTML, CSS의 기초에 대해 학습했다. 실무를 하게 되면 늘 사용하는걸 빼면 모두 검색으로 처리하게 되지만.. 오랜만에 복습을 듣는다는 기분으로 수강했다. 앱 백엔드만 주구장창하다 오랜만에 CSS를 가지고 노니 어찌나 재밌던지ㅎㅎ

 

css는 무조건 다 외우고 있어야 하는 친구는 아니기 때문에.. 간단하게 중요하다고 생각하는 몇 가지만 필기했다.

 

CSS

 

종속형 시트 또는 캐스케이딩 스타일 시트는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어
쉽게 말해 HTML, 즉 웹사이트를 꾸미는 언어이다. HTML만을 위한 글자 포토샵!

 

박스 모델, 글꼴, 문자, 배경, 배치, 플렉스(정렬), 전환, 변환, 띄움, 애니메이션, 그리드, 다단, 필터

 

-박스 모델 : 요소의 가로, 세로 너비를 말한다.

ㄴwidth, height : 가로, 세로 너비. 기본값은 auto(브라우저가 너비를 계산해주는 방식)

ㄴmax-width, max-height : 요소가 커질 수 있는 최대 가로/세로 너비

ㄴmin-width, min-height : 요소가 작아질 수 있는 최소 가로/세로 너비

ㄴmargin : 요소의 외부 여백을 지정하는 속성. margin: 10px 20px 30px 40px; 로 한꺼번에 작성할 수 있는데, 순서대로 위쪽부터 시계방향이다. (위, 오른쪽, 밑, 왼쪽) margin-top 등 방향을 붙여 개별로 지정할 수도 있다.

ㄴpadding : 요소의 내부 여백을 지정하는 속성. 

ㄴborder : 두께 종류 색상;  : 요소에 선을 만든다. 

 

- 배경 : 요소의 배경을 지정한다.

ㄴ background-repeat : 요소의 배경 이미지 반복 여부

ㄴ background-position : 요소의 배경 이미지 위치. %, 방향, 단위로 지정할 수 있다.

ㄴ background-attachment : 요소의 배경 이미지 스크롤 특성. scroll을 지정하면 이미지가 요소를 따라 함께 스크롤되고, fixed를 지정하면 뷰포트에 고정되어 스크롤이 되지 않는다.

 

- 배치 : 요소의 위치 지정

ㄴ position : relative(요소 자신 기준) absolute(위치 상 부모 요소 기준) fixed(뷰포트 기준)

ㄴ display : flex(블록 요소와 같이 Flex Container 정의), inline-flex(인라인 요소와 같이 Flex Container 정의)

 

- 전환 : 애니메이션의 전환 효과. 색깔이 바뀌는 것을 자연스럽게 연출할 수도 있고, 다른 애니메이션들의 속도를 지정할 수 있다.

ㄴ transition: 속성명 지속시간 타이밍함수 대기시간;

 

 

마지막으로는 오버워치 캐릭터들로 캐릭터 프로필같은 HTML을 만들어보며 실습했다. 폼으로 있는 실습이 아니라 요모조모 필요한것들만 써보면서 간단하게 따라할 수 있는 실습이라 나한텐 엄청 쉬운건데도 괜히 재밌었다 ㅋㅋㅋㅋ

​( 이건 작성중에 캡쳐한 화면..ㅎㅎ)