BlockChain

1. 클론 할 페이지

2. 예상 클론 레이아웃

3. 클론 후 페이지

경일게임아카데미 클론 4회 차이다. 4번째 홈페이지는 특별히 애니메이션이나 다른 기능 없이 개발을 진행할 수 있었다. 지금까지 페이지들이 반응형 웹을 고려하지 않고 픽셀값과 고정된 크기로 주었다면, 4페이지부터는 반응형 웹을 고려하여 박스들을 배치하고, flex를 이용하여 개발을 진행하였다. 이 전 페이지들은 여러 css 들과 애니메이션을 배워 어려웠다면, 오늘 만든 페이지의 경우 화면의 변화에 따라 변화하는 반응형 웹을 고려하여 개발을 진행하였다. 

1. 클론 할 페이지

2. 예상 클론 레이아웃

위의 클론 할 페이지를 바탕으로 큰 레이아웃을 구상하였다. 기본적으로 텍스트 박스 두 개는 제목태그를 이용하여 text-align center와 미디어쿼리를 이용하여 480px에 도달 시 fontsize를 조절하여 주었다. h2에는 word-break: kee를 주어 띄어쓰기가 나오면 자동으로 다음줄로 넘어가는 속성을 부여하였다.  화면이 줄어들면 2개의 아이템만 보이는 것을 위해 빨간 큰 row1으로 묶어 주었고, 빨간색 row1 아래에 row2와 img class를 주어 웹이 줄어들고 바뀜에 따라 줄어들면 2가지 아이템 박스가 보이는 반응형 웹을 만들었다. 

3. 클론 후 페이지

오늘 웹을 개발하면서 특별히 어려운 부분의 html과 css는 아니었지만, 반응형 웹을 구상할 때 어떻게 자를 것인지와 어떤 비율로 나누어질 것인지에 대해 고민하여 보았다. 또한 media쿼리에 대한 사용법을 알게 되었고,  가상요소,  ::before와 ::after 사용법의 숙지와 이에 대해 더 공부하여야겠다. 

선택자

1. 클래스 선택자

2. id 선택자

선택자

 : 선택을 해주는 요소 , 이를 특정요소들을 선택하여 스타일을 적용할 수 있게 한다. 

클래스 선택자 

: 클래스에 속성 값을 가진 html 요소를 찾아 선택한다. 클래스 선택자는 클래스에 해당하는 요소앞에 .을 붙여준다.

.items {
  color: blueviolet;
}

id 선택자

: id에 속성 값을 가진 html 요소를 찾아 선택한다. id 선택자는 id에 해당하는 요소앞에 #을 붙여준다.

#root {
  background-color: aqua;
  color: #666;
}