CSS 디자인 1차_240426

🎉 오늘 한 일

☑️ 9시 알고리즘 특강 수강
☑️ 매니저님과 상담
☑️ CSS 디자인 기본 익히기 1차
☑️ 과제 필수기능 시도하기

💡 새로 알게 된 것

기본에 충실하기 위해 반응형 웹퍼블리싱 책을 보면서
쭉 내용들을 살피고 정리하는 내용이다.

1. CSS 기본 문법

1)내부 스타일 시트 - Html 문서 안에서 스타일 태그 기재
   <style type = "text/css">     //스타일 시작
   </style>                      //스타일 끝
   
2)외부 스타일 시트 - CSS 파일을 Html문서에 연결
   <link rel = "stylesheet" type="text/css" href="style.css" />

2. 선택자(Selector)

** 스타일 요소 생략함. 
  스타일 태그에 들어가는 선택자를 예시를 들어 정리했습니다.
1)타입선택자 - 태그 이름 그대로 가져다 쓰는 선택자
  p { 속성 : 속성값; }
  
2)id 선택자 - id로 붙인 이름을 가져다 쓰는 선택자. 
             # 을 붙여 표기
  #ctxt { color : blue; }
  
3)class 선택자 - class로 붙인 이름을 가져다 쓰는 선택자
                . 을 붙여 표기
  .ctxt { color : blue; }
  
4)전체 선택자 - 페이지의 모든 요소를 가리키는 선택자
               * 을 붙여 표기
  * ctxt { color : blue; }
  
5)자식 선택자 - 현재 요소 내의 바로 아래 나오는 요소만을 가리키는 선택자 
  li > p { color : blue; }
  
6)인접 선택자 - 현재 요소 밖의 바로 뒤에 나오는 요소만을 가리키는 선택자
  h1 + p { color : blue; } 
  
7)속성 선택자 - 마크업의 속성을 선택자로 사용
  h1[class] { color : blue; } // class 속성이 있는 모든 h1
  img[alt] { color : blue; }  // alt 속성이 있는 모든 이미지
  *[title] { color : blue; }  // title 속성을 갖는 모든 요소
  
8)가상 클래스 선택자 - 링크 걸린 글자에 스타일 부여
  a:link { color : blue; }  // 링크된 글자를 보고만 있을 때 스타일 부여
  a:visited { color : blue; } // 링크된 글자를 눌러 해당 페이지에 갔다가 돌아온 경우 스타일 부여
  a:hover { color : blue; } // 링크 걸린 글자에 마우스가 닿았을 경우 스타일 부여
  a:active { color : blue; } // 링크 걸린 글자가 활성화되었을 경우 스타일 부여
  a:focus { color : blue; } // 링크 걸린 글자에 포커스 생길 경우 스타일 부여

9)수도 클래스 선택자 - 요소 세부 조건까지 나타낼 수 있는 선택자(생략)

10)종속 선택자 - 타입 선택자와 아이디(#)/클래스(.) 선택자가 결합된 형태
   p.more a { color : blue; } // 클래스 명이 more인 p태그의 링크 {a}색상을 변경   

11)하위 선택자 - 한 선택자 내부에 존재하는 또 다른 선택자
   .box li { padding : 5px 0; } // 클래스 명이 box인 요소 내부의 li에 세로 여백 부여

12)그룹 선택자 - 선택자들을 쉼표로 구분하여 여럿을 함께 기술
                코드 줄이기는 좋은 방법😍
   h1, p { border : 1px solid #000 ; }  // h1과 p 요소에 1px짜리 검은 테두리를 준다.             

🤔 하루 돌아보기

매니저님께 다시 잘 해보겠다고 말씀드리고 이런저런 얘기하다가 기능구현도 시도했는데 어찌저찌 되었다.. 일단 하나하나 코드 뜯어서 공부좀 해야할 것 같고 팀원분이 자바스크립트 공부 방향성을 제시해줘서 고마웠다..! 열심히 해보쟈

📝 주말 할 일

□ JS 문법 종합반 과제와 필요한 부분 수강
□ 개인 과제 코드 분석
□ CSS 정리, JS 기본 문법 정리
□ 생활코딩 JS 완강