2주차부터 시작된 개인 프로젝트 만들기이다. HTML, CSS를 가지고 다음과 같은 프로필을 만들면 된다. 
내가 만든 화면은 다음과 같다.
개인 프로젝트에서는 소스코드에 대한 설명보다는 하면서 조금은 헷갈린 부분을 이 곳에서나마 간략하게 정리하고 그 부분에 대해서는 문서를 찾으며 따로 작성할 예정이다.
1. position: relative, absolute
CSS의 position 속성에 대한 부분이다. 이 부분을 적용한 곳부터 확인해보자.
이렇게 이미지가 주황색 배경인 부분에 절반을 걸친 모습을 확인할 수 있다. 이 코드에 대해서만 보자.
.main > img {
width: 150px;
height: 150px;
border-radius: 75px;
position: absolute;
transform: translate(-50%, -50%);
}일단 이렇게만 작성한다면 이미지가 중구난방하게 되어있음을 확인할 것이다. 따라서 img의 부모 태그에 relative 속성을 적용해줘야 한다.
.main {
position: relative;
}쉽게 말해 relative는 문서의 흐름에 따라 작성하며 자기 자신 주변으로 top, bottom, left, right 값에 따라 오프셋을 적용한다. 하지만 absolute는 문서의 흐름에 따라 작성하지 않기 때문에 부모의 태그 기준이 없다면 가장 가까운 부모 태그에 기준을 두고 오프셋이 적용된다.
2. display: flex
사실 HTML을 처음 할 때 어느정도 이 구문에 익숙해져 있기는 하다. 하지만 좀 더 정확하게 알고 싶었고 정리하고 싶었기에 넣었다. 일단 해당하는 부분은 다음과 같다.
일단 flexbox가 무엇인지부터 알아보자. flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때 보다 효율적으로 배치, 정렬해줄 수 있는 방법을 제공한다.
이를테면 반응형 웹페이지에 상당한 부분을 차지한다고 볼 수 있다. 보다 더 자세한 설명이 되어있는 것은 아래 사이트를 참고하고 기본적으로 한 가지만 우리는 숙지하고 있자.
이런 구조만 알고 있다면 div태그 정중앙에 글씨를 넣을 수 있게 될 것이다. 이 부분은 공식 문서는 아니지만 잘 정리된 블로그를 찾았고 이를 확인한다.
완성된 소스코드는 다음 주소를 이용하자.
