TechLabs

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

1. 반응형웹 동일한 url에서 디바이스 화면 크기에 따라 레이아웃이 달라진다. 미디어 쿼리 : 뷰포트 너비를 이용하여 조건을 모두 만족하는 경우 웹사이트의 스타일 시트를 수정한다. 뷰포트는 탭 제외한 모든 내용 부분을 의미한다. breakpoint : 반응형 웹사이트 작업 기준이 되는 중단점을 의미한다. 절대적인 규격이 있는 것은 아니다. @media screen and ( 조건문 2 ){ 스타일 시트 적용하기 } /* 조건문 1과 조건문 2 */ 모바일 ~ 767px 탭 768px ~ 1023px 컴퓨터 1024px ~ 2. 상한선과 하한선 max-width : 상한선을 의미한다. min-width : 하한선을 의미한다. 중앙선이 상한선인 경우에는 노란색 부분을 의미하고, 하한선인 경우에는 초록색 부..

transform을 이용하여 변형을 주고, transition 또는 animation을 이용하여 그 변화를 부드럽게 보여준다. transition은 어떤 동작을 실행하였을 때 변형을 보여주고, animation은 동작 없이 계속 변형을 보여준다. 1. transition 변화를 부드럽게 보여주는 속성 중 하나이다. 어떤 동작을 실행하였을 때 주어진 시간 만큼 변형을 보여준다. - transition-property : 어떤 속성에 효과를 줄 것인지 지정하기. - transition-duration : 변형에 시간을 지정한다. (s 또는 ms로 지정하기.) - transition-timing-function : 속도 패턴을 지정한다. 제일 많이 쓰는 함수가 ease-in-out이다. - transition..

1. position이란? html 요소를 배치하는 방식을 결정하는 속성이다. position의 종류에 따라서 top, bottom, left, right 방향 기준으로 요소의 좌표값을 변경할 수 있다. position 속성을 이용하여 원하는 위치에 배정할 수 있다. 2. position 종류 - static : default - relative : 원래 있던 자리 기준으로 위치를 조정한다. top, bottom, left, right 적용 불가능하다. - absolute : 절대 좌표 기준으로 위치를 조정한다. top, bottom, left, right 적용 가능하다. - fixed : 스크롤과 무관하게 뷰포트 기준으로 위치 적용 가능하다. 즉, vw와 vh 기준으로 적용된다. - sticky : 부..

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 폰트 사이즈를 지정한다..