2022.09.14 - 개발자는 시인이다.

2022.09.14 - 논리적 사고의 중요성,

1 . css,효율적인 선택의 중요성,알고리즘의 중요성/논리적 사고의 중요성.

• 정보를 얼마나 잘 전달할 것인가.(css)
• ui,ux 사용자 경험에 집중.

1. 대상을 선택 하고 (선택의 중요함)
2. 효과 적용

• 효율적인 선택이 중요하다. 정답은 없지만 답을 찾아가는 과정에서
  알고리즘 설계 실력이 늘어난다.
• xml에 관련된 스타일을 지정해준다.
• css 는 임의 태그 선택자를 만들어 지정해줄 수 있다.
  • xml>html
• id는 중복되지 않고 한페이지에 하나만 사용을 권장한다.
• css selector 에는 위계가 존재. inline style>id>class,element,attribute 등
• 인라인 스타일: 태그안에 스타일 부여 (단 유지 보수하기가 어려우니 알아만 두자.)
• 알고리즘
  • 템플릿을 사용하면 실력에 비해 결과물은 비슷하다.
  • 차별성은 알고리즘으로 드러난다.

    css 선택자 검색 https://www.w3schools.com/cssref/css_selectors.asp

2 . 명명법의 중요성/상대경로 스고이

• 스타일 정하는 방법
  1. 외부 스타일 시트(권장)
     • 독립된 파일에 스타일을 정의하고 그 파일을 mark up문서에서 연결하는 방법(가장 권장)
     • 장점: 재활용성 이 우수하다. 여러 페이지로 작성된 문서에서 전체적인 성능이 우수하다.

           공통적으로 적용되는 스타일을 독립된 파일로 분리--> 여러 문서에서 사용할 수 있다.

  2. 내부 스타일 시트(보통)
     • mark up 문서 안에 스타일 이라는 태그를 그 안에 두고 스타일을 정의하는 방법<-- 해당 문서에만
       스타일을 적용하고자 할 때 권장(그럼에도 외부 권장).
     • 내부 스타일로 작성후 외부 스타일로 정의 하는 것 추천.
     • 명명법 에 주의를 해야한다.(클래스 속성 값, id속성의 값을 의미가 명확하게 명명해야한다.)
  3. 인라인 스타일 시트 정의(알아만 두자)
     • 태그안에 스타일 부여하는 방법.(유지보수 효율성 떨어짐)
     • 우선순위가 가장 높다.
• 명명법의 규칙을 세우고 잘 지켜야 효율이 올라간다.
• /* */ css 주석
• 스타일 부여후 ;(세미콜론) 해야 적용
• 상대경로의 중요함.

3 . Class/그룹화를 잘한다는것

• 전체 선택자
  • * Asterisk(아스타리스크):특수기호가 전체 선택
    • 태그의 기능을 떠나서 태그 형태이기만 하면, 효과를 적용함.
    • 상자 하위에 *(Asterisk) 를 선택해도 부분전체를 선택할 수 있다.
• 선택자 공백 선택자는 sub(하위) 태그 선택을 할 수있다.(추가 공부 필요.)
  • .class1.class2= 1and2선택. 클래스1이면서 2인 블록을 선택.
  • .class1공백.class2= 클래스1 하위에 클래스2를 찾아 선택.
• 클래스 선택이 난이도가 높다.
  • 클래스를 잘 활용하는 것이 html잘하는 척도이다.
  • 선택하는 것 자체는 쉽다. 중요한 본질은 클래스의 설정과 명명이다.
    많이 해보고 익숙해져야 한다. 클래스는 그룹화,그룹화를 잘해야한다.

4 . 생각을 표현하는 법

• 국어의 중요성,생각을 말로 표현해야한다.
  • 하고자 하는걸 말로 설명할 줄 알아야 한다.
    그래서 프로그래머는 시인이다.

5 .

• 신호등 신호 시스템 시간
• 사당역-> 과천 내리막
• 스마트 트래픽 정보 시스템 stis
  • 트래픽에 따라 신호 바뀜
  • 만드는 난이도
  • tis 고속도로
• 문제를 해결하는 service
• 다양한 selector
• :nth-of-type , :nth-child 둘의 차이를 알아두자.
• :hover =마우스를 올렸을때 효과 적용(색상,사이즈 등)

6 . 선택하는 도구는 너무나 다양하고 세분화 되어있다.본질은 무엇을 어떻게 그룹화 해서 선택할 것이냐.

• (element_p)nth-child(숫자):p태그들 중에서 n번째 자식 태그 /
  n번째 태그가 p가 아니면 미적용.
  • 자식중 선택한 태그만 고르겠다.단 n번째 태그에 다른놈이 껴있으면,X.
  • 유지 보수하기 힘듬 = 잘 안씀
• (element_p)nth-of-type(숫자):p태그들 중에서 p태그 가운데 n번째 태그/
  중간에 다른 태그들이 껴도 선택한 태그만 고르겟다.
  • 유지 보수하기 쉬움 = 잘 쓴다.
• (숫자)칸에는 수식이 들어갈 수 있다. 2n= 짝수만,2n+1=홀수만
  n=1 1 4 7 10= 3n-2
• 때로는 이해하는 것 보다 직접 겪는게 더 많은 배움을 준다.
• 범위를 지정할 때
  • (-n+x):x까지 선택
  • (n+y):y부터
  • 이해 100프로 안됨

7 .

• element:last-child= 마지막에 element 선택

8 .

• 자기계발