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..
What I Learned Today오전에는 .gitignore 파일과 package.json 파일 생성 방법 그리고 패키지 설치 방법에 대해서 배웠다.그리고 live-server를 통해 로컬에서 서버를 실행시켜 웹에 렌더링 하는 방법도 배웠다. 오후에는 간단하게 HTML에 대한 설명을 들었고 VSCode에서 할 수 있는 환경설정과 편의성 익스텐션 설치를 했다.그리고 강사님의 Git을 pull 받아 다른 브랜치를 만들어 수정하고 나의 repo에 push하는 방법도 배웠다. The Problem I Faced오류1)VS Code에서 Prettier - Code formatter 익스텐션을 설치하고 적용하려는데 이런 오류가 발생했다. 오류2)강사님의 repo를 clone하고 npm install을 한 후 ..
What I Learned Today요즘은 CLI와 GUI를 통한 Git 사용법에 대해서 배우고있다. 오늘 오전에는 git init, git add, git commit을 배웠다.#일반 디렉토리를 Git 디렉토리(로컬 저장소)로 초기화 시키기git init#로컬 저장소에 있는 파일들을 staging 하기git add#git add를 통해 stage에 들어간 파일들을 index로 옮긴다.git commit -m "커밋 메시지"오후에는 branch와 merge, checkout, clone, push, pull을 사용하는 방법을 배웠다.#브랜치를 만들고 싶으면git branch -c 브랜치명#브랜치를 바꾸고 싶다면git switch 브랜치명#하지만 만들고 따로 들어가기 귀찮다면 한번에 하는 방법이 있다.gi..
