22_01_13_Thu.md

[22.01.13.Thu] - Day 05

CSS

• CSS 색상 지정 방법
  • 직접 색상 명칭 지정 가능
    • 실무에서 일반적으로 white, black만 직접 지정해서 사용
  • RGB 색상 (각 색상 값; 0~255)
    • 색상 디테일 설정 가능
    • rgba; a는 alpha 값 (투명도)
    • VS Code extension; CSS 서포터
  • HEX 값 이용 (16진수 표기법)
    • red, green, blue 조합 이용
    • 실무에서 alpha 값 줄때는 무조건 rgba 방식 이용
  • HSL 이용한 방법
    • Hue(색조, 0360), Saturation(채도, 0100%), Lightness(밝기, 0~100%)
    • hsla도 가능 (alpha, 투명도 추가)
• background 관련 속성
  • background-image: url('')
    • 이미지를 배경으로 사용 가능
    • 이미지 사이즈 작으면 반복되는데 background-repeat 속성으로 세팅 가능
      • repeat-x, repeat-y, no-repeat
      • 기본은 x, y축 자동 repeat
  • background-position
    • right top 하면 이미지 윗 부분으로 맞춰지고
    • right bottom하면 이미지 아랫부분으로 맞춰짐
  • background-attachment
    • fixed; 화면 스크롤해도 배경 이미지 고정되도록
    • scroll; 기본 스크롤 세팅
  • background
    • 한 줄로 축약 가능
    • 순서는 지켜야 함
• border 관련 속성
  • border-style 속성
    • dotted; 점선
    • dashed; 조금 긴 점선
    • double; 이중선
  • border-width 속성
    • border의 굵기 (light, bold 등 이름으로도 지정 가능)
  • border-color 속성
    • border 색상
  • border
    • 실무에서 대부분 한 줄로 축약함
    • border-width border-style border-color 순서 반드시 지키기!
  • border-radius
    • px, % 등 가능
    • border 둥그랗게 설정 (각도)
• width, height 관련 속성
  • %로 하면 현재 보고 있는 브라우저 사이즈 기준으로 비율 지정
  • px로 하면 사람마다 컴퓨터 스크린 사이즈 다르기 때문에 무조건 %단위로 설정!
  • width 속성
  • height 속성
  • max-width 속성
    • 최대 width 값 미리 세팅 가능
    • 그 이상 되면 더 이상 안늘어남
  • max-height 속성
  • min-width 속성
  • min-height 속성
  • 자식 요소에서 height 100% 설정 시 부모 요소만큼만 100% 잡음
    (전체 페이지의 % 기준 아님)
• CSS Box Model
  • padding 속성
    • border 기준으로 내부의 부모 태그와 자식 태그 사이의 공간 간격을 더 넓힐 수 있음
  • margin 속성
    • border 기준으로 밖의 인접해 있는 box 요소 사이의 간격 더 넓힐 수 있음
  • padding 기준 / margin 기준으로 공간 줄지 선택적 옵션
    • 자식 노드 수 많아지고 내부 박스의 margin 기준으로 세팅했다면
      자식 사이에 margin 도 생겨서 문제 발생 가능
      => 부모 요소의 padding 기준으로 디자인 설정!
  • margin, padding-top/right/bottom/left 세부 설정 가능
• Text에 적용할 수 있는 클래스
  • text-align 속성 (정렬 세팅 가능)
    • left(기본값), right, center
    • justify (양쪽으로 쭉 늘려줌, 빈 공간 있어야 하고 등..)
  • text-decoration 속성
    • underline; 밑줄
    • overline; 윗줄
    • line-through; 취소선
  • text-transform 속성 (영문자 기준)
    • uppercase; 전체 대문자
      • ex. 검색 키워드 (보통 DB 처리할 때)
        • 대문자로 입력했는데 JS로 가져올 땐 소문자일 수 있음
        • 디자인 CSS로 대문자 보이게 만들어도 실제 값이 대문자로 바뀌는 것은 아님!!!!!!
        • JS로 가져와서 무조건 검색 키워드를 대문자/소문자로 던지세요 표준 정함 (서버로)
        • 사용자 입장에서 보이게 만드는 디자인을 설정할 때는 transform 속성 사용
        • 실제로는 값이 대문자로 바뀐 것은 아니지만
          사용자가 보기에는 대문자로 바뀐 것처럼 보이는 효과만 줄뿐임
    • lowercase; 전체 소문자
    • capitalize; 각 단어 첫 글자 대문자
  • font-size 속성
    • 글자 크기 설정
    • px 단위, em 단위 등 가능
    • em 단위는 default font-size (ex. chrome 16px)
      • 1em은 기본 default size와 동일
      • 2em은 브라우저가 가지고 있는 기본 폰트 사이즈의 2배
      • cf. 반응형 웹; PC, 스마트폰, 데스크탑 등 알아서 디바이스에 각각 맞춰서 세팅 가능
• 커서 스타일 속성 (브라우저마다 다름)
  • e-resize; 양쪽 화살표
  • pointer; 손 모양 (누르는 디자인)
  • move; 상하좌우 화살표 (이동 가능한 컨텐츠)
  • help; ? 로 바뀜
  • wait; 로딩하는 디자인
  • progress; wait하고 거의 비슷
  • crosshair; 십자 모양 (화면 캡처, 이미지 사이즈 조절, ...)
• 목록 스타일 속성
  • list-style-type
    • circle; 안에 빈 동그라미
    • decimal; 숫자 순서대로
    • disc; default, 안에 채워진 동그라미
    • lower-roman; 소문자 로마자 (성냥개비)
    • upper-roman; 대문자 로마자
• 테이블 스타일 속성
  • table, th, td 모두 border 스타일 지정
  • border-collapse: collapse (이중 border 합치기)
  • 마우스 올리면 해당 row만 색상 채우기
    • tbody tr:hover에서 background-color 색상 지정
  • 수도 셀렉터; tbody tr:nth-child(even)
    • 라인별 다른 색상 구분
    • even, 2n (짝수)
    • odd, 2n + 1 (홀수)
  • td 안의 간격 넓히기
    • th, td에 padding 지정
  • 태그 셀렉터가 아니라 대부분 클래스로 지정해서 스타일 입힘! (테이블 여러 개 가능성)
• 화면에 보여지는 부분 관련 디자인 속성
  • 권한에 따라 특정 컨텐츠 위해 보여지는 버튼 달라지는 경우 있음
    • 보통 JS에서 현재 로그인한 사용자 권한 체크 후 JS에서 버튼에 접근하여
      style의 display 설정함 (권한에 따라 특정 컨텐츠 보였다 안보였다)
    • display 속성
      • none; 화면에서 사라짐 (사이즈도 없어짐)
    • visibility 속성
      • hidden; 화면에서 안보임 (+ 원래 HTML 가지고 있는 사이즈는 그대로 차지)
  • position 속성 (실무에 많이 씀)
    • relative; 부모 요소 상대적 기준으로 위치 지정 가능
    • absolute; 부모 요소 중 relative인 것 찾아서 그것을 기준으로 그로부터 디자인 먹히기
      (가장 근접한 요소 relative 기준)
      • 계속 위로 찾아가는데 없으면 body가 기준 요소가 됨
    • fixed; 고정
    • sticky; top 0 하면 스크롤 해도 위에 고정됨 (마치 nav 메뉴 고정)
    • 보통 모달창 X 버튼이나 위로 가기 버튼 등에 활용 가능
  • overflow 속성
    • overflow-y
      • scroll; 원하는 해당 영역에서만 스크롤하도록 원함
        (html 요소 안에 특정 컨텐츠 들어갔을 때 스크롤 관련)
      • auto; 알아서 사이즈 자동으로 맞춰서 스크롤 할 수 있도록 해줌
      • hidden; 스크롤 안생김, 컨텐츠도 안 벗어남
    • overflow-x (x축도 마찬가지임)
    • overflow (한번에 x, y 축 다 디자인 설정 할 수 있음)
• 반응형 웹 디자인
  • 실제 컨텐츠가 사용자의 디바이스 해상도에 따라 자유자재로 최적화된 크기로 바뀌도록 해주는 디자인
  • html 코드는 하나, 디바이스에 최적화되도록 CSS 이용하여 반응형 웹 디자인
  • 미디어 쿼리 이용
• 미디어 쿼리
  • @media screen and (max-width: 1000px) { body { } }
    • 브라우저 스크린이 1000px 이하로 떨어지면 ~
    • 아래에 있을수록 우선순위 더 높음
  • 보통 레이아웃이 바뀌도록 만듦 (컨텐츠 배치 용도)
    • 모바일 최적화되도록 (가로 세로 스크롤하면 보기 힘듦)
    • 이미지 사이즈 조절
    • 폰트 사이즈

[Note]

• CSS 목표
  • 완벽히 다루는 것 X
  • CSS의 동작 및 코드 이해!
• HTML, JS에 시간 많이 투자하기
• CSS 실무; 16진수나 rgb 방식 많이 사용!
• 배경색은 background-color 속성, 글자색은 color 속성
• CSS 4개면, 2개면 속성값 지정
  • 4개면 속성값 지정 (시계 방향 순으로 적용)
  • 2개면 속성값 지정 (상하 / 좌우)
  • 1개만 주면 암묵적으로 나머지 똑같은 값으로 생략되어 있는 것임
• 반응형 이미지
  • 최소 가시적으로 볼 수 있는 이미지 사이즈 설정 가능
• 브라우저마다 text font size, 떨어져 있는 간격 등 기본값이 있음
  • 실제 디자인상으로는 따로 값이 있지는 않음
• 디자인 속성 값 중첩되면 브라우저마다 기본 세팅되어 있음
  • 아마 세부 설정 가능한 옵션이 있을 것임
• 서로 다른 요소들은 쉼표로 연결해서 함께 묶어서 스타일 지정 가능
• 클래스에 대한 CSS 모두 세분화 해서 짤 수도 있지만 공통적인 부분만 구성하고
  다른 추가적인 부분은 디자인 유틸리티성으로 구성해서 여러 개 조합 가능
  (부트스트랩 방식이 다 이렇게 되어 있음)
• 부트스트랩 디자인 시스템 <- 트위터가 만듦
• 테일윈드는 유틸리티를 너무 세분화해서 쪼개서 힘들 수 있음
• 잘 되어 있는 디자인 시스템을 많이 쓰다보면 그 시스템 구조 및 기본적인 것들이 외워짐
• 원하는 스타일 테마는 부트스트랩 테마 찾아서 구매하면 상당히 편리하고 좋음
  • CSS를 보고 바꿀 수 있을 정도만 되도 충분함
  • 처음부터 일일이 다 디자인 할 필요 없음
• React; JS 코드 안에서 일일이 HTML, CSS 다 핸들링 해야함
• 반응형 웹 디자인을 직접 만드는 경우는 거의 없음
  • 부트스트랩 같은 디자인 시스템 사용하면 편리함!
  • 부트스트랩 <- 반응형에 최적화된 디자인 시스템
• CSS
• Vue 에서는 HTML, CSS 코드 그대로 넣음
  • Vue는 HTML, CSS, JS 영역 완벽히 분리되어 있음
  • Vue의 styld 컴포넌트 권장 X
    (JS에서 스타일 지정하는 것 권장 X)
• React는 JS에서 HTML, CSS, JS 모두 핸들링 해야 함
  • 초보자가 능숙하게 잘 사용하기 너무 어려움
  • HTML, CSS, JS 다 잘 알아야 함
  • 디자인 변경 필요해서 디자이너가 다시 만들어주면,
    또 React 개발자가 일일이 스타일에 맞게 수정해야 함
• REST API; 서버단에서 데이터 조회하기 위해 제공하는 API 방식
  • 폼 - GET, POST는 클라이언트 단에서 API 호출할 때 어떤 방식으로 호출할지에 대한 방식
• 기업마다 표준 디자인 스타일 가이드 있음
  • 그 가이드를 바탕으로 웹 디자이너가 디자인 퍼블리싱 만듦
  • 이후 개발자가 JS로 동작 기능 추가 (+ 디자인 변형 작업도 함)
• 다음 시간에 HTML+CSS 연습! (+ 반응형 디자인까지)
  • 개인 포트폴리오 웹 사이트 비슷하게 만들 예정 (0.5 ~ 1h)
  • 이후 본격적으로 자바스크립트 프로그래밍 언어 학습~~!!

Source Code