[내일배움캠프 1일차] HTML, CSS, 데일리모토, 부트스트랩 활용

 

<style>태그 안의 코드가 복잡해지면 가시성이 떨어지고 헷갈릴 수 있다. 이는 CSS 파일 분리를 통해 코드를 체계화 하여 해결할 수 있다.

 

CSS 파일 분리

1. <style>태그 밖에서 link:css 를 통해 자동완성
2. 새 파일 - style.css 파일 생성
3. <style>태그 안의 모든 내용을 style.css 파일로 잘라넣기

이후 motto.html을 실행시킬 경우 이상없이 동작하는 것을 확인할 수 있다

 

---

 

flex를 통한 배치

 

 

위의 세 문장 세트가 정중앙 정렬이라고 생각하면 편함

• justify-content는 주축 변경
• align-items는 교차축 변경

---

 

Padding과 Margin

• 패딩(Padding)은 요소와 테두리 사이의 공간
• 마진(Margin)은 요소 바깥의 공간

패딩과 마진의 차이

 

---

 

단축키 꿀팁

• ctrl + /                    주석처리
• shift + alt + f         들여쓰기 정리 한번에
• alt + 방향키           지정한 코드 위치 변경

---

 

오늘의 회고

12시간을 코딩한다는 건 정말 힘든 일이다. 사실 반도 집중하지 못한 것 같다.

전공수업때 배웠던 HTML은 전부 까먹었다. 죄송합니다 교수님. 새로 배운다고 생각해야 할 듯.

안하면 리셋이다. 조금씩이라도 꾸준히 하자.

 

내일의 목표는 1주차 강의 마무리 + 1주차 숙제 완료 + 2주차까지 달리기