4일차 css학습을 이어나갔다. 새로 알게된 내용은 가상선택자와 닷홈에서의 무료 호스팅과 파일질라를 통한 내 홈페이지 도메인만들기와 간단하게 네이버와 카카오톡 친구목록을 좀 더 구체적으로 만들어보았다.

1) 학습내용

• 가상선택자

가상선택자란 선택한요소에 어떠한 행동과 규칙에 의해서 디자인을 적용하는 방식이다.

1. 링크에 디자인을 적용 a:link
2. 링크를 눌렀을 때 적용 a:active
3. 링크에 마우스를 올렸을 때 적용 a:hover
4. focus - 디자인을 정하고 클릭하면 적용된 디자인 출력
5. first-child -가장 먼저있는 자식에게 적용
6. last-child - 가장 마지막에 있는 자식에게 적용
7. nth-child(n) - n번째 자식에게 적용
8. nth-child(2n+1) - 홀수 혹은 짝수번째에 오는 자식에게 적용
9. 우리가 작성하는 글자와 태그사이의 공간 a:before
10. 닫힘태그와 글자사이 a:after


• 나의 웹사이트 만들기

내가 아무리 좋은 웹사이트를 만들어도 누군가가 볼려면 서버와 연결해 누구라도 주소만 검색하면 내 사이트가 출력되도록 해야한다.

많은 종류의 방법이 있지만 오늘 해본 방법은 닷홈과 파일질라를 통해서 실행했다.

우선 https://www.dothome.co.kr/에서 무료호스팅 계정을 만든 뒤 파일질라(FTP)를 통해 내가 만든 사이트를 링크해서 완성했다.

닷홈 웹사이트


• 네이버와 카카오톡 목록

네이버와 카카오톡을 보면 경제, 음악, 뉴스, 채팅 등 여러가지 사이트의 구성요소들이 있다. 이전과는 다르게 css를 좀 더 활용하여 구체적으로 만들어보았는데

가상선택자를 활용해 마우스가 올라갔을때 밑줄이 생기는 효과 text-decoration:underline 이나 리스트의 스타일을 정리하는 list-style:none등을 새롭게 사용해봤다.

이외에도 실무에서는 css와 js, 그리고 img같은 파일들은 그 수가 많기때문에 따로 폴더를 만들어서 관리한다는것

그래서 우리가 이전에 했던 링크와 방법이 조금 바뀌어서
href="css/style.css" 와 같이 css/가 붙어 폴더명과 함께 입력한다.

div에 배경이미지를 불러오고 싶을때 background-image:url()을 통해 불러와야 하는데 이때 이미지를 불러오는 기준점은 style.css이다.

그러므로 그 바깥폴더인 project_1 에서 이미지 폴더의 이미지를 찾아야한다. 이때 style.css폴더에서 나올 수 있는 방법은 "../"를 적고 img/icon.png로 이미지 파일을 찾는다.

2) 학습내용 중 어려웠던 점

css의 우선순위에 대해 궁금한점이 있었는데 class값을 겹쳐서 사용해도 적용이 되는가와 class값을 구체적으로 적을 때 디자인은 어떤 우선순위로 적용될까에 대한것이 어려웠다.

3) 해결방법

이 용 멘토님께서 주신 피드백으로 정확하게 정의해놓은 사이트에서 참고를 많이 했으며, 직접 궁금한부분에 코드를 만들어서 실험해보았다.

4) 학습소감

난이도가 점점 더 올라가는데 외우는것보다 많은경험을해보고 정말 필요할때 잘 활용해서 사용할 수 있도록 익히는것이 중요하다고 생각했다.

4일차 github