공부

2일차 CSS_1

다겸란이 2023. 9. 26. 20:57

CSS는 따로 어디서 작성하는게 아니라 hmtl 확장자에서 작성하는 것이었다.

CSS 는 시각적인 디자인을 위해서 사용한다.

HTML 은 정보를 위해

style 태그를 이용하여 선택자를 사용하여 속성을 부여한다.

선택자를 잘 선택해야지 내가 원하는 부분에 내가 원하는 시각적인 기능을 넣을 수 있다.

선택자는 크게 태그선택,id로 선택, 클래스로 선택하는 방법이 있는데

태그선택와 클래스 선택을 다르게 봐야한다.

클래스는 정말 그룹핑을 한 것이다.

나도 처음에는 태그를 그냥 클래스처럼 작성하면 되지 않나 했지만 나중에 추후 관리를 위해서 정확한 구분이 필요하다고 한다.

그리고 태그 속에 태그를 넣는 것이 부모자식으로 설명이 되어있다. 어디에 포함되어 있는가를 위해서인 것 같다.

가상 클래스 선택자를 배웠는데 흠 솔직히 아직 어디에 필요한 사항인지를 모르겠다.

근데 밑에보면 문제 푸는 곳에서 수학적인게 들어간다고할까 배열이랄까 이런 부분이 선택되어야 하는 선택자에서 가상 클래스인 pseudo 가 계속 나왔다.

 

오늘 따라하면서 작성한  CSS 를 HTML 파일 밑에 폴더를 만들어 실습 하였다.

https://github.com/Heodagyeom/pra/tree/main/HTML

그리고 선택자 연습을 위한 홈페이지를 알려주었다.

https://flukeout.github.io/

 

CSS Diner

A fun game to help you learn and practice CSS selectors.

flukeout.github.io

이 사이트인데 힌트도 잘 되어있고 좋았다.

영상은 26까지 있을 때고 지금 현재는 32문제까지 있었다.

20문제까지 풀었고 그 뒤에는 일단 나는 CSS가 목표는 아니라서 다음 공부인 속성을 간단간단하게 배울 생각이다.

생각하고 적어보고 아오 오타를 안 잡아주니깐 같은 답인데 오타로 인해 지우고 다시 치기도 했다. 

그리고 원래 plate 라는 태그는 없다고한다 그냥 여기서 만들어주기 위해서 수정한 것이라고 했다. 이 게임의 목표는 선택자를 말하는대로 선택하게 하는 것이다. 선택되어야 하는 부분이 조금씩 움직이는데 매력있다.