리스트 예제 연습

2022-08-02

계정을 바꿔서 다른 곳에 있던 글 옮겨왔다.

그 후로 나오는 강의들은 실습이 아닌 거의 주로 설명 영상이였다... 그래서 흥미가 떨어져 점점 템포가 느려지는게 확연히 보였다.

그래도!!!

노트는 작성해 놔야지! 미래의 내가 복습할 수 있게!

• z-index : 포토샵이나 일러스트의 레이어같은 개념. 여러개의 이미지 혹은 개체들이 겹쳐 있을 때 무엇을 앞으로 보낼 지 지정할 수 있다. 기본은 0이 default이고, 숫자가 클 수록 위에 있는 것이다.
  
  
• nth-child : 같은 클래스를 가진 개체들이라도, 자식 개체들의 속성을 다르게 지정해줄 수 있다. css에서 nth-child 태그와 함께 괄호를 열고 숫자를 입력해주면 된다!!
  숫자는 자식태그의 순서를 말하는데, (1)은 첫번째 자식을 말한다. 숫자 외에도 odd나 even처럼 짝수 홀수번 자식에게만 해당할 수도 있고, 심지어 2n+5 처럼 방정식으로 쓸 수도 있다.

  (이건... 쓸 날이 올 지는 모르겠지만ㅎㅎ)
  
  

• reset.css 를 쓸 때는 style.css보다 먼저 적용하도록 한다. 코드는 위에서부터 적용되므로 먼저 리셋을 싹 해놓고 스타일을 입히는 것이 추후에 탈이 없다.
  
  
• float : 글과 함께 이미지 등을 사용 할 때에 원하는 위치에 객체를 띄워 사용할 수 있다. 싶다면 float을 사용한 후에 마지막에 clear명령어를 써 주어야 한다. 글자가 객체 주위로 달라붙지 않게 하는 속성이라고 하는데 아직 와닿지는 않는다^^; clear:right, clear:left, clear:both... 등등이 있다. 이름에서 알 수 있듯이 각각 좌측, 우측, 양측의 부유를 제거해준다. none도 있는데 사실 차이를 잘 모르겠다ㅠㅠ 이건 직접 작성해보면서 느낌을 알아가야 할 듯 하다...

float을 사용해 만들어본 오늘의 예제! hover에서 약간 문제가 생겼지만...^^ 일단 오늘은 운동하러 가야겠따!