[자바웹프로그래밍] 프론트(화면) 만들어보기

 

오늘은 이미지를 웹페이지에 넣어볼 것이다. 먼저 프론트가 뭔지부터 설명해주겠다.

 

웹 개발은 크게 프론트엔드,백엔드로 나뉜다. 

쉽게 말하자면

프론트엔드 - 이용자가 직접 보는것. 쉽게 말해서 화면

백엔드 - 각종 기능들(로그인,회원가입,좋아요, 주문 등)

이다.

 

오늘은 이미지를 넣을거기때문에 프론트에 관한 개발이다. 하지만, 무슨 이미지를 넣을지, 어떤 구조로 만들어야할지 막막하다. 

 

그럴때, 여러분들이 좋아하는 웹사이트를 따라만들어봐도 좋다. 나는 게임 디자이너가 꿈이기때문에 게임 사이트를 만들어 볼 것이다. 내가 개인적으로 생각하기에 레이아웃이 깔끔한 사이트는 리그오브레전드 사이트이다. 근데 들어가서 확인해보면 보통 사이트들이 다 구조가 비슷한걸 볼 수 있다.

 

상단

중단

하단

 

이런 구조로 되어있다. 참고로 사이트들은 

 

이렇게 우클릭을하면 저장 가능한 영상이나 이미지를 다운 받을 수 있다.

 

이제 비쥬얼 스튜디오 코드를 켜서 해야할일이 있다. 바로 이미지 폴더 만들기 이다.

 

처음에 만든 폴더에 우측을보면 새 폴더만들기가 있다. 이걸 클릭한 후 IMAGE라고 만들어주자. 

 

이미지는 그냥 쉽게 드래그를 통해 넣고 그런 게 아니다. 정확한 주소를 입력해줘야하는데 폴더를 만들어야 관리도 편하고 넣기도 쉽다.

 

방금 만든 폴더에는 드래그해서 넣어줄 수 있다. 사진을 구해 드래그를해 폴더에 넣어주면

 

이렇게 보인다. 참고로 png,jpg 뭘써도 상관은 없지만 png파일이 웹 개발엔 훨씬 좋다. jpg에 비해 png는 훨씬 가볍기 때문이다.

 

준비가 끝났다면 위와 같은 코드를 작성해본다. 위의 코드를 보면 이미지

이렇게 "폴더 주소 이름/이미지 이름.형식" 넓이 높이를 설정하는 걸 볼 수 있다. 이래서 정리를 잘 해야한다.

 

이렇게 보면 상단,중단,하단 색깔별로 나뉘는걸 볼 수 있다.

이걸 실행하면

 

 

이렇게 말이다. 간단하게 코드를 설명하면

 

이 코드는

이 창의 이름을 바꿔준다.

이건 저자 정보에 관한 코드이다.

웹사이트 배경 색깔에 관한 코드이다.

center 이건 가운데에 글씨를 고정한다는 뜻이다. 위의 이미지를 보면 보이듯 글씨가 가운데로 정렬되어있다.

 

 

 

이건 주소를 연동시키는 것이다. 위의 상단의 글자들은 그냥 단순 글씨일 뿐이다. 실제 사이트처럼 클릭하면 새창으로 넘어가거나 로딩되는게 아니다. 그런 기능을 넣는 코드가 위의 코드이다. 저기서 blank는 target의 4가지 속성중 하나인데

 

• target의 4가지 속성

- _blank  새로운 윈도우탭 (새창)

- _self     기본 값(현재 창)

- _parent 이전 부모 창

- _top       현재 윈도우 전체

 

상용화 되고있는 사이트들을 보면 _blank,_self를 많이 사용한다

 

_blank를 사용한 나는 새창으로 가는걸 볼 수 있다.

 

 

오늘은 이렇게 이미지를 이용해 간단한 프론트 화면을 구현해봤다.