TechLabs

1. 나만의 다이어리 만들기2. 나만의 웹사이트 만들기기능구현 여부상품을 3 X 4 형태로 잘 배열하기.O마우스를 올렸을 때 살짝 검음 화면 위에 상품 정보를 부드럽게 변화를 주면서 보여주기.O해더 만들고 웹사이트 제목에 애니메이션 주기.O메뉴바 만들고, 마우스 올릴 때마다 변화를 부드럽게 주기.O웹사이트 가로 사이즈가 작아질 때 상품 정보를 사진 아래에 보여주기.O웹사이트 가로 사이즈가 작아질 때 메뉴바를 해더 밑에 붙여주기.O 3. 수료증 발급

1. 트랜스폼과 트랜지션 동시에 이용하기 - 트랜스폼을 이용하여 화면에 변화를 줄 수 있다. - 트랜지션을 이용하여 변화를 부드럽게 보여줄 수 있다. 마우스 올렸을 때 트랜스폼을 이용하여 translateY로 글자를 위로 올려버린다. 자연스러운 움직임을 위하여 트랜지션을 이용한다. 글자 마다 늦어지는 속도가 다르기 때문에, 모든 글자에 다 다른 transition-delay를 넣어준다. 이런 식으로 동시에 이용하면 부드러운 변화를 생성할 수 있다. 2. 웹사이트 상품 리스트 만들기 필요한 기능 1. 4 x 3 정렬시키기. 2. 마우스를 올리면 화면 살짝 까매지면서 커지게 만들기. 살짝 까만 화면과 투명도 이용하면 된다. 3. 마우스를 올리면 상품 정보 올라오게 만들기. 투명도를 이용하면 된다. 내가 만들..

1. 배경 background-color 배경색을 지정한다. background-image 배경에 이미지 넣어주기. linear-gradient(방향, 시작 색상, 종료 색상) background-position 배경 이미지의 위치 조정하기. background-repeat 배경 이지미의 반복 여부와 방향 지정하기. background-size 배경 크기 지정하기. background-attachment 배경 이미지의 스크롤 여부 지정하기. background 단축 속성 순서에 유의해야 한다. object-fit 대체 요소의 규격 맞추기. object-position 대체 요소의 위치 맞추기. (콘텐츠 정렬하기.) background-image와 linear-gradient를 이용하여 배경 색상을 지정할..

1. 캐스케이딩이란? - 의미 : 폭포, 위에서 아래로 흐르는 - 상속 속성이 여러 개인 경우, 우선 순위를 부여하는 것을 의미한다. - 예를 들면, font-familly가 있다. 폰트는 웹 환경에 따라 적용되지 않는 경우가 많기 때문에 2개 이상 지정하는 경우가 많다. 맨 마지막에는 sans-serif 등 안전 장치를 부여한다. 이런 경우에는 가장 앞에 있는 폰트가 우선 순위가 높은 폰트이고, 뒤로 갈수록 우선 순위가 낮아진다. 중요도 : 선언 위치에 따라 우선 순위가 결정된다. 구체성 (명시도) : 구체적인 특성일 수록, 명시도가 높아진다. 선언 순서 : 맨 마지막이 우선 순위를 갖는다. 2. 중요도 브라우저 스타일 시트 : 기본값 사용자 스타일 시트 개발자 스타일 시트 우선 순위는 개발자 > 사용..

1. 절대 단위 px : pixel, 화소를 의미한다. 화면을 구성하는 가장 기본 단위이다. 네모 한칸을 의미한다. pt : 1 / 72 인치이다. 웹에서는 거의 사용하지 않는다. 2. 상대 단위 % : 부모 요소에 비례하여 비율 적용한다. em : 현재 폰트 사이즈를 기준으로 한다. rem : 최상위 폰트 사이즈를 기준으로 한다. /* em 예시 */ /* 현재 폰트 사이즈가 20px인 경우 */ 1em = 1 X 20 = 20px 3em = 3 X 20 = 60px /* rem 예시 */ /* 최상위 폰트 사이즈가 20px인 경우 */ 1em = 1 X 20 = 20px 3em = 3 X 20 = 60px em과 rem의 차이를 잘 알아두기. 3. Viewport를 고려한 단위 - 화면에서 그려지는 ..

1. 웹폰트 폰트를 이용하는 방법은 2가지가 있다. 폰트를 직접 다운로드 받아서 이용하기. 폰트를 다운로드하지 않고, 외부 특정 서버에 있는 폰트를 가져와서 보여주기. 1번 같은 경우는 @font-face를 이용하여 불러 오는데, 사용하기 복잡하여 2번이 사용하기 좋다. 2번은 링크를 따와서 보여주면 된다. 구글에서 구글 폰트를 쳐서 접속하면 된다. 빨간색에 있는 @import를 css 파일에 넣어준다. 글자를 적용하고 싶은 부분에 font-family를 넣어준다. 주의할 점은 꼭 가이드 페이지를 참고해야 한다. 노란색 박스처럼 font-weight가 여러 개 적용할 수 있는 글자가 있는 반면에, 한 가지 굵기만 적용 가능한 글자도 많기 때문이다. 2. 폰트 속성 font-size 폰트 사이즈를 지정한다..

1. Flex item이 여러 줄인 경우에는 어떻게 적용? 앞에서 봤던 grid처럼 flex도 여러 줄 css 적용이 가능하다. 그런데 어떻게 적용해야 할까? 강제 개행을 시켜줘야 한다. align-items 대신에 align-content 이용하기. (참고) flex-flow를 이용하여 단축 속성을 이용할 수 있다. 위의 3가지를 잘 이용하면 grid처럼 여러 줄 flex 적용이 가능하다. 2. flex-wrap으로 강제 줄 바꿈 적용하기 - flex-wrap 은 가로의 길이에 따라 강제 줄 바꿈을 적용할 것인지 아닌지 결정하는 속성이다. 위의 그림은 flex-wrap이 nowrap인 경우다. 분명 각각의 박스의 가로 너비를 300px로 지정하였으나, 무시하고 한 줄에 적어버리는 것을 볼 수 있다. 그..

1. Grid이란? - 레이아웃을 화면에 표시하는 방법 중 하나이다. flex와 많이 사용되기 때문에, 적절하게 상황에 맞게 사용하면 된다. 2. 바둑판 레이아웃 만들기 grid를 이용하여 바둑판 레이아웃을 설정할 수 있다. 이 때 grid-template-columns를 이용하면 된다. 정렬 방향을 열의 방향으로 설정하는 속성이다. auto auto auto 라고 설정하면 가로의 사이즈에 꽉 채워서 3개의 박스가 만들어지게 된다. 따라서 3 X 3 형태의 바둑판을 만들 수 있다. 3. 홈페이지 레이아웃 만들기 grid를 이용하여 홈페이지 레이아웃을 만들 수 있다. grid-template-areas와 grid-area를 이용하여 원하는 대로 배치가 가능하다. 주의할 점은 먼저 grid-area에 어떤 ..

1. Flex이란? - 중심축을 기준으로 화면 위에서 정렬하는 것을 의미한다. - 정렬 중에서 space 관련 정렬이 있는데 미묘하지만 차이를 잘 알아두기.