요약
이번 수업의 내용 대부분은 css styling 연습이기에 정리할 내용이 많지는 않았다.
몰랐거나 다시 리뷰할 만한 내용을 정리해두었으며 늘 그랬듯 진행한 나의 코드는 github에 업로드해두었다.
배운 내용
1. 가상 선택자
- 우리가 선택한 요소에 어떠한 행동 및 규칙에 의해 디자인을 적용하는 방식
- 매우 다양한 선택자가 있음
- tag, id, class 처럼 html문서 상에 있는 것이 아닌, 어떤 상태를 지정하는 것이 가상 선택자
a) :link && :visited
- 아직 방문한 적 없음:
:link - 방문한 적 있음:
:visited
b) ::before && ::after
::before, ::after와 사용하는content로 string을 추가할 수 있음
다만 디자인적인 추가일 뿐이지, 정보의 추가가 아님.
2. 무료 호스팅사이트 dothome
- dothome + filezilla를 통해 나의 웹사이트를 구축 가능
3. Cascading 관련 확인 팁
- 개발자 화면의 Elements의 css 정보 화면에서, 내가 의도했던 styling이 나타나지 않은 곳을 확인 가능
- 어느 웹사이트에서든 해당 화면에서 내가 임의로 체크박스 클릭으로 스타일링 적용/해제 테스트 가능
4. line-height
- 글자간 위아래 간격을 조정하는 css 속성
어렵던 내용
어려웠다기 보다 새롭게 알게 된 내용이 좀 있었다. 특히, 가상 선택자에 대해 제대로 공부한 적이 없어, 대략적으로 hover, focus등의 기능만 이해하고 있었다. 어떠한 상태를 가리키는 용도인 만큼 선택할 수 있는 가상 선택자가 적지 않았다. 이 가상 선택자의 이름은 일목요연한 영어 단어로 이루어져 있어 필요한 순간 순간에 직관적으로 혹은 간단한 검색으로 사용할 수 있을 것 같다.
해결 방법
조금 더 깊이 있는 공부를 위해 MDN document를 참고했다. 말 그대로 엄청나게 많은 pseudo-classes가 존재하기에 구현할 수 있는 css 기능도 많은 듯 하다.
소감
웹프로그래밍을 공부하면 할수록 사용되는 용어를 많이 알기보다, 웹사이트 구축 과정의 흐름을 이해하는 이해력이 매우 중요함을 느낀다. 아마 JavaScript쪽으로 넘어가면 더욱 체감될 것 같다. 성공적인 개발 기본지식 리뷰를 위해 이번 코스를 탄탄하게 이해하면서 완성해야겠다.
나의 코드
위의 진행한 코드 및 수업 내용은 여기 github 링크에 업로드하였다.
