Visual Studio Code(vscode) 설치
1. 구글 검색창에 vscode를 검색
2. vscode의 홈페이지에 접속
3. 본인의 운영체제가 맞는지 확인하고,맞다면 빨간색 영역의 버튼을 아니라면 하얀색 영역의 버튼을 눌러 운영체제에 맞게 설치
Extensions
vscode 사용을 도와주는 확장 모듈
Auto Rename Tag : HTML 태그 수정 시 시작태그와 종료태그를 자동으로 함께 수정해주는 모듈
Code Spell Checker : 사전에 없거나 자주 사용되지 않는 단어가 사용되면 경고해주는 모듈
Error lens : 문제가 있는 부분을 직관적으로 알려주는 모듈
Live sever : html을 작성할 때 변경된 점을 바로 확일 할 수 있도록 도와주는 모듈
이 외 많은것들이 있으니 검색해서 사용해보면 좋을것같다.
HTML(HyperText Markup Language)
HTML 이란
하이퍼텍스트 마크업 언어 (HyperText Markup Language)로,
네트워크가 연결된 웹페이지에서 문서를 작성하고, 읽고, 공유하기 위해서 만들어진 체계이다.
HTML 언어의 본질은, 사용자간에 소통하기 위한 정해진 약속이다.
다시 말해, HTML은 웹페이지에 문서를 작성하는데 정해진 약속이며,
태그를 통해 웹페이지에서 보여질 내용을 나타낸다.
HTML 주요 태그
CSS(cascading style sheet)
CSS는 HTML의 색, 크기, 정렬 등을 변경하여 꾸며주는 언어이다.
공부하면서 가장 중요하게 느낀것은 바로 정렬이다
display
display 속성은 요소를 어떻게 보여줄지를 결정한다. 주로 4가지 값이 쓰이는데 none, block, inline, inline-block이 쓰인다.
none은 아예 요소를 아예 보여주지 않고 지워버린다.
block은 기본적으로 가로영역을 전부다 차지하는 놈이다. 대표적으로 div, p, h, li 태그들이 그러한 때문에 요소 다음에 오는 요소는 개행이 된 것 처럼 보여진다. width, height을 지정할 수 있지만 여전히 다음 요소는 개행되어 나타난다.
inline 은 block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정할 수 없다는게 그 특징이다. 대표적으로 span b strong i 태그가 있다.
inline-block 은 block과 inline의 중간 단계다. 즉, width와 height는 지정할 수 있지만 개행은 되지 않는 놈이다.
flex
flexible-box를 사용할 수 있는 display 속성이다. 각각의 요소들을 item으로 보고 item들을 효과적을 정렬하고 배치할 수 있도록 도와주기 때문에 flex를 잘 이해하고 습득하신다면 아주 효과적인 웹 페이지를 만드실 수 있을 것이다.
flex는 두 가지 관점에서 볼 수 있는데 하나는 부모 역할을 하는 container 입장이고, 두 번째는 각각의 container 안에서 자식 역할을 하는 item 입장 이다
1. flex-direction
flex-direction은 안에 있는 Item들을 정렬할 때 어떤 순서로 정렬할 지, 가로로 정렬할지 세로로 정렬할지를 선택할 수 있다. 정방향 가로정렬이 기본값이다.
2. flex-wrap
flex 는 기본적으로 item을 한줄에 정렬하려고 한다. 이때 중간에 끊고 줄바꿈을 하고 싶다면 flex-wrap을 사용할 수 있다. no-wrap이 기본값이다.
3. justify-content
메인 축을 중심으로 아이템들을 여백과 함께 정렬하는 방식을 지정할 수있다.
flex-start가 기본 값이며 중앙 정렬을 원할 경우 center나 space-around등을 많이 사용한다.
4. align-content
flex-wrap 을 사용해서 item이 여러 줄로 존재하고 있을 때, 여백과 함께 정렬하는 방식을 지정할 수 있다. 기본값은 flex-start이며, 한 줄 밖에 없을 때는 justify-content와 똑같다.
5. align-items
container 안에서 items 들간의 세로정렬을 하는데 쓰인다.
회원가입 폼을 만드는 과제를 진행해보았다..
오늘마무리..어찌저찌 .. 완성은되었다..
