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-기초문법 ●한 줄 ..

코로나19 대응 방안에 대한 최신 정보를 확인하세요 숙소 체험 온라인체험 호스트 되기 위치 어디로 여행가세요? 체크인 날짜 입력 체크아웃 날짜 입력 인원 게스트 추가 10만 명에 달하는 우크라이나 피란민에게 임시 숙소를 제공해주세요 자세히 알아보기 호기심을 자극하는 숙소로 떠나보세요 유연한 검색 설레는 다음 여행을 위한 아이디어 서울 1km 거리 대구 239km 거리 대전 141km 거리 수원시 32km 거리 .wrap { background-color: white; width: 80%; max-width: 1920px; margin: 0 auto; overflow: hidden; } @media screen and (max-width: 767px) { .wrap { width: 90%; } } .bla..

플립플롭과 메모리 동작이해 ● NOR 게이트 2개를 조합해서 만들어 볼 수 있음 ● flip-flop(플리플롭): 데이터를 저장하는 조합논리 회로 ○ 첫 번째 스위치를 키면 불이 켜지고, 스위치를 꺼도 불은 켜진채로 지속됨 ○ 두 번째 스위치를 끄면 불이 꺼지고, 스위치를 꺼도 불은 꺼진채로 지속됨 ● 스위치를 키고 끄고를 저장할 수 있음 ○ 불이 켜져 있다: 최근에 첫 번쨰 스위치가 켜졌었다. ○ 불이 꺼져 있다: 최근에 두 번째 스위치가 켜졌었다. ※ 전기를 전에 켰다 라는 사실을 기억할 수 있게 되었음 ● RS플립플롭 ○ Q는 output, Q'는 Q의 반대값 ○ 단, S와 R이 1인 상태는 피하도록 설계 (Q와 Q'가 둘 다 0이 되므로) ● Level -triggered flip-flop ○ R..

Git 설치(window) ① Git SCM 접속해 설치파일 다운로드 (https://git-scm.com/) ② 설치파일 클릭해 설치 ③ 시작프로그램에서 Git Bash 실행 ④ Config 설정 ⑤ 설치완료 Git 설치(Mac) ● 사전준비. Homebrew설치 (https://brew.sh/index_ko) ○ Homebrew는 Mac환경에서 제공하지 않는 유용한 패키지를 설치할 수 있도록 도와주는 패키지 관리자 ① 터미널 실행 ② brew install git 입력 ③ git - version 입력해 확인 ④ Config 설정 ⑤ 설치 완료

Git이란 ● 형상관리도구 중 하나 ○ 형상관리도구는 다른말로 버전관리 시스템이라고도 함 ○ Git은 프로젝트 소스코드를 효과적으로 관리할 수 있는 시스템임 ● 효과적 관리란? ○ 여러 명이 동시에 작업하더라도 문제 없도록 함 ○ 소프트웨어의 여러 버전을 동시에 관리 할 수 있음 ○ 프로젝트 진행의 모든 로그를 볼 수 있으며 해당 시점으로 되돌리는 것도 가능함 Git을 사용하는 이유 ● 프로젝트 시 어떤 기능을 빼고 더하고 고치고 수정하는 과정은 필수 ● 기능을 되돌리게 될 수도 있고, 서로 다른 기능의 버전을 유지해야 하는 경우도 있음 ● 코드 관리 측면 ○ 변경된 이력 확인 ○ 이전 이력으로 되돌리기 ○ 다른 기능의 버전 코드 유지 ○ 현재 최종이 어느 시점인지 표현할 수 있음 ● 협업의 측면 ○ 각..

CSS Diner 소개 - 기본적은 CSS 선택자 복습 ● : 가상클래스 ● :: 가상요소 ● 태그이름 ● .을 이용해서 클래스 선택가능 ● #을 통해서 id 선택가능 추가적인 CSS 선택자 ● *로 모든걸 선택할 수 있음 ● 선택자 + " " + 선택자 로 선택가능 ● 선택자 + "+" + 선택자: 다음 클래스에 적용가능 ● 선택자 + ">" + 선택자: 직계자손만 선택해서 적용가능 ● 선택자 + "~" + 선택자: 앞 선택자 다음에 뒤 선택자 나오면 적용 ● [] : 속성 선택자 CSS 가상 클래스 ● : 로 선택함 ● :hover 는 마우스를 올리면 적용 ● :link 는 사용자가 클릭하기 이전의 링크에 적용 ● :visited 는 클릭을 한번이라도 한 링크에 적용 ● p:net(.class) 는 ..