본문 바로가기

뭐든지 해보자- 프로젝트3

앤틀러(ANTLR)를 Windows10에 설치 앤틀러(ANTLR, Another Tool For Language Recognition) 일반적으로 컴파일러는 어휘분석 → 구문분석 → 의미분석 → 코드생성 의 단계를 거친다. ANTR는 구문 분석(Syntax Analysis)을 위해 LL parser를 사용하는 파서 발생기(parser generator)이다. [ANTLR-위키백과] ANTLR을 사용해서 구조화된 텍스트나 이진파일을 다른 컴퓨팅 언어로 번역할 수 있다. 여기서는 공식페이지를 참조해서 Windows10 환경에 ANTLR을 설치한다. 2020년 6월 9일 현재 최신버전인 antlr-4.8-complete.jar를 다운받는다. 다운로드한 파일을 JAVA의 CLASSPATH에 변수로 설정한다. 개인적으로는 테스트를 위한 추가 리소스들을 C:\.. 2020. 6. 9.
css)화면 전체로 나타났다 사라지는 반응형 네비게이션 메뉴 toggle 버튼으로 나타났다 사라지게 하는 반응형 네비게이션 메뉴 참고한 CSS Online Tutorial 유투브 수정한 소스코드 fullscreen_navigation_menu.html fullscreen_navigation_menu_style.css open.png close.png 예제에서는 구글 웹폰트 중에서 Poppins를 사용하였다. @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,...&display=swap'); display는 웹 폰트의 로딩에 따른 동작을 설정해준다. [참고] auto : 브라우저 기본 방식. 웹 폰트가 다운로드되지 않으면 해당 텍스트의 렌더링을 차단한다. block : FOIT(Fla.. 2020. 6. 5.
css)스크롤에 따른 transform효과 browser 스크롤에 따라, 상단의 커브이미지가 변형되어 사라지는 것처럼 보이는 효과 참고한 CSS Online Tutorial 유투브 수정한 소스코드 transform_effect.html transform_effect_style.css curve.img 시각적인 효과를 고려하여 이미지 위치를 설정한다. ※ cal( ) : CSS 속성 값을 계산하는 CSS 함수 section을 브라우저 높이(100%)에서 상단으로 200px만큼 위로 설정하고, cal(100% - 200px) 이미지가 200px 높이를 갖도록 한다음에 200px만큼 위로 중첩시켜서, 마치 연속된 커브이미지가 첫 화면을 채우도록 설정한다. bottom: -200px height: 200px 예제에서는 전체 영역을 현재 브라우저 높이의 .. 2020. 6. 4.