노션 페이지 용량이 꽉 차... 벨로그로 이전하여 현재까지의 로그를 정리하는 글임..! 노션 결제하기 초큼 아깝다 그돈으로 치킨 먹자..! 🐓
멋쟁이사자 프론트엔드스쿨을 본격적으로 시작하기 전 코드라이언 강의를 통해 html과 css기초를 기반으로 이력서만들기를 진행했다.
먼저 완성된 이력서는 다음과 같다.
샘플 이력서를 기반으로 먼저 전체적인 섹션을 나누어 html마크업을 해나갔다.
전체적인 컨테이너, 섹션, 아티클을 나누어 작성했다.
멋사프론트엔드스쿨 수업 진행 한달 후의 나는.. 현재 이 코드를 보고 왜이리 더티할까 생각되지만... 그때 당시 최선을 다했다고 생각된다.
당시 html태그와 css에 대해 알게 된 새로운 점들은 다음과 같다.
1. section 태그
div 밭이 된 나의 html을 구원해 줄, 섹션을 나눌 때 주로 사용하는 태그다.
2. article 태그
section 내의 콘텐츠를 담고 구분하기 위해 사용한다.
3. p 태그
p 태그는 마진이 있다. 따라서 reset.css로 스타일을 초기화해주어야 한다.
4. 구글 폰트 사용 방법
@import url('https://fonts.googleapis.com/css family=Montserrat&display=swap');
* {font-family: 'Montserrat';}위와 같이 @import를 사용하여 구글 폰트를 불러온다. 하지만 이렇게 부르면 용량을 많이 차지하고 시간이 걸릴 수도 있다고 한다.
5. float 속성
.float-wrap {
overflow: hidden;
margin-bottom: 4px;
}
.company-name {
margin: 0;
font-size: 16px;
font-weight: bold;
float: left;
}
.company-date {
margin: 0px;
font-size: 16px;
font-weight: bold;
float: right;
}container의 왼쪽, 오른쪽으로 위치 가능하게 한다.
첫날이라 그런지 매우 의욕이 넘쳤다.
개발자 도구 더욱 활발히 활용해서 마진, 패딩 다양하게 줘보는 것, 화면 중앙에 박스와 콘텐츠 배치하는 것, 멋사 동료들과 스터디도 꼭 함께해봐야겠다.
