본문 바로가기
TIL

241003 - Today I Learn

by 민경현(John) 2024. 10. 3.

 

First-word

static - 클래스 레벨의 변수나 메소드, 블록을 정의할 때 사용. 인스턴스 생성 없이도 접근이 가능하며, 모든 인스턴스에서 공유됨. 프로그램이 시작될 때 메모리에 할당되어 프로그램이 끝날떄까지 유지됨. static 키워드를 남발은 객체지향 프로그래밍의 원칙과 상반되며 메모리 사용량 증가로 이어 질 수 있음.

regex (정규표현식) : 특정 문자열의 규칙을 가지는 문자열의 집합을 표현하는 데 사용되는 언어

TIL

String[] split(String regex)

  • split 함수는 입력 받은 정규표현식 또는 특정 문자를 기준으로 문자열을 나누어 배열에 저장하여 리턴.
    • 정규식에서는 []안에 있거나 \\다음에 오는 문자는 특수 문자로 취급
    String birth = 2020.01.01;
    String[] birthArr = birth.split("\\\\.");
    String birthYear = birthArr[0];
    String birthMonth = birthArr[1];
    String birthDay = birthArr[2];
    
    birthYear = 2000birthDay = 01
  • birthMonth = 01

정규식

정규식 문법 기호

기호 설명 예제

. 임의의 문자 1개를 의미  
^ 시작을 의미 [] 괄호 안에 있다면 부정의 의미 ^a: a로 시작하는 단어
$ $앞의 문자열로 끝나는 지를 의미 a$: a로 끝나는 단어
[] [] 괄호 안의 문자가 있는지 확인 [ab] : a와 b중 하나
- 사이의 문자 혹은 숫자 [a-z] a부터 z까지의 모든 문자
    또는
() 그룹 01(0
{} 개수 a{2}b: : a가 2번 나온후 b가 나옴
\b 공백, 탭, “,” , “/” 등을 의미  
\B \b의 부정  
\d 0~9 사이의 숫자, [0~9] 와 동일  
\D \d의 부정  
\s 공백, 탭  
\S \s 의 부정  
\w 알파벳 대소문자 + 숫자+”_”, [a-zA-Z_0-9]와 동일  
\W \w의 부정  
? 앞의 표현식이 없거나 최대 a1? : 1이 최대 한개만 있거나 없을 수도 있다.
ex) a, a1    
* 앞의 표현식이 없거나 있을 수도 있다. a1* : 1이 있을 수도 있고 없을 수도 있다.
{n} n번 반복 a{3} → aaa
+ 앞의 표현식이 1개 이상 a1+ : 1이 한개 이상
ex) a1, a111, a11111    
{n,m} 앞의 표현식이 최소 n개, 최대 m개 반복 a{3,5} → aaa, aaaa, aaaaa
{n,} 앞의 표현식이 n개 이상 a{3,} → aaa, aaaaa, aaaaaaaaa

자주 사용되는 정규식

정규표현식 설명

^[0-9]*$ 숫자
^[a-zA-Z]*$ 영문자
^[가-힣]*$ 한글
\w+@\w+\.+w+(\.\w+)? E-mail
^\d{2,3}-\d{3,4}-\d{4}$ 전화번호
^01(?:0 1
\d{6} - [1-4]\d{6} 주민등록번호
^\d{3}-\d{2}$ 우편번호

CSS

  • Style sheet 언어.
  • 종속형 시트 또는 캐스케이딩 스타일 시트라고 함.
  • HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있음.
  • CSS문법
  •  
  • CSS 속성
    • box-sizing : border-box , content-box / 박스의 영역을 설정
    • position : relative (기본값)| absolute(부모태그로부터 값을 설정) | fixed( 고정값) | sticky(모바일에서만 적용, 일정 부분에서 고정됨) / 위치에 관련한 설정
    • display : flex(옆으로 쌓임) | block | inline-block(영역이 넓을때는 인라인 처럼 되고 영역이 좁아지면 블록요소 처럼 행돔함)
    • margin : 100px
    • padding : 100px
    • width : 100px
    • height : 100px
    • border : 1px solid #000 / 테두리
    • background : #fff
    • font-size : 16px
    • font-weight : 300(thin) | 400(normal) | 500(medium) | 700(bold)
    • color : #000
    • text_align : center| left| right
    • overflow : auto|scoroll | hidden / 글자가 넘치면 어떻게 반응하는 지에 대한 설정
    • z-index : 1 / 기본값은 0, 숫자가 커질 수록 앞으로 나옴.
    똑같은 속성이 두 개 이상이 존재한다면 이전에 있는 속성을 무시한다.
  • 선택자
    1. 기본선택자
      • 동일한 아이디 명은 권장 사항이 아님.
    2. *(전체), div(요소), .(클래스), #(아이디), [attr] (특성
    3. 그룹선택자 : ,
    4. .box1, .box{ color: red; } .box.border-box { border: 10px solid red; } .box{ font-size : 10px; &.border-box { border : 10px solid red; } &.bg-box{ background-color: blue; } }
    5. 결합자
      • ‘빈칸’ 자손결합자
      • 자식 결합자
      • ~ 일반 형제 결합자
      • 인접 형제 결합자
    6. 가상클래스 선택자
      • :hover, :focus, :focus~visible, :active, :checked, :disabled, :not()
      • :first-chiled, :last-child, :nth-child, :only-child
    7. 가상 요소 선택자
      • ::before, ::after, ::placeholder
    https://developer.mozilla.org/ko/ = mdn 참고문서