1 - 6 로그인 페이지 만들기
- 줄바꿈 태그 : <p>, <div> / 태그 복사하기 : Alt + Shift + 아래
- 필요한 태그는 찾아서 복사, 붙여넣기
1 - 7 CSS
- HTML 태그를 꾸며줄 때 사용한다.
- 1. 선택자로 꾸며줄 곳에 명찰을 붙이고 2. 속성과 속성값을 적는다.
- 명찰 1. class = . = 여러 개를 선택할 때 2. id = # = 하나를 선택할 때
1 - 8 레이아웃
- HTML에는 부모-자식 관계가 있고, 부모-자식 관계는 CSS 속성을 공유한다.(=상속)
- block = 한 줄을 다 차지한다. / inline = 글자 영역만큼 차지한다.
한 줄 씩 쌓인다. 글자 영역만큼 가로로 쌓인다.
- 배치하고 싶은 요소들이 담긴 부모 태그에 flex를 적는다.
- 개발자 도구를 통해 flex 속성들을 보고 원하는 배치를 찾을 수도 있다.
- flex는 기본적으로 왼쪽에서 -> 오른쪽으로 배치된다.
1 - 9 데일리모토 프로젝트 1
- </head>태그 앞에 <style> 태그를 넣어주고, </style> 태그 앞에 body {} 태그를 넣고 원하는 속성과 속성값을 적는다.
- 네브바(navbar) = 상단 메뉴 / 메인(main) = 본문 / 푸터(footer) = 연락처 등
1-10 데일리모토 프로젝트 2
- flex가 기본적으로 왼->오 배치되는데, flex-direction: column; 을 쓰면 위->아래로 배치된다.
- 100vh = 화면 높이(뷰포트?viewport? height)의 100%
- position: fixed; = 위치 고정
- 배치를 위해 width: 100%;를 한다. 이유는 footer영역이 글자라서 width를 주지 않으면 가운데 배치가 안 된다.
따라서 width를 해야 여백이 생기고, 여백을 기준으로 가운데 정렬이 가능해진다.
*
본격적으로 VS Code 프로그램으로 실습하면서 강의가 진행되고 있다. 아직은 자발적으로 코드를 만들 수는 없지만 시키는 대로 열심히 따라하는 중이다. 우선 이런 식으로 코드를 입력하고 어떻게 나타나는 지를 계속 보다 보면 결국 익숙해져서 내 것이 되지 않을까 싶다. 강사님의 도움없이 내 스스로 코드를 입력해서 사이트 하나를 만들 수 있을 그 날을 위해 열심히 강의를 들을 것이다.
* 노트 필기
