TechLabs

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

1. grid Layout 반응형 웹 페이지를 쉽게 구현 가능하다. 2가지 레이아웃은 상황에 따라 혼용하여 사용하므로, 적절한 곳에 이용하기. flex Layout 1차원 구조에 유리하다. 2차원 구조를 만들기 위해서 여러번 중첩시켜야 한다. 비교적 작은 단위 레이아웃에 적합하다. 변경 가능성이 있는 경우에 유리하다. grid Layout 2차원 구조에 유리하다. 큰 규모 그리고 확실한 경우에 유리하다. 효율적으로 반응형 디자인 구현이 가능하다. 하지만 모든 브라우저에서 지원되지 않는다.

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

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