23.05.22 ~ 23.06.04

5월 목표

• 웹 프로세스 공부

한 것

• 웹의 전반적인 구조를 알기위해 udemy에서 100일 코딩 챌린지 수강시작

6월부터는 java도 병행할 예정

---

5월 4주

23.05.25 (목)

1) 100일 코딩 챌린지 23~24일차 수강

• @midea쿼리 (미디어쿼리)
  • @midea쿼리를 사용하여 특정 너비(예-768px이하)에서 보여줄 css를 지정할 수 있음.
  • 이때 위치는 반드시 맨 아래.
    css는 종속성을 따르므로 코드가 위에서부터 아래로 읽히기 때문에 위치에 주의하지 않으면 @midea쿼리 내 css속성이 의도대로 동작하지 않을 수 있으니 주의.
• :target 가상선택자
  • 특정태그에 id를 설정한 후 다른 a태그의 위치를 id로 지정하면 그 id를 가진 태그를 향하게 됨.
    이때 :target 가상선택자를 이용하여 원하는 css속성을 넣어주면 된다.
    또 다른 가상선택자로는 커서를 올렸을 때를 가리키는:hover가 있음.

---

5월 5주

23.05.29 (월)

1) 100일 코딩 챌린지 25~26일차 수강

• 글꼴선택

  • 한 화면에 너무 다양한 폰트를 적용하지 않도록 주의
  • 보통의 경우 sans-serif폰트 하나, serif폰트 하나를 골라 사용한다고 생각할것
  • 강조 텍스트는 크고 굵게 처리

• 색상선택

  • 완전한 검은색보다는 짙은 회색을 사용하여 글자를 처리하면 더 자연스러운 느낌이 남
  • 전반적인 배경은 회색으로, 강조할 영역은 사이트의 주 색상을 정하는게 보편적임

• css변수

  • css에서도 특정값을 변수로 저장하여 사용할 수 있음.
  • 사용예시

  html {
    --color-grey-100: rgb(236, 236, 236);
    --color-grey-400: rgb(134, 134, 134);
    --color-grey-600: rgb(58, 58, 58);
    --color-grey-900: rgb(41, 41, 41);
    
    --size-1: 18px;
    --size-5: 50px;
  
    background-color: var(--color-grey-100);
    font-family: 'Krub', sans-serif;
    font-weight: 400;
  }
  h1 {
  color: var(--color-grey-600);
  text-align: left;
  font-size: var(--size-5);
  }

  변수명의 100, 400, 600은 색상의 명도를 나타냄.
  100~900까지 100단위로 표현하며, 100은 밝은색 900은 어두운색임.

• html, :root, * 선택자 구분

  • html
    • html문서의 최상위 요소
  • :root
    • :root 가상선택자는 문서의 최상위 요소를 말함
    • 기본적으로 html문서의 경우 html선택자와 거의 유사하지만 :root 가상선택자가 html선택자보다 높음
  • *
    • html문서의 모든 요소를 의미함
    • 위의 두 요소가 규칙이 포함된 요소로 상속된다면 *는 규칙을 html문서의 모든 요소에 바로 추가한다는 차이가 있음

  => 이 부분은 나중에 한번 연습해보며 정리가 필요할듯

• svg

  • 브라우저로 랜더링하고 해석할 수 있는 텍스트기반의 확장형 이미지를 의미함.
    아이콘처럼 단순한 2차원 이미지는 표현할 수 있으나 복잡하거나 일반이미지를 묘사하지는 못함.
  • https://heroicons.dev/
    https://heroicons.com/

• form

  • 사용자에게서 데이터를 받을 때 사용 (로그인, 덧글작성, 주문 등)

23.05.31 (수)

1) 100일 코딩 챌린지 27~29일차 수강

• inherit
  • 부모요소로부터 해당속성값을 상속받음.
    일일히 값을 재설정해주는것보다 편리함.
• :forcus
  • input창 등에서 포커스를 받았을때의 css를 지정할때 사용하는 가상선택자
• input
  • 사용자에게서 데이터를 입력받을 수 있는 태그
  • 종류: text(기본), email, password, radio 등
  • radio버튼의 경우 name속성을 동일하게 하면 같은 속성을 가진 radio버튼 중 하나만 선택하도록 할 수 있음.
    value속성을 통해 radio버튼을 선택했을때 서버로 전송될 값을 지정할 수 있다 - 사용자에게는 노출되지 않음.
  • checkbox의 경우에도 name속성을 동일하게 해야 같은 범주에 대한 값으로 간주한다.
• select
  • 드롭다운 목록을 생성할 때 사용.
    radio, checkbox와 마찬가지로 name속성을 동일하게 해야 같은 범주에 대한 값으로 간주됨.
    value로 서버에 보낼 값을 지정할 수 있으나 value값을 따로 지정하지 않으면 선택한 텍스트가 그대로 서버에 전송된다.
    드롭다운은 대부분 단순한 단어를 사용하므로 radio, checkbox와 달리 value속성지정이 필수는 아니다.
• novalidate
  • form유효성검사 무효화. form태그에 속성명만 입력하여 사용.
• required
  • form전송 시 필수입력요소로 지정.

23.06.01 (목)

1) 100일 코딩 챌린지 30~31일차 수강

• javascript 기초 1
  • 변수 객체 함수

23.06.02 (금)

1) 100일 코딩 챌린지 32일차 수강

• javascript 기초 2
  • 함수 메서드 연산자
    함수, 메서드 개념이 많이 부족함.

23.06.03 (토)

1) 100일 코딩 챌린지 33~35일차 수강

• javascript 활용 DOM