네이버 메인 예제 2일차

---

완성된 메인페이지

대부분은 여태 다뤄본 레이아웃 방식이라 생소한 부분 몇개만 찾아 적어본다.

• #fff : 색상 헥스코드의 축약버전. #ffffff와 같으며 #CC6600 -> #C60 과 같이 두글자씩 반복되는 경우 세글자로 축약할 수 있다.

• content: ""; : 보통은 잘 쓰지 않지만 :before나 :after로 앞뒤에 추가 서식을 넣을 공간을 만들 경우에 사용한다. 아래에서는 background-color와 공간 크기를 이용해 얇은 선을 만들었지만 background-image로 작은 이미지를 삽입할 수도 있다.

(html)
<li> hello world</li>
(css)
li:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 11px;
  background-color: #e4e8eb;
  margin: 0 8px;
  vertical-align: -1px;
}

---

학습 소감

다뤄본 내용을 자꾸 다루는 것 같은데도 아직 익숙하지 않다. 디자인을 보면 레이아웃 구성이 떠올라야 한다고 하는데 아직 그럴 기미가 없는 걸로 보아 아직 더 많은 연습이 필요할 듯 하다.
덤으로 간단하게 인터넷 창에서 바로 코드를 작성, 실행해 볼 수 있는 사이트를 찾아 남겨본다.
html 연습 사이트

진행한 코드 링크

오늘 진행한 자세한 코드는 내 github 링크 에 업로드 되었다.