본문 바로가기

전체 글

 (133)
(JS) DOM과 Jquery로 짠 코드 간단한 차이 DOM JQuery 추천 도서 : 'DOM을 깨우치다'
(CSS) SCSS에서 부모 선택자(&, ampersand) SaSS문법을 사용할 때의 장점은 속성을 중첩(nesting)할 수 있다는 것이다. nesting을 활용할 때 부모 선택자(&)를 잘 활용해야 한다. 부모 선택자(&)의 사용 - 부모 선택자는 특수문자 '&'을 사용한다. - 기본적으로 중첩된 SaSS 문법 안에서 사용한다. - :hover, :checked, :not(&) 등의 가상클래스에 사용된다. - :after, :before 등의 가상요소에 사용된다. - 언더바(_), 하이픈(-) 등의 클래스명의 접속사에 사용한다.
(CSS) CSS 선택자 CSS 선택자 a { background-color: yellow; } CSS의 문법은 선택자(selector)와 선언부(declaratives)로 구성 a: 선택자 background-color: 속성명(property) yellow: 속성값(value) 선언시작, 선언구분자( ; ) 선택자는 CSS를 적용하고자 하는 HTML 요소를 가리킨다. * { } : 전체 선택자 h1, h2, p { } : 그룹 선택자 header > h1 { } : 자식 선택자, 부모 태그 바로 아래 계층에 있는 요소 header h1 { } : 후손 선택자, 부모 태그 안에 들어가 있는 모든 요소 자식과 후손(자손) 선택자의 차이 - https://sectumsempra.tistory.com/57 속성 선택자 기본 속성 선..
(CSS) postion 속성 (feat. static, relative, absolute, fixed) "다시 공부하는 CSS" postion 속성 static : postion 속성을 부여하지 않았을 때 가지는 기본값 relative : 현재 위치에서 상대적인 offset 속성을 줄 수 있음 absolute : 부모 중 static이 아닌 요소의 위치를 기준으로 상대적인 offset 속성을 줄 수 있음. 부모 태그가 없는 경우에 특정 요소 postion에 absolute를 설정하면 브라우저 왼쪽 상단의 좌표가 0, 0이 된다. 부모 태그가 있는데 부모 position 속성의 값이 모두 static인 경우도 브라우저 왼쪽 상단의 좌표가 0, 0이 된다. absolute 속성을 주는 순간 이 태그 요소는 다른 태그 요소들과는 완전히 다른 층으로 이동하였다. 3차원 좌표계에서 z축이 변경되었음 fixed : ..
(CSS) flexbox (feat. flex-direction 설정에 따른 차이) "다시 공부하는 CSS" 급하게 배워서 써먹기는 하지만 체계적이지 못한 상황을 해결하기 위해 다시 정리하고 있습니다. (추가) 콘텐츠 정렬 방법 flexbox를 제대로 이해하기 위해서는 axis에 대한 개념이 필요하다. aixs는 main과 cross axis로 구분한다. mian axis는 flex-direction 속성에 의해 결정된다. flex-direction이 row 이면 main axis는 가로축(row 흐름) flex-direction이 column 이면 main axis는 세로축(column 흐름) axis를 기준으로 정렬하는 속성에는 justify-content와 align-items가 있다. justify는 main 기준 정렬, align은 cross 기준 정렬이다. 기본은 flex-d..
(Javascript) 정규 표현식 메소드 정규 표현식에서 자주 사용되는 메소드는 test(), search(), replace()이다. test() - 찾는 문자열이 포함된 여부를 알려준다. 회원가입 할 때 아이디나 비밀번호 입력의 유효성 검사에 많이 사용된다. 문장안에서 찾으려는 문자가 들어 있으면 결과는 true이고 없으면 false 이다 search() - 검색된 문자열의 위치값을 반환한다. (전체 문자열에서의 순서이다.) 순서값을 계산할 때 공백은 제외하고 판단한다. 만일 해당 찾으려는 단어가 없으면 -1을 반환한다. replace() - 문자열의 일부를 다른 문자열로 바꾸어 준다. 교체하기 Please visit Tistory! 교체하기 Please visit Tistory! 참고: https://tonks.tistory.com/20
(React) React 폴더 구조와 export default & export React의 폴더 역할을 자주 쓰이는 범위에서 알아본다. assets : 에셋, 이미지, font 등의 파일들 common utils : 자주 쓰이는 함수들 axios : axios 설정 ( 서버 통신용. 헤더 설정 등 ) components : 자주 쓰이는 공용 컴포넌트, 페이지 내의 컴포넌트 등 컴포넌트의 집합 config : 설정 파일을 넣어놓습니다. ( firebase 등 ) .env로 환경변수를 만드시는 것도 좋은 선택입니다. pages : 라우트에 할당되는 페이지 컴포넌트들의 집합입니다. routes : 라우터를 담아놓습니다. 로그인 전처리, 로딩 등을 쉽게 접근할 수 있습니다. styles : 전역 스타일, 자주 쓰이는 스타일 등을 담아놓을 수 있습니다. tests : 테스트를 담아놓는 입니..
(CSS) @media에서 Only Screen 과 Screen의 차이 반응형 웹페이지 제작에 유용하게 사용되는 미디어 쿼리. CSS 파일에서는 @media(엣 미디어)를 통해 구현된다. 참고로 Styled Component에서는 아래와 같이 삽입하면 된다. export const SectionInfoContainer = styled.div` display: flex; justify-content: center; align-items: center; border: 3px solid blue; margin: 10px; width: 100%; height: 600px; @media screen and (max-width: 770px) { flex-direction: column; } `; 적용하며 screen과 only screen의 차이가 궁금하게 되었다. only 키워드는 ..

티스토리툴바