웹 & 프론트엔드 기본
모바일 진단 금융정보 가이드를 참조하여 검토하면서 내용을 이해하려고 하였다. 중간중간에는 회사소개서 반영할 부분을 검토하면서 필요자료들을 모으면서 진행할 수 있었다. 점심을 먹으면서 면접 질문 나오자 기술 면접을 안 봤던 부분이 너무 걸리게 되었다. 팀장님들은 과거에 기술면접을 힘들게 보시고 들어오셨다고 하셨는데 이번에는 기술면접 없이 입사하는 부분이 걸리신 건지 식은땀이 좌르륵 흐르게 된다. 점심 이후부터는 금일 일정이었던 나라장터 공고 올라오는 부분을 살펴보면서 컨설팅 분야가 있는지 찾아서 정리하는 시간을 가질 수 있었다. 저번 주 목요일부터 화요일까지 일정을 경계 잡아서 조회된 거 위주로 찾아서 정보보호 2건이 추출되었다. 그중에 특이사항은 처음에는 소기업 소상 기업만 입찰이었다가 무 응찰로 인해 중기업이 확장으로 올라와서 우리에게도 입찰 권한이 떨어지게 된 것이다. 이렇게 2건을 기입하며 오타 검토 및 대리님께 컨펌을 받고 메일을 보내는 것으로 마무리 단락을 짓게 된다.
CSS
속성 - 플렉스(정렬)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div class="container">
<div class="item">web</div>
<div class="item">mobile</div>
<div class="item">infra</div>
</div>
</body>
</html>main.css
.container {
background-color: orange;
display: flex;
justify-content: flex-end;
}
.container .item {
width: 100px;
height: 100px;
background-color: rosybrown;
border: 2px solid black;
box-sizing: border-box;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
1. .container
- background-color: orange (배경 컬러 속성 : orange)
- display: flex (레이아웃 배치 속성)
- justify-content: flex-end (요소들을 컨테이너의 우측으로 정렬)
2 .container .item
- width: 100px (가로 속성 : 100px)
- height: 100px (세로 속성 : 100px)
- background-color: rosybrown (배경 컬러 속성 : rosybrown)
- border: 2px solid black (border 테두리 속성)
- box-sizing: border-box (테두리를 기준으로 크기 설정)
- text-align: center (텍스트 가운데 정렬)
- display: flex (레이아웃 배치 속성)
- justify-content: center (요소들을 컨테이너의 중앙으로 정렬)
- align-items: center (컨테이너의 세로 축의 중앙으로 정렬)
CSS 정렬 속성에 대해서 학습해보는 시간을 가졌다. 박스가 설정값을 줄 때마다 사이즈가 커졌다가 작아졌다. 왼쪽에 있었다가 오른쪽으로 이동하고 정렬된 모습으로 움직이는 모습이 재밌게 보였다. 캡처된 이미지를 통해 보듯이 정렬이 깔끔하게 되어있음을 볼 수 있다. 이러한 정렬에 대한 속성 설정값이 작성된 거 외에도 더 있다는 것이다. 구글링해 보면 많은 글이 나오지만 작성한 부분만 풀어내기로 한다.
93일 차는 여기서 마무리하고자 합니다.
패스트캠퍼스 링크 :https://bit.ly/37BpXi
패스트캠퍼스 [직장인 실무교육]
프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.
fastcampus.co.kr
'FastCampus > 한 번에 끝내는 파이썬 웹 개발 초격차 패키지 Online.' 카테고리의 다른 글
| 한 번에 끝내는 파이썬 웹 개발 초격차 패키지 95일차 (0) | 2021.12.09 |
|---|---|
| 한 번에 끝내는 파이썬 웹 개발 초격차 패키지 94일차 (0) | 2021.12.08 |
| 한 번에 끝내는 파이썬 웹 개발 초격차 패키지 92일차 (0) | 2021.12.06 |
| 한 번에 끝내는 파이썬 웹 개발 초격차 패키지 91일차 (0) | 2021.12.06 |
| 한 번에 끝내는 파이썬 웹 개발 초격차 패키지 90일차 (0) | 2021.12.04 |
댓글