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에 도움이 된다. ..
What I Learned Today오전에는 하이퍼링크, 태그에 대해 배웠다.href속성은 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일, 전화번호, 외부 url을 연결할 수 있다.target 속성의 예약어에는 _self, _parent, _top, _blank 등이 있다._blank를 사용할때 rel속성은 중요한데 noopenner와 noreferrer를 사용하여 보안을 신경쓸 수 있다. 오후에는 name속성과 id속성, title속성을 배웠고 이미지 링크를 배웠다.그리고 리스트를 배웠다. ol과 ul 태그를 사용하고 여기서 ol은 orderd list, ul은 unorderd list라고 한다.ol과 ul의 자식 요소는 무조건 li여야 한다.정의형 리스트도 배웠다. 정의형 리스트는 dl(d..
What I Learned Today오전에는 웹접근성과 웹표준에 대해 배웠다.웹서비스 개발은 백엔드와 프론트엔드 서비스로 나눈다.프론트엔드는 구조(HTML5) 디자인(CSS3) 설계(JavaScript)로 이루어져있다.HTML5 : 뼈대, 건강한 신체CSS3 : 근사한 스타일링, 다양한 마크업 언어와 결합 가능Javascript : 스마트한 두뇌 오후에는 DTD 내용을 기반으로 실습을 하며 HTML을 배워보았다.그리고 주말 과제도 받았다.. ㅋ The Problem I Faced개인 브랜치에서 작업 도중 강사님이 커밋을 하셔서 동시에 연결해둔 main 브랜치로 이동해 pull을 했다.하지만 이런 오류가 생겼다.error: Your local changes to the following files woul..
