210701 개발일지

1) 학습한 내용
CSS연습, Naver와 Kakao 일부분 작성 및 웹호스팅 생성
github

• 가상선택자
  선택한 요소에 어떤 행동과 규칙에 의해서 디자인 정하는 것
  CSS의 link속성 : 방문한적 없는 링크에 대해 디자인
  CSS의 active :마우스 클릭시 색변경
  CSS의 hover :마우스 올릴때 색변경

• 일정한 규칙 이용 시
  ex)

  	<ul>
  		<li>메뉴 1</li>
  		<li>메뉴 2</li>
  		<li>메뉴 3</li>
  		<li>메뉴 4</li>
  		<li>메뉴 5</li>
  		<li>메뉴 6</li>
  	</ul>
  li:first-child {
      color: red;
  } 메뉴1 색상변경
  
  li:last-child {
      color: blue;
  } 메뉴6 색상변경
  
  li:nth-child(2) {
      color: gray;
  } 메뉴2의 색상이 변경됨
  
  li:nth-child(2n + 1) {
      color: gray;
  } 홀수번째 자식들만 색변경
  
  li:nth-child(2n) {
      color: gray;
  } 짝수번째 자식들만 색변경

• 가상선택자
  before, after 정체는 디자인,캘리그래피 일 뿐 정보는 담고있지 않음.

  li:before {
        content: "|";
      } 리스트 앞에 | 표시 넣음
  
  li:after {
        content: "---";
      } 리스트 뒤에 --- 표시 넣음

---

• 폴더경유시 순서대로 입력하면 됨 '폴더명/파일명'
  폴더 뒤로갈때 "../"
  html파일이 어디있느냐, css파일이 어디있느냐가 기준으로 폴더위치 찾아가는 경로 적으면 됨

cf) 웹호스팅(파일질라)
https://www.dothome.co.kr/my/service/web/basic/detail.php

---

• css속성
  line-height: 10px; 위아래 문장의 간격 조절 속성

---

2) 학습내용 중 어려웠던 점
html과 css의 양이 많아지는데, 정리를 하면서 함에도
어느 부분의 css인지 파악하는데 시간이 걸린다.

3) 해결방법
설계를 계속보며 눈에 익히고, class속성을 잘 활용하여 css작업을 한다.

4) 학습소감
네이버와 카카오톡의 일부를 만들어봤는데 실생활에서 자주 쓰는 사이트의 html을 작성해보니 새로웠다.