웹개발 한 번 해보겠습니다..

Spring Initializr spring initializr를 이용해 간편하게 프로젝트를 생성할 수 있다. 1. 다음 사이트에 접속한다. https://start.spring.io/ 불러오는 중입니다... 2. 옵션 설정 후 GENERATE를 눌러서 .zip 파일을 다운로드 해준다. 압축 해제 후 우클릭하여 IntelliJ로 실행시킨다. 3. 좌측 하단에 Build 버튼을 누르면 Build되고 있는 것을 확인할 수 있고, finished 될 때까지 기다린다. 우측 하단에 이러한 창이 뜰 경우, Import Gradle Project를 눌러준다. Sync가 제대로 이루어지지 않는다면, 우측에 위치한 Gradle버튼을 누르고 새로고침 버튼을 눌러준다. 제대로 로딩이 되었다면 디렉토리의 구성이 다음과 같다..

우리가 제공하는 서비스는 프로그램으로만 이루어져 있지 않다. 소프트웨어에 해당하는 프로그램, 프로그램을 구동하는 하드웨어, 여러 가지 인프라를 포함해서 '시스템'이라고 부른다. 이러한 시스템이 어떻게 구성되는지를 다루는 것이 시스템 아키텍쳐이다. 우리는 Web, Mobile 환경에서 클라이언트에게 서비스를 제공해준다. 이 둘은 각각 Web browser, Mobile App을 통해 접근한다는 점이 다르다. 서로 다른 부분들을 Front-end로 분리하고, 서로 공통인 부분들을 Back-end로 분리한다. Multi-tier Architecture 여러 개의 계층으로 구성된 시스템을 의미한다. 가장 흔히 쓰이는 것이 3-tier Architecture이다. 3-tier Architecture Present..

27-1. 반응형 웹 웹사이트를 방문하는 사용자마다 모니터의 해상도가 다르기 때문에 이를 고려해주어야 한다. 또한, 스마트폰이나 태블릿 등 모바일 기기는 모니터에 비해 화면이 작기 때문에 더욱 신경을 써야 한다. 이것을 해결해주기 위해 반응형 웹을 사용한다. @media ( max-width: 800px ) { div { background-color: black; } } 이런 식으로 @media를 사용하여 화면 크기 별 CSS 속성을 지정해준다. HEADER 팬다 주니어 스카피 케로 & 베로니 죠르디 앙몬드 안녕 니니즈 니니즈(영어: NINIZ)는 17년 11월 14일, 카카오 (기업)가 카카오프렌즈 이후 5년 만에 정식 출시한 캐릭터 시리즈다. 카카오톡 이모티콘을 기반으로 했으며, 캐치프레이즈는 '귀..

26-1. CSS파일 분리 CSS를 HTML 문서에서 분리하여 별도로 관리할 수 있다. 26-2. @import 규칙 CSS에서 "@" 으로 시작하는 키워드들을 규칙이라고 한다. (전에 다루었던 @keyframes 도 이에 해당한다.) 1. 26-1에서 다룬 link 태그를 대신할 수 있다. 2. 태그 내부에 위치해야 한다. 3. 태그 상단에 위치해야 한다. 아래의 코드는 @import 규칙을 사용하였고 link 태그는 주석처리를 해주었다. HTML 파일 HEADER Section content FOOTER ex1.css 파일 #wrap #header h1 { background-color: #ffff00; text-align: center; height: 200px; } #wrap #section { ..

25-1. 변환 속성 과거 javascript에서만 구현이 가능한 변환(transform) 기능을 이제는 CSS3에서도 구현할 수 있다. skewX( ) : x축 방향으로 주어진 각도만큼 기울인다. scaleX( ) : x축 크기를 주어진 배율만큼 늘리거나 줄인다. scale(x,y) : 크기를 주어진 배율만큼 늘리거나 줄인다. translate(x, y) : 현재 위치에서 주어진 x축과 y축의 거리만큼 이동시킨다. rotate(n) : n도만큼 회전시킨다. 애니메이션 효과를 부여할 태그에 다음과 같은 속성도 넣을 수 있다. transform-origin : 가로 세로 (%단위를 사용. 좌측 상단 기준 0%, 0%이고, 우측 하단 기준 100%, 100%이다.) z-index : 겹치는 다른 요소와의 상..

24-1. 키프레임과 애니메이션 속성 키프레임을 이용해 애니메이션 속성을 적용할 수 있다. 애니메이션을 사용하고자 하는 태그에 animation-name, duration, timing-function 속성을 설정해준다. animation-name : 적용하고자 하는 애니메이션의 이름 duration : 애니메이션의 진행 시간 timing-function : 애니메이션 효과의 시간당 속도를 조절해준다. animation-play-state : 애니메이션을 멈추거나 다시 시작할 수 있다. (paused : 마우스 올렸을 때 애니메이션 정지) animation-iteration-count : 애니메이션 반복 횟수를 정해준다. (infinite :횟수 설정) animation-direction : 애니메이션 ..

23-1. 변형 기본 HTML 태그 요소의 속성 (형태, 색상 등)이 변경될 때, CSS 변형 속성을 적용하여 변화하는 단계에 움직임 (애니메이션)을 적용할 수 있다. 속성을 적용하고 싶은 태그에 기본적인 옵션을 먼저 설정해준다. transition-duration : 변형되는데에 걸리는 시간 transition-delay : 설정한 시간만큼 기다렸다가 동작한다. transition-timing-function : 변형 효과의 시간당 속도를 조절해준다. (ease-out은 천천히 끝나게) 그 다음 어떤 이벤트를 발생시켰을 때 변형을 줄지 설정해준다. hover : 마우스를 해당 태그에 올렸을 때 active : 해당 태그를 클릭했을 때 23-2. 변형 속성 transition-property는 각각의 속..

13-1. float 속성 float 속성은 요소의 위치를 설정해주는 속성이다. block type의 태그를 왼쪽으로 붙일 때 float: left를 많이 사용한다. float: left 속성을 감싸는 태그에 overflow: hidden 을 주면 float를 사용함으로 나타나는 부유하는 현상과 넘치는 현상을 잡아줄 수 있다. 떠내려 온 빙하에서 깨어난 공룡, 죠르디 빛나는 과거를 뒤로한 채 지금은 취업을 꿈꾸며 하루하루 열심히 삽니다. 이번에는 기본적인 홈페이지 레이아웃을 예시로 보자. HEADER NAVIGATION menu1 menu2 menu3 menu4 menu5 CONTENT BANNER FOOTER float: left 속성이 부여된 태그를 감싸는 태그에는 overflow: hidden이 부..