TechLabs

오버워치 캐릭터 선정 페이지 제작하기 구현해야 되는 부분 1. flex 정렬과 줄 바꿈 이용하여 바둑판 형태 제작하기. 2. 바둑판 형태 원하는 모양으로 제작하기. 3. 마우스를 올렸을 때, 변환과 전환을 넣어주기. 4. 최대 크기 이용하여 뷰포트 너비가 줄어도 사이즈 줄어들지 않게 만들어주기. 강사님은 일단 이미지를 넣지 않고, 배경색을 이용하여 배치 먼저 진행하였다. 또한, img 태그를 사용하지 않고 div 태그에 nth-child + background-image를 넣는 방법을 이용하였다. 상위 요소부터 하위 요소로 차근차근 정리해놓고, css 진행하는 것이 꼬이지 않고 적용 가능하다. 1. 줄 바꿈 처리하기 flex-wrap을 이용하고, 미리 이미지가 담긴 div 태그의 너비와 높이를 지정하여 ..

3D 변환함수를 이용하여 flip 제작하기 rotateY + perspective + backface-visibility + z-index !!! 고려해야할 점 앞면과 뒷면을 어떻게 겹칠 것인가? : position absolute와 relative 이용하기. 앞면과 뒷면 회전은 어떻게 할 것인가? : rotateY 이용하기. 회전 시 3D 표현은 어떻게 할 것인가? : perspective 이용하기. 회전 시에 보이는 면은 어떻게 할 것인가? : z-index, backface-visibility 이용하기. 앞면 뒷면 일단 flip을 적용할 부모 태그를 만들고, flip를 적용할 태그를 만들어서 앞면과 뒷면을 넣어준다. flip 부모 태그에 적용할 것 flip 자체를 적용할 것 이렇게 2가지로 나누어서..

1. flex container 말고 flex items 설정하기 flex는 container와 items로 나눌 수 있는데, 앞에서 한 내용은 flex container에 css를 적용하는 방법이다. 오늘은 container items에 적용할 수 있는 css에 대하여 배웠다. order : 숫자가 작을 수록 먼저 들어오기. (html 조작 없이 위치 변경이 가능하다.) flex-grow : 증가 너비 비율 (기본값이 0이다. 증가 비율 없음을 의미한다.) flex-shrink : 감소 너비 비율 (기본값이 1이다. 감소 비율 없음을 의미한다.) flex-basis : 공간 배분 전 기본 너비 가장 많이 사용하는 방법은 flex-basis를 0으로 맞추고, flex-grow로 너비 비율을 맞추면 된다...

1. 글꼴 font-style : 기본값 normal, italic (기울어진 체) font-weight : 기본값 400 (normal), 700 (bold), 100 ~ 900 font-size : 브라우저 기본 폰트 16px line-height : 한 줄의 높이, 요소의 글꼴 크기의 배수로 지정하는 것을 권장, height와 동일한 px를 넣으면 수직 정렬 가능하다! font-family : 여러 개 지정, 왼쪽에서 오른쪽 방향으로 진행된다. 시도를 하는데 안 되면 오른쪽으로 넘어가고, 되는 경우 오른쪽 모든 것을 무시한다. 맨 오른쪽에 serif (바탕체) 적어주기. san-serif 고딕체 의미. Google a{ display: block; width: 200px; height: 100px;..

1. 박스 모델 기본값 잘 알아두기 →다른 값 명시하여 제어 가능하게 만들 수 있기 때문이다. 1-1. width, height 기본값 : auto 1-2. max-width, max-height 기본값 : 최대는 none, 최소는 0 .parent{ width: 400px; height: 200px; background-color:royalblue; } .children{ max-width: 600px; height: 100px; background-color: orange; } 자식 태그가 최대 너비가 600px 이므로, 600px까지 넓어질 수 있다. 만약에 너비를 600px 라고 지정하면, 잘 지정된다. 미디어 쿼리에서 min-width와 max-width 많이 이용된다. 1-3. 단위 px : ..

2일차에는 알바와 퀸메이커 보느라 못하였다... 오늘도 알바를 끝내고 진행하였다. 1. html 문법 시작 태그 + 요소 (태그 사이에 있는 코드) + 종료 태그 부모 요소, 자식 요소 상위(조상) 요소, 하위(후손) 요소 속성과 값 (Attribute, Value) 상위 요소 ≠ 부모 요소 하위 요소 ≠ 자식 요소 빈 태그 : 이미지 태그, 메타 태그, 인풋 태그 등 내용 없는 태그 각각의 역할을 명확히 하기 위하여 속성과 값 명시하는 경우가 많다. 엄격한 문법 지키는 것이 안전하다. 이미지 태그는 이미지 경로와 이미지 이름 → 필수 속성 인풋 태그는 데이터 입력받는 태그 요소가 화면에 출력되는 특성 글자 : 인라인 요소 상자 : 블록 요소 인라인 요소 블록 요소 수평으로 쌓임 상하좌우 자동으로 줄어듦..

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 : 부..