youngik

이번 글에서는 Web page를 구성하는 기본 지식에 대해서 작성을 해보고 다시 한번 상고해보자 한다. 웹페이지는 크게 front-end / back-end 부분으로 나누어진다. 웹 프로그래밍에 관심이 있는 사람이라면 크게 2가지 부분으로 나누어진다는 사실을 알고 있을 것이다. 위와 같이 User가 browser에게 웹페이지를 request하면, browser는 front-end을 보여주고 보이지 않는 데이터 부분과 페이지 동작 코드 부분을 back-end에 요청해서 불러와서 보여준다. 1. front-end 먼저 웹페이지 시각적으로 보이는 부분인 front-end의 구조는 크게 1) HTML : 웹페이지의 뼈대 2) CSS : 웹페이지 꾸밈 (폰트, 색상, 이미지 등) 3) Javascript : 웹페..

이번에 Naver 공채 코딩테스트를 준비하기 위해서 java를 이용해서 연습을 하려고 한다. Java를 사용을 잘 안해보다가 이번에 하는 것이다 보니 설치환경부터 까먹어서,, 다시금 설치해보려고한다 JDK, JRE, JVM의 명칭들이 있는데, 어떻게 Java가 실행이 되는지에 대해서 다시 공부하고 알아보아야겠다. 1. JDK - java development kit의 약자로, java 환경에서 돌아가는 프로그램을 개발하는 툴들을 모아놓은 패키지이다. (ex) javascript, java 등등) - 자바 바이트코드 컴파일러, 디버거 등의 기능을 제공한다. - JDK = JRE + (개발에 필요한 도구)java, javac를 포함. 2. JRE - java runtime enviroment의 약자로, 자바..

Swiper 최근 다양한 웹사이트를 보면 swiper를 사용하지 않는 사이트는 잘 없는 것 같다. Naver, Daum 등 화살표 표시로 지정된 범위에서 다양한 화면을 불러올 수 있는 기능이다. Swiper 홈페이지에서 API로 기본적인 뼈대인 코드를 불러와서 동작을 확인할 수 있고 다양하게 사용자가 원하는대로 custom 또한 할 수 있다. 그러면 이제 Swiper를 어떻게 사용하는지에 대해서 한번 알아보자 ▶swiper 공식 홈페이지 : swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions a..

img파일을 src 속성으로 저장된 파일을 불러왔던 나는 Sprite img를 사용을 왜 해야할까? 생각이 들었고 찾아본 결과 극단적으로 한 웹페이지에 100개의 img를 로드했을 때 서버에 부과되는 트래픽과 1개의 큰 img를 불러와서 부분적으로 100개의 이미지를 잘라내서 쓰는 방법 중 어느것이 더 효과적일까? 당연히 후자이다. sprite img를 사용함으로써 http request를 줄임으로써 당연히 웹페이지의 속도 또한 향상이 된다. 당장 혼자서 만들고 접속하는 웹페이지는 문제가 없겠지만 1만명, 10만명,, 100만명이 접속하는 웹사이트라면 당연히 성능문제를 고려할 수 밖에 없다. 예를 들면 노트북이 같은 성능이라면 가벼운 노트북이 더 좋지 않겠는가? CSS sprite *css sprite ..

HTML HTML은 (Hyper Text Markup Language)의 약자로, 웹페이지를 만드는 마크업 언어이다. 쉽게 메모장에서도 작성이 가능하며 (다른 이름으로 저장 -> 파일명.html)을 작성하면 html 파일로 열 수 있고 전체적인 웹 페이지에서 뼈대를 구성하는 역할을 한다. 프로그래밍 언어와는 다르며, 생각보다 관대한 규칙을 가지고 있다. ex) 태그를 꼭 안 닫아도 실행이 되는,, ●태그 구조 크게 부분에서는 CSS, Javascirpt 등 파일링크 및 문서작성형식 등을 명시한다. ... 부분에서는 html의 실제 보이는 부분을 구성하는 부분이다. 출처 : namu.wiki/w/HTML XHTML html언어와 동등한 표현 능력을 지닌 xml 마크업 언어이다. html보다 엄격한 표현 규..