What I Learned Today오전은 keyframe에 대해 이론과 실습을 했다. keyframe : 애니메이션을 구현할 때 기준이 되는 특정 시점이다.@keyframes : 애니메이션 속성에 적용할 키프레임을 생성하기 위한 규칙이다. 사용 방법은 이렇다.@keyframes 애니메이션 이름 { from { css속성: 값; } /* 생략 가능, 여러개 가능 */ [percentage] { css속성: 값; } to { css속성: 값; }} @keyframes 를 설정했으면 @keyframes 애니메이션을 주고싶은 선택자에서 아래 속성들을 사용하면 된다./* 애니메이션 이름 지정 */animation-name: zoom;/* 애니메..
What I Learned Today오늘 오전에는 Grid에 대해 자세하게 배웠다.Grid Template : 공백으로 구분된 값 리스트를 해석하여 그리드 행, 열을 설정한다.grid-template-rows : 열 크기grid-template-rows : grid-template-columns : 행 크기grid-template-colums : fr 단위 : 그리드 컨테이너 내의 공간 비율을 분수로 나타낸다.repeat(4, 1fr) : 1fr을 4번 반복한다는 뜻이다.minmax(최소크기, 최대크기) : 최소한 최소크기, 최대는 최대크기로 늘어나도록 범위를 준다. Grid Item : 그리드 컨테이너의 자식 요소들grid-row-start 또는 end : 열의 처음과 끝gird-column-s..
What I Learned Today오늘은 3주 차 과제 리뷰를 했다.3주 차 과제는 네이버 로그인 UI 구현하기였는데 시간이 엄청 오래 걸려서 제출했던 기억이 있다. 과제 리뷰를 하며 새로 알게 된 기술들text-indent : 첫 줄 들여 쓰기 속성이다. (단, block의 성향을 가져야 사용할 수 있다.)선택자:checked + 형제요소 : checkbox나 radio 속성에서만 css를 스타일링할 수 있다.사용자가 요소를 체크했거나 선택한 경우 활성화된다.appearnce : none : 에이전트 스타일을 화면에서 보이지 않도록 설정할 수 있다.aria-live : 변경 사항을 스크린리더가 읽어준다.선택자:user-invalid : 사용자가 입력한 값이 유효한 값이 아닐 때 스타일을 적용한다. ..
What I Learned Today오늘 수업 시작은 어제 했던 알림 UI를 조금 변경하는걸로 시작했다.중간에 들어온 컨테이너에 display:contents 속성을 주면 그 컨테이너는 무시되고 자식들이 아이템화 된다. 그리고 텍스트에 직접 그라디언트 효과를 주는 방법도 배웠다..text { /* 배경을 주고 clip을 한 다음 글자 색을 투명으로 준다. */ background-img : linear-gradient(145deg, #1bf008 20%, #03cca8 80%); background-clip : text; color : transparent;} focus와 focus-visible는 가상요소로 사용자가 마우스로 누르거나 키보드로 접근했을때 동작한다.focus와 fo..
What I Learned Today이번주도 화이팅이다.오전에는 Logical Properties, Flexbox에 대해 배웠다.Logical Properties : 웹 콘텐츠가 다양한 언어와 쓰기 방향에 맞춰 렌더링될 때 일관성 있는 레이아웃을 유지하기 위해서 사용한다.inline-size : width의 논리 속성이다.block-size : height의 논리 속성이다.inline-start/end : 가로의 시작과 끝을 의미한다. 보통 가로에서 start -> 좌측block-start/end : 세로의 시작과 끝을 의미한다. 보통 세로에서 start -> 상단inset : top right bottom left의 논리 속성이다.inset-block-start/end 과 inset-inline-sta..
What I Learned Today오전에는 간단히meta 태그가 무엇인지 배웠고 미디어 쿼리에 대해서 배웠다.meta 태그는 다양한 메타관련 요소로 나타낼 수 없는 메타데이터를 나타낼 수 있다.빈 요소이므로 가능한 콘텐츠는 없다.빈 요소이므로 여는 태그는 존재해야 하고 닫는 태그는 존재해서는 안된다.미디어 쿼리는 웹 페이지의 스타일을 다양한 디바이스 크기나 화면 해상도에 따라 동적으로 변경할 수 있도록 도와준다. 이를 통해 반응형 웹 디자인을 구현할 수 있다.미디어쿼리의 조건화면 너비와 높이 : width와 height화면 해상도 : resolution화면 방향 : orientation디스플레이 유형 : screen, print 등모바일 퍼스트 접근법기본 스타일은 모바일에 맞게 먼저 작성하고 화면 크기..
What I Learned Today오전에는 Custom Properties에 대해 배웠고 지금까지 배운것들로 실습을 했다.사용자 지정 속성은 저작자가 정의하는 개체로 문서 전반적으로 재사용할 임의의 값을 담을 수 있다.변수는 부모 선택자 안에서 "--변수명 : 속성값" 이렇게 정의한다.변수는 자식 선택자에서 "var(--변수명)" 이렇게 사용한다.전역으로 사용하고 싶으면 ":root" 선택자 안에 정의하면 된다.변수 이름을 정할때는 용도에 맞게 정해야한다.사용자 지정 속성 안에 또 사용자 지정 속성을 넣고 사용할 수 있다.오전 실습은 일단 마크업만 했다. 오후에는 오전에 마크업한 html 파일을 css로 스타일링 했다. 그리고 주말 과제의 피드백 시간을 가졌다.그리고 회고시간을 얻어내서 마크업 연습을 ..
What I Learned Today이번주는 연휴로 인하여 3일밖에 수업을 하지 못한다. 오전에는 Position을 배우고 실습을 했다.position은 요소 박스의 배치 방식을 지정할 수 있는 속성이다.relative : 본래 위치를 기준으로 offset 관련 속성으로 지정한 위치만큼 이동하여 배치된다.absolute : layer처럼 다른 요소 위에 겹쳐 배치된다. 이때 offset 관련 속성에서 지정한 만큼 이동한다. fixed : 화면에서 자신의 영역을 차지하지 않고 layer로 떠있는다. Viewport를 기준으로 offset 관련 속성에서 지정한 만큼 이동sticky : relative와 fixed의 배치를 섞어 놓은 것처럼 동작한다. 웹에서 따라다니는 상단바를 만들때 sticky를 자주 사용..
What I Learned Today오전에는 CSS Reset, 타이포그래피 및 단위, 박스 모델을 배웠다.타이포그래피는 폰트에 영향을 주는 속성으로 글꼴, 크기, 굵기, 기울임 등 다양한 스타일링을 말한다.font-family : 텍스트의 폰트를 지정하는 속성font-size : 폰트의 크기를 지정하는 속성em 단위 : 현재 글자크기 비례, 유연하지만 다루기 따라롭다.rem 단위 : root를 기준으로 계산, 다루기는 편하지만 em보다 덜 유연하다.vw 단위 : 뷰포트 기준으로 계산font-weight : 폰트가 표시되는 굵기를 지정하는 속성100~900 or normal, bold 등font-style : 폰트의 표시 형태를 지정하는 속성italic or obliqueline-height : 한 줄의..
What I Learned Today드디어 기다리던 CSS에 대해서 배우기 시작했다.오전에는 CSS의 정의와 문법에 대해 배웠다.CSS(Cascading Style Sheet)는 마크업 언어가 실제로 표시되는 방법을 기술하는 언어다.CSS는 W3C의 표준이며 레이아웃과 스타일을 정의할 때의 자유도가 높은 언어다.CSS는 웹 사이트에서 사용되는 스타일을 지정하기 위한 언어다. CSS 사용의 의의스타일 사용의 중요한 의의는 문서의 구조와 표현을 부리할 수 있다는 점을 들 수 있으며 이는 구조와 표현을 분리함으로써 문서 구조의 수정 없이 스타일의 변경만으로 다양한 표현을 할 수 있다는 것을 의미한다. CSS 기본 문법크게 선택자와 선언부로 이루어지며 선언부는 다시 속성과 속성 값으로 구성되어 있다.선언부는 세..
