취준일기(32)
-
프론트엔드개발자에 대해서
내가 생각하는 프론트엔드 개발이란? 이 부분에 대해서 대답을 하기 전에 먼저, 이 질문에 대한 답은 꼭 공부를 더 한 뒤에 다시 작성하러 돌아올것이라고 다짐하며 시작해보려고 한다. 프론트엔드 개발이 뭔지에 대해 프론트엔드스쿨을 결정하기전에 꽤 깊게 그리고 오랫동안 생각을 해왔어서 대답하기에 쉬울거라고 생각했는데 막상 적으려니 쉽진 않다. 내가 생각하는 프론트엔드 개발이란 인체의 뼈대다. 내가 현재 제일 자신 있는것이 인체에 관한 것이므로 인체로 비유를 해보겠다. 해부학을 공부하면 제일 먼저 배우는 것은 뼈이다. 그 뼈를 잘 숙지하고 잘 이해해야 그 다음 강의를 잘 이해할 수 있다. 개발공부를 하면 제일 먼저 배운 것은 html/css이다. 아직은 잘 모르겠지만 그것을 잘 해야 다음 강의를 잘 이해할 수 ..
2023.03.16 -
운영체제(1)
운영체제 ● OS(Operating System) ● 주요 운영체제: 윈도우, UNIX 계열 OS(리눅스), MacOS ● OS는 더 정확히는 커널(kernal)을 의미함 ○ 일반적으로는 커널에 여러가지가 추가된 상태를, OS라고 통칭함 커널과 쉘 이해 ● 쉘(Shell) ○ 사용자가 운영체제 기능과 서비스를 조작할 수 있도록 인터페이스를 제공하는 프로그램 ○ 쉘은 터미널 환경(CLI)과, GUI 환경 두 종류로 분류 ○ 유명한 쉘: 리눅스 bash ● 시스템 콜(System Call) ○ 시스템 콜 또는 시스템 호출 인터페이스 ○ 운영체제가 운영체제 각 기능을 사용할 수 있도록 시스템 콜이라는 명령 또는 함수를 제공 ● API(Application Programming Interface) ○ 모호한 용..
2023.03.15 -
핵심 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 -
SASS
CSS도 계층적으로! SASS ● SASS(SCSS): CSS의 확장언어 ○ CSS보다 조금 더 높은 자유도를 개발자들에게 부여함 ○ 자유도가 높다는건 지켜야할 문법들이 많다는 것이므로 주의해야함 ○ 변수, 반복문, 가정문도 사용할 수 있음 ● 브라우저가 읽을 수 있는 언어: HTML, CSS , JS ○ SASS를 CSS로 컴파일 할 수 있어야함 ○ VSCode에서 live sass compiler 확장자 설치 ○ 파일 > 기본 설정 > 설정> 설정 열기 > "liveSassCompile.settings.generateMap": false 입력해서 map파일 안생기게 하기 SASS에서 다루는 CSS-nesting구조 ● html의 계층적인 구조에 맞게 코딩 SASS에서 다루는 CSS-기초문법 ●한 줄 ..
2023.03.12