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 기본 문법크게 선택자와 선언부로 이루어지며 선언부는 다시 속성과 속성 값으로 구성되어 있다.선언부는 세..
What I Learned Today오전에는 폼 요소(input), 폼 요소(button)에 대해 배웠다.form 태그는 사용자 입력을 서버로 전송하기 위한 컨테이너 역할을 한다.반드시 1대1로 대응되는 lable 태그가 필요하다. action 속성은 데이터를 전송할 url을 지정한다.method 속성은 GET과 POST 방식을 정할 수 있다. input 태그는 텍스트를 입력할 수 있는 한줄 글 상자를 만들어주고 type 속성에 어떤 방식을 사용할지 명시해줘야 한다.lable 태그는 input 박스를 구분하기 위한 이름표다.input 태그의 id 속성과 lable 태그의 for 속성을 이어주면 서로 연결되고 ux가 훨씬 좋아진다.placeholder 속성을 사용하여 무엇을 입력해야하는지 알려줄 수 있다...
What I Learned Today오전에는 프레이징 요소, 인용문과 줄바꿈, 텍스트 레벨 요소에 대해서 배웠다.프레이징 요소에서 em, i, strong, b 태그는 텍스트의 강세를 나타낸다.em과 i 태그는 보여지는것은 기울임꼴이지만 em은 컨텐츠를 강조하는 의미가 있지만 i는 단지 기울임꼴로 보이도록 한다.strong과 b 태그는 굵은 글꼴을 보여주지만 strong은 컨텐츠 강조의 의미가 있고 b는 굵은 글꼴로 보이도록만 한다. 인용문은 blockquote와 q 태그를 사용한다.blockquote 태그는 보통 문단 전체를 인용할 때 사용하고 q 태그는 짧은 인용문이나 문장 준간에 섞어서 사용한다.cite 태그와 속성은 인용의 출처를 지정할 수 있어서 문서의 신뢰성을 높이거나 SEO에 도움이 된다. ..
