개발공부(53)
-
운영체제(1)
운영체제 ● OS(Operating System) ● 주요 운영체제: 윈도우, UNIX 계열 OS(리눅스), MacOS ● OS는 더 정확히는 커널(kernal)을 의미함 ○ 일반적으로는 커널에 여러가지가 추가된 상태를, OS라고 통칭함 커널과 쉘 이해 ● 쉘(Shell) ○ 사용자가 운영체제 기능과 서비스를 조작할 수 있도록 인터페이스를 제공하는 프로그램 ○ 쉘은 터미널 환경(CLI)과, GUI 환경 두 종류로 분류 ○ 유명한 쉘: 리눅스 bash ● 시스템 콜(System Call) ○ 시스템 콜 또는 시스템 호출 인터페이스 ○ 운영체제가 운영체제 각 기능을 사용할 수 있도록 시스템 콜이라는 명령 또는 함수를 제공 ● API(Application Programming Interface) ○ 모호한 용..
2023.03.15 -
핵심 Sass
Sass란 ● 컴파일해서 css파일을 만드는 스타일 시트 Sass 7-1 패턴 ● 7가지 패턴에 맞춰 파일관리 ○ base/ ○ components/ ○ layout/ ○ pages/ ○ themes/ ○ abstracts/ ○ vendors/ Sass @import ● 파일명 앞에 _가 붙는 경우 @import되어 사용될 것으로 파악 Sass Variables ● 자주쓰는 색이나 사이즈 등을 변수로 저장하여서 사용 Sass @mixin ● 자주쓰는 코드 집합, 재사용이 높은 코드들의 집합 Sass @function ● 변수를 받아서 return
2023.03.14 -
핵심 CSS(2)
기본 선택자 ● * 전체 : 모든 요소를 선택함 ● div 요소 ● . 클래스 ● # 아이디 ● [attr] 특성 그룹 선택자, 결합자 ● , 그룹 선택자 ● 한 칸 공백은 자손결합자 ● > 자식 결합자 ● ~ 일반 형제 결합자 ● + 인접 형제 결합 가상 클래스 선택자 ● 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있음 ● :hover, :focus, : active, :checked ● :disabled 약간 색이 빠진 색깔로 나옴 ● &:first-child(), &:last-child(), &:nth-child(), &:only-child() 가상 요소 선택자 ● ::before, ::after, ::placeholder 단축속성 ● margin과 padding의 단축속..
2023.03.14 -
핵심 CSS(1)
CSS란 ● 종속형 시트 또는 캐스케이딩 스타일 시트 ● 마크업 언저가 실제 표시되는 방법을 기술하는 스타일 언어 ● Style sheet 언어 ● css문법 ○ 선택자{정의} ○ 선택자{속성: 속성값;} ○ p{color: red;} CSS속성들 ● background, border, bos-sizing, display, bottom, font, margin 등등 핵심 CSS 속성과 작성팁 ● 위에서 선언한것이 밑에 선언한것을 덮어쓰기 때문에 순서를 지켜주는것이 좋음 CSS Box Model ● border-box를 선언하지 않으면 기본으로 content-box로 되어있음 position ● absolute는 기준이 바로 위에 있는 부모가 됨 ● relative는 기준이 브라우저가 됨 ● fixed는 ..
2023.03.14 -
CSS 애니메이션 (2)
transform 속성 ● ui를 브라우저에 그리는 순서를 만드는 방법 ○ dom-tree ○ layout: width, height ○ paint: color ○ camposite: transform 복잡한 애니메이션이 필요할 때 - animation 속성 ● wiggle 사용하기 마우스 움직임 추적하기 ● mousemove로 마우스 추적하기 x : , y : ● 커서의 위치에 따라 div의 위치 바꾸기 x : , y : ● transform으로 커서 따라 움직이기 x : , y : ● 마우스의 움직임에 따라 글씨 쓰기 안녕하세요! 째재입니다. #targetBox { width: auto; display: inline-block; border: 1px solid red; position: relativ..
2023.03.13 -
css 애니메이션(1)
CSS 애니메이션 첫 걸음 -transition ● transiton: 어떤 속성이 변할 때 얼마만큼의 시간을 사용할지 설정가능 ● ease-in: 천천히 가다가 빠르게 감 ● ease-ont: 빠르게 가다가 천천히 감 ● ease-in-out: 천천히 가다가 빠르게 가다가 천천히 감 HTML에서 Javascript 사용하기 ● 로 영역 만들어주기 ● console.log(); 로 콘솔 창에 출력하기 JavaScript로 선택하는 HTML 태그 ● js는 태초부터 웹 ui를 제어하기 위한 언어였음 ● js로 제어하고 싶은 html 태그를 선택 ● 어떤 이벤트가 발생했을 때 제어할 것인지 선택 ● css 변경 ● . 을 ~으, ~에 로 해석 ● var, let, const 로 변수 만들기 addEventL..
2023.03.13