[Front-End] 화면구현 기초 1

삼성전자 홈페이지의 한 부분을 사진 2개를 가지고 간단하게 만들어 보았다.

첫 화면 구현,,,!

'display: flex'를 처음 사용해본 결과물이다.

 

flex로 화면을 조각 조각 묶어보자면,

이러한 구성으로 묶었다.

파란색으로 큰 묶음을 2개로 나누었다. 

이외에 조각들은 큰 묶음에서 더 조각내어 하나의 구성으로 묶은 것들이다. 

 

화면 구현에 있어 '묶음'과 '정렬'이 많은 부분을 차지하는 것 같다.

 

먼저, 상단 구현 시 하나의 큰 카드로 구성하였다. 

이미지가 없기 때문에 큰 카드로 구성한 클래스에 'text-align: center;' 로 가운데 정렬을 해주었다. 

그리고 'letter-spacing'으로 글자 간격을 조정해주고 margin 값을 넣어주며 간격을 맞췄다.

 

2개의 이미지를 좌측 정렬하기 위해서 flex로 파란색의 큰 묶음으로 이미지들을 묶어준다.

margin 값으로 이미지와 글자의 간격을 맞춰주었다. 

border-radius로 사진 모서리를 둥글게 만들어주었고, 

'font-weight: lighter'로 설명글 구성을 다르게 만들어주었다. 

폰트도 더 깔끔한 것으로 바꾸고 싶었지만 하는 방법을 몰랐다 ^^!

 

 

 

---

 

 

두 번째 작업은 flex를 사용하지 않고 구현하였다. 

화면 구성의 기본 개념은 '위에서 아래로, 왼쪽에서 오른쪽으로' 이다. 

HTML에서 img, p, h1 등등의 태그들을 아래로 쭉 나열해서 적으면 화면에서도 요소들이 자동으로 쭉 아래로 정렬된다.

즉, 그냥 html에서 태그들을 적었다는 뜻...!

 

이 작업에서 조금 까다로운 점은 같은 문장에서 다른 색을 주는 것이라고 생각한다.

'30%' 와 '23,900'에서 30%를 다른 색을 주기 위해서

<h2 class="bottom-caption"><span class="percentage">30% </span>23,900</h2>

span을 사용하였다. 

CSS에서 'percentage' 클래스에 color를 넣어주면 끝!