HTML과 CSS만으로 이렇게 간단한 프로필을 제작할 수 있다.
1. 프로필 설정
먼저 프로필을 개발할 것이다. 결과물에서 프로필을 보면 사각형이 아닌 원 모양으로 화면에 출력된 것을 볼 수 있다. 태그에는 원 모양이 없어서 div 태그의 테두리를 변화시켜서 원을 만들면 된다.
width: 100px;
height: 100px;
border-radius: 100%;
border: 2px solid white;
background-image: url('logo.jpg');
background-position: center;
background-size: cover;원을 만들기 위해서는 태그의 크기를 지정해야 한다. 그리고 테두리의 둘레를 100%으로 설정하면 원 모양이 된다. 태그의 배경으로 이미지를 설정하고 싶으면 background-image에 이미지 경로를 설정하면 된다. 이때 이미지를 그냥 설정하게 되면 이미지가 짤려서 나오는 경우가 발생한다. 이미지의 크기가 맞지 않아서 그런 결과가 나오는 것이다. 이미지의 가운데 부분으로 태그의 크기에 맞게 설정하려면 배경의 사이즈와 크기를 설정해야 한다.
2. 링크
흰색 사각형이 수직으로 일정한 간격으로 정렬되어 있다. a 태그로 이 태그를 클릭하면 설정해둔 url 페이지가 새로 생기도록 작성했다.
width: 380px;
height: 60px;
background-color: white;
border-radius: 8px;
margin-bottom: 15px;
font-size: 18px;
font-weight: bold; /* 굵기 */
color: #44398a;
/* 내용 가운데 정렬 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-decoration: none;
box-shadow: 3px 3px 5px 0px black;width와 height 속성으로 태그의 크기를 설정했다. 태그를 보면 배경은 흰색이고 약간의 그림자가 보일 것이다. 이 그림자는 box-shadow로 설정할 수 있다.
box-shadow: x축 y축 blur spread color;
- x축: 음수는 왼쪽 그림자 적용, 양수는 오른쪽 그림자 적용
- y축: 음수는 위쪽 그림자 적용, 양수는 아래쪽 그림자 적용
- blur: 그림자의 번짐효과. 값이 작으면 선명하고 크면 흐릿하다.
- spread: 그림자의 크기로, 음수면 축소되고 양수면 확대된다.
- color: 그림자의 색상
/* 내용 가운데 정렬 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;요소를 가운데 정렬하는데 저 4개의 코드만 있으면 된다. 요소를 수직 가운데 정렬한다는 의미이다!
3. 전체 요소 수직 정렬
이제 거의 다 왔다. 1, 2에서 만들었던 내용도 가운데 수직 정렬이 되도록 코드를 수정해야 한다. 이것도 아까 요소를 가운데 정렬하는 코드를 사용하면 되는데, 단 주의해야 할 점이 있다.
결과물을 보면 HTML body에 대해서 모든 요소들이 수직 수평 정렬이다. 1, 2에서 만들었던 요소들을 하나로 감싼 다음에 이 요소가 body에 대해 수직 정렬이 되도록 아까 코드를 적용하고, 수평 정렬이 되도록 마진을 자동으로 설정하면 된다.
그리고 수평 정렬이 안 되는 경우가 있는데, 이것은 요소의 높이나 크기를 설정하지 않아서 발생할 수도 있다. 그러니 적용이 안 된다면 개발자 도구에서 확인해보자.
width: 300px;
height: 100vh; /* 전체 화면 높이로 설정 */
margin: auto;
/* 내용 가운데 정렬 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;4. 결과물
