목차:

1) JSP 프로젝트 생성법

2) github에 프로젝트 연결방법

3) 불필요한 파일을 제외시키는 gitignore파일 생성법

1) JSP 프로젝트 생성법:

New > Dynamic Web Project > 프로젝트 이름 > Finish

프로젝트 설정:

WAS 설정 (톰캣) : 프로젝트 우클릭 > Properties > Java Build Path > Libraries 탭에서 아무거나 클릭 > 오른쪽에서 [Add Libraries ...] 클릭 > Server Runtime에서 설치한 tomcat버전 선택 > Finish

Maven 프로젝트로 변환:

라이브러리 관리를 (협업에) 용이하게 만들기 위해 maven project로 변환시켜준다.

-> pom.xml파일이 자동생성됨.

방법: 프로젝트 선택 >우클릭> Configure > Convert to Maven Project 클릭

JSP 프로젝트에 필요한 html, jsp 파일들 생성하면 됨!!

참고하기: hyoje420.tistory.com/26

2) github에 프로젝트 연결방법

github에 올리는 과정 간략하게 정리:

1. 깃헙에 repo 새로 생성하기 (설정은 아무것도 하지 말고!!) 

2. 깃헙 주소 복사

3. STS4에서 연결하고 싶은 local repo를 선택하여 remote Git repo와 매칭시켜주기

    1) 먼저 2단계에서 생성한 새로운 remote git(Github repo)을 내 local PC에 clone하여 sts에 보여지게 해야한다. 

        이 과정을 sts에서 할수 있다. 

        Window탭 > Show View > Other > Git Repositories > Clone Git Repository 버튼을 클릭!  

    (remote git 주소가 뜨고 next > next> local git 주소 설정(맥은 자동으로 Users/맥유저이름/git 폴더로 세팅되더라) > Finish)

    2) 이제 remote repo 와 연결하고 싶은 local repo, 즉 내 프로젝트를 연결하기 위해 아래 작업을 수행한다.

        프로젝트 클릭(선택) > 우클릭 > Team > Share Project... > local git 주소 설정 > Finish  

    이렇게 하면 이제 local 과 remote가 연결이 되어서 git add, commit, push하면 된다.

    (즉, local에 add하고 remote로 commit, push 하는 것이다)

4. 이제 프로젝트 선택 > 우클릭 > Team > commit , push 등을 할 수 있게 옵션창이 바꿘다.

아래 이미지 참고: 
Github에 새로운 repository생성

Dynamic Web Project를 깃헙에 연동:

gitignore파일 생성법:

1) 구글에서 gitignore검색

2) 사이트에서 필요한 옵션들 입력 > 검색

3) 소스코드를 우클릭 > 다른이름으로 저장 > .gitignore 파일 이름으로 저장

(맨 아래에 질문/해답 있음)

AJAX = Asynchronous JavaScript And XML.

AJAX just uses a combination of:

• A browser built-in XMLHttpRequest object (to request data from a web server)
• JavaScript and HTML DOM (to display or use the data)

참고: AJAX는 실제로 항상 XML을 사용하여 데이터를 전송하는 것은 아니다. 이름이 그렇다 할 뿐이지 실제로는 plain txt 파일이나, JSON파일로 전송하는 경우들이 있다.

중요한 점은 AJAX는 비동기식(asynchronously)으로 웹서버와 데이터를 주고받을(Exchange of data) 수 있다는 점이 획기적인 기능이다. 이 기능을 통해서 웹 페이지를 새로고침을 하지 않고도 웹 페이지의 부분만을 새로고칠 수 있다.

AJAX작동 방식: 이 정도는 기본으로 숙지할것 (모든 내용이 순차적으로 일어남)

AJAX의 핵심은 바로 XMLHttpRequest object.인데요, 이 객체가 바로 서버와 데이터를 교환하는 역할을 수행합니다.

모든 최신 브라우저(Crome, Firefox, IE7+, Edge, Safari, Opera)에는 XMLHtpRequest 개체가 내장되어 있습니다.

생성법:

보안 문제로, 최신 브라우저들은 여러 도메인 간의 접근을 막고 있는데요, 그래서 웹페이지에서 접근하고자 하는 XML파일은 사용하고 있는 해당 브라우저 서버와 같은 위치에 있어야 합니다.

최신 브라우저는 XMLHttpRequest Object 대신 Fetch API를 사용할 수도 있습니다. Fetch API 인터페이스를 통해 웹 브라우저는 웹 서버에 HTTP 요청을 할 수 있는데, 대신 XMLHttpRequest Object를 사용하는 경우 Fetch를 더 간단한 방법으로 동일한 작업을 수행할 수 있습니다.

아래 두 이미지는 꼭 중요한 내용이니 숙지하시기 바랍니다.

(추가로, 아래 내용은 네트워크 수업을 들었으면 더 이해하시기 쉬울겁니다. HTTP 헤더 내용이 조금 들어가 있네요)

첫번째로 XHTTP객체가 생성되었으면, 이 객체로 XmlHttpRequest를 서버에게 보내게 됩니다. 이러기 위해선, XMLHttpRequest 객체의 open(), send() 함수를 사용하게 됩니다.

아래 사진에서 보시는 바와 같이, 맨 처음에 open()함수를 통해 서버에게 어떤 request를 보내는것인지 그것에 대한 정보를 전달하게 됩니다.

그리고 send()함수로 Get, Post 방식에 따라 적절하게 함수를 호출합니다.

*** open()에서 3번째 파라미터는 async를 정하는데 사용됩니다. 주로 async:true; 값을 사용하여 비동기식으로 진행합니다.

데이터 교환에 있어, GET 방식이 POST방식 보다 빠르지만, POST방식을 따를 것을 권장합니다.

다음과 같은 경우 항상 POST 요청을 사용해야합니다.:

• 캐시된 파일은 선택사항이 아닐때(즉, 서버의 파일 또는 데이터베이스를 꼭 업데이트해야할 때).
• 서버에 대량의 데이터를 보내야 할때. (POST방식에는 크기 제한이 없다.)
• 사용자 입력(알 수 없는 문자를 포함할 수 있음)을 전송할때 POST가 GET 보다 강력하고 안전한 방법이다. (데이터 유실을 막음)

AJAX를 이용하여 서버에게 request를 보낼 수 있고, 이에 대한 response를 받아서 원하는 작업을 수행할 수 있다.

www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_app

**추가로 왜 노드[0]인지 알아볼것

해답) 

비동기식으로 사용하게 되면 코드가 쓰레드로 인해서 코드를 순차적으로 실행하는게 아니라 

xmlhttp.send(); 밑의 코드를 실행하려고 할 것이다. 이게 문제가 되서 코드가 에러로 인해 작동이 안될텐데, 그래서 순차적으로 밑의 코드가 실행이 되도록 false로 설정하는 것이다.

그럼, open()을 하고 xhr.readyState상태를 0~4까지 실행을 완료한 뒤에 서버로 send()를 하게 될 것이다. 

비동기 여부는 true이면 비동기적으로, false면 동기적으로 호출을 하여, response가 올때까지 xhr.send()에서 브라우저는 대기하고 있을 것이다.

출처: https://unikys.tistory.com/232 [All-round programmer]

JS Browser BOM은 JavaScript가 브라우저와 "대화"할 수 있도록 도와주는 브라우저 개체 모델(BOM)이다.

The Window Object

윈도우 객체는 document객체의 parent 노드로써, 현 윈도우 페이지를 나타낸다.

윈도우 사이즈, 윈도우 열기, 닫기 등을 한다.

Window Location

윈도우의 정보를 알아내는데 사용된다.

현재 페이지의 url, path 주소 정보, 

Window History

현재 윈도우 히스토리를 트래킹하고 있어서 현재페이지에서 뒤로가기, 앞으로 가기 버튼을 만들수 있다.

(예를 들면 결제 페이지에서 "뒤로 가기" 버튼을 클릭해서 정보를 수정한다던지)

Popup Boxes

팝업 창을 활성화 시켜 작업을 수행할 수 있다. 

근데 팝업창은 단발성으로 그렇게 많이 사용되지 않아서 패스~

JavaScript Timing Events

Timing Events: 이벤트를 단발성, 주기적으로 활성화하기 위해서 사용하는 기능이다.

window 객체는 일정 시간이 지난 뒤에 함수를 호출할 수 있도록 다음 메소드를 제공합니다.
1. setTimeout() --> 일정 시간 후 한번만 실행
2. setInterval() --> 주기적으로 일정 시간 후에 실행됨

또한, 이렇게 설정된 함수의 호출을 취소할 수 있도록 다음 메소드를 제공합니다.
3. clearTimeout() --> setTimeOut()이 실행되고, 일정 시간 후에 이벤트가 일어나기 전에 미리 취소하는 것
4. clearInterval() --> setInterval()이 실행되고, 일정 시간 후에 주기적으로 이벤트가 일어나기 전에 취소하는 것

기본적인 문법은 각각 아래와 같습니다: (window prefix 생략가능)

setTimeOut method:

window.setTimeout(호출할함수, 지연시간);

setInterval method:

window.setInterval(호출할함수, 지연시간);

함수 취소 방법 문법도 중요한데, timeoutID를 (timing함수 반환값을 저장하는 변수) clear 해줘야 한다!!

window.clearTimeout(timeoutID);

window.clearInterval(timeoutID);

아래는 주기적 함수 실행 함수인 setInterval()을 실행 중에 멈춰버리는 clearInterval()함수 예제입니다.

JavaScript Cookies

쿠키는 주로 사용자 정보를 일정 기간 동안 저장하여, 사용자가 웹에 접근할때 서버에서 미리 사용자 정보로 사용자를 위해 커스텀 정보를 주거나 할 때 사용된다. 쿠키를 통해 또한 서버의 작업을 줄여줄 수 있다. 

자바스크립트 쿠키는 웹 설명이 더 간단 명료하다.

www.w3schools.com/js/js_cookies.asp

이어서, JS AJAX를 위한 다음 포스트를 참조해주세요!

binarywoo.tistory.com/19

www.w3schools.com/js/js_htmldom.asp 에서 한글로 정리한 내용입니다.

JavaScript HTML DOM

DOM: Document Object Model

HTML DOM을 사용하여 JavaScript는 HTML 문서의 모든 element 요소를 접근하여 변경할 수 있다.

HTML DOM 객체는 여러 객체로 이루어져있으며 트리 형태를 지닌다.

바로 이 객체 성질을 사용하여 HTML DOM을 이용하여 동적인(Dynamic)한 웹 페이지를 만들 수 있는 것이다!!

HTML 요소(element), 속성(attribute), Css style, 요소/속성 삭제 및 추가 , DOM 이벤트 추가/삭제 등을 할 수 있게된다.

중요!!
HTML DOM는 :

HTML elements를 Object(객체)로 여기며,

HTML elements에 대한 Property성질(아마 스타일)을 정의하며,

HTML elements에 대한 Access접근방법을 정의하며,

HTML elements의 Event(이벤트)를 정의합니다.

다시 말하면: HTML DOM은 HTML 요소를 가져오거나 변경, 추가 또는 삭제하는 방법에 대한 표준입니다.

JavaScript HTML DOM Elements

JS에서 HTML element를 찾는 방법은 여러가지인데, id로 가져오면 정확하게 원하는 element를 가져올 수 있고, tagname(<p>태그)이나 class(.small)으로 가져오면 배열 형태로 가져오게 되어 원하는 요소를 인덱스로 접근할 수 있다.

1. (id방식)

document.getElementById("id1").innerHTML = "Hi there"; 

2. (tag방식)

var x = document.getElementByTagName("p");

document.getElementById("demo").innerHTML = 'The first paragraph (index 0) inside "main" is: ' + x[0].innerHTML; 

3. (class방식)

var y = document.getElementsByClassName("intro");

document.getElementById("demo").innerHTML = 'The first paragraph (index 0) inside "main" is: ' + y[0].innerHTML; 

(중요!!)

원하는 특정 태그의 CSS속성을 가지는 element만 선별하기.

퀴즈!!:

정답은:

addEventListener , click

JS DOM HTML (내용, 속성, css스타일 바꾸기)

위에서 언급했듯이, DOM 성질을 활용하여 내용을 수정하기도, 속성을 바꾸기도 할 수 있다.

(내용 수정하기) document.getElementById(id).innerHTML = new HTML
(속성 수정하기) document.getElementById(id).attribute = new value
(css 스타일 수정하기) document.getElementById("p2").style.color = "blue";document.getElementById("p2").style.color = "blue";

var id = setInterval(frame, 5); --> function frame() 을 5?? 단위 간격으로 돌리겠다는 뜻이 맞는지 모르겠는디... 

clearInterval(id); --> 위에서 세팅한 주기 기간을 clear시킴....??

JavaScript HTML DOM Navigation

모든 HTML요소는 노드로 표현될 수 있다. 때문에 노드를 추가하고 제거하는게 계층별로 이루어질 수 있다.

nodeName: 노드의 element 태그 이름을 알아낼 수 있고

(ex) <h1 id="id01">My First Page</h1> 에서 id="id01"은 nodeName= h1을 가진다.

큐 형태처럼 노드 앞에 새 노드 추가와 노드 뒤에 새 노드 추가가 가능하다 (insertBefore(), appendChild() respectively)

노드 제거:

노드 대체:

replaceChild();

JavaScript HTML DOM Collections

HTML 요소들을 묶음으로, 즉, collection으로 받아 올 수 있는데,

var x = document.getElementsByTagName("p"); --> p 태그를 가지는 요소들의 collection을 var x가 가지게 된다.

An HTMLCollection is NOT an array!

한가지 주의해야할 점은 HTML collection은 엄밀히 따지자면 배열이 아니다!!
각 인덱스를 조회하는 방법은 배열과 유사하나 배열이 가지는 기능인 valueOf(), pop(), push(), or join() 는 사용하지 못한다.

Responsive Web Design 이란?

웹페이지 크기에 따라 유동적으로 화면 크기에 맞춰 HTML 과 CSS가 적용됨을 말합니다. 이를 통해 가독성을 유지할 수 있고, 다양한 기기의 화면 사이즈에 최적화된 사이즈로 웹페이지를 보여지게 할 수 있습니다. (주로 데스크탑 보다 작은 기기들이 원래는 웹페이지가 작게 보여서 발생하는 불편함을 해결하기 위해 만들어짐).

What is The Viewport?

viewport는 웹 페이지에서 사용자가 볼 수 있는 영역을 말합니다.

뷰포트는 장치에 따라 다르며, 휴대폰의 경우 컴퓨터 화면보다 크기가 더 작습니다.

HTML5는 웹 디자이너들이 <meta> 태그를 통해 viewport를 제어할 수 있는 방법을 도입했다.

모든 웹 페이지에 다음 보기 포트 요소를 포함해야 합니다.

<meta name ="viewport" content ="width = device-width, initial-scale =1.0">
이렇게 하면 페이지의 크기 및 배율을 제어하는 방법에 대한 브라우저 지침을 제공합니다.

width(너비) = device-width(장치 너비) 부분은 (장치에 따라 다름) 장치의 화면 너비를 따르도록 페이지 너비를 설정합니다.

initial-scale=1.0 파트는 브라우저에 의해 페이지가 처음 로드될 때 초기 확대/축소 수준을 설정합니다.

What is a Grid-View?

gridview란 페이지를 여러 작은 column으로 나눌 수 있는데 이걸 토대로 페이지 layout을 만들 수 있습니다.

Building a Responsive Grid-View

responsive gridview를 만드는 간단한 방법 중 하나는 바로 box-sizing과 float 속성을 활용하는 방법입니다.

하지만, 실상에는 column이 2개 이상이 필요로 할 수 있어서, 세밀하게 웹 페이지를 만들기 위해서 12개의 column으로 나눕니다.

먼저 한 열에 대한 백분율을 계산해야 합니다. 즉, 100% / 12개 열에 대한 백분율이 ® 8.33%입니다.

그런 다음 12개 열 각각에 대해 클래스를 하나씩 만들고, 해당 섹션에 걸쳐야 하는 열 수를 정의하는 숫자를 만듭니다.

이렇게 아래와 같이 웹페이지 사이즈에 따라 적용될 class를 정의하고 

(ex: 웹 페이지 사이즈가 50%일때는 .col-6 클래스가 적용이 되도록 할 수 있다)

아래 HTML 코드와 같이 특정 element가 웹 페이지 사이즈 변동에 따라 적용되고자 하는 class를 명시합니다.

ex) 웹 페이지가 75%일 때는 col-9 클래스가 적용이 됩니다.

이제 아래 부분이 정말 중요합니다.

저희는 모든 element들을 float:left로 설정했기 때문에, 본래의 웹 페이지 flow에 따르지 못하게 됩니다. 그래서 다른 element 요소가 있으면 그 요소는 마치 위 float:left가 적용된 element가 없는 것처럼 적용이 되어서 겹쳐서 보여지게 됩니다. 이걸 막기 위해서 사용하는 속성이 바로, clear: both; 입니다.

그리고 display: table; 를 사용합니다. (이걸 왜 하는지는 안나와있어 인터넷에 찾아보고 추가해서 정리할게요. ) 

Media Query:

media query는 특정 조건이 만족되면 적용되는데,  미디어 쿼리(media query)는 width, height, color 속성과 같은 미디어 관련 속성을 이용한 표현식을 통해 스타일이 적용되는 범위를 조절할 수 있습니다.

위 그림 처럼, 각 상황에 따른 미디어쿼리를 적용할 시에 화면이 작아졌을때 element가 작아서 보기가 불편했던 문제점들을 해결할 수 있습니다.

본 포스트는 www.w3schools.com/css/css3_borders.asp 에서 필요한 내용만 발췌해서 정리하였습니다.

CSS border-radius

border-radius 도 사각형을 기준으로 최 좌측상단부터 시계방향으로 하나씩 정의할 수 있다.

(top-left corner, top-right corner, bottom-right corner, bottom-left corner순)

CSS background: Hero Image

배경화면을 이미지로 만들고 그 위에 텍스트를 입히는 것

CSS Gradients

그라데이션은 top, right, bottom, left 뿐만 아니라 대각선으로도 적용할 수 있다.

사용법은 간단하다. 원하는 방향과 함께 두가지 색상을 명시하면 색이 그 방향으로 바뀐다.

CSS Text Shadow

가로, 세로 방향으로 텍스트 shadow 픽셀을 정의할 수 있다.

Blur Effect (텍스트 블러 효과)

텍스트 블러 효과는 z-index 값을 추가로 설정하여 효과를 나타낼 수 있다.

CSS Text Effects

• CSS Text Overflow
  • 텍스트 overflow가 발생시 처리 방법은 다양합니다
    • text-overflow: clip = overflow하는 텍스트는 잘려서 보여지지 않습니다.
    • text-overflow: ellipsis = 텍스트 끝을 .... 으로 표시하여 잘려짐을 알려줍니다.

CSS Word Wrapping

HTML css는 글자가 길면 다음줄로 넘기지 못하고 컨테이너 밖을 overflow하게 됩니다. 이때 단어가 overflow하지 않고 다음줄까지 이어서 보여지도록 하는것이 바로   word-wrap: break-word; 입니다.

전)

후)

컨테이너를 넘치는 텍스트를 컨테이너 안에 넣도록 만드는 명령어 입니다.

CSS Transitions

transition 은 특정 CSS효과 변화를 설정하고 적용시간을 설정할 수 있습니다.

transition 속성

transition 속성은 다음과 같은 순서로 정의할 수 있습니다.

 

1. 해당 요소에 추가할 CSS 스타일 전환(transition) 효과를 설정합니다.

2. 추가할 전환 효과가 지속될 시간을 설정합니다.
www.tcpschool.com/css/css3_transform_transition

아래 예시는 마우스를 빨간 박스에 올릴 시에 가로 길이가 300px, 세로 길이가 300px 로 각각 2초, 4초 동안 커지게 됩니다. 

효과는 부드럽게 빨간 박스가 커지는 것을 볼 수 있습니다. (커서를 밖으로 치울 시에는 서서히 작아집니다) 

Transition 은 크게 아래와 같은 속성을 지닙니다.

CSS Create Multiple Columns

CSS 문법:

원하는 선택자 태그와 중괄호 안에 "속성명:속성값;" 으로 선택자에 CSS를 적용할 수 있습니다.

Universal selector:

* {
  text-align: center;
  color: blue;
}

모든 selector에게 공통적으로 적용되는 css이다.

CSS 적용 3가지 방법:

• Inline: 태그 안에 CSS를 적용시키는것
• Internal: 같은 HTML파일 안에서 <head> 태그안의 <style>태그 안에서 정의해주는것
• External: 별개로 별도의 CSS 파일을 생성하여 여러 HTML 파일에 동일한 CSS를 적용하는 것

Cascading Order:

여러 CSS 방법이 적용되어 있다면, Inline > Internal > External 순으로 우선시되어 적용된다는 뜻

다양한 CSS Properties:

• Comment: <!-- 내용 --> , /* 내용 */
• opacity: 투명도 조절

         - (범위: 0.0 ~ 1.0)

• background-image: 배경 이미지 적용
• background-attachment: fixed; => 배경 이미지 고정시키기

Margin:

• margin: Top, Right, Bottom, Left (위에서 시계방향 순으로 지정)

- 아래는 Top, Bottom: 25px, Right, Left: 50px 입니다.

margin: auto

margin: auto로 설정해놓으면 행에서 좌우 여백을 고려하여 정중앙에 배치되게 만듭니다. (상하여백은 고려안함)

즉, div element에게 할당된 가로:300px 을 제외하고 행에서 남은 여백을 조절하여 div element를 정중앙에 배치합니다.

Margin Collapse:

이건 따로 CSS 속성이 있는것이 아니라 일종의(?) 법칙입니다...!

가령, h1 태그가 bottom: 50px; 

h2 태그가 top: 20px; 이 주어지고 서로 위아래에 맞닿이게 배치되어있다면, 두 element의 공간은 하나로 collapse되어 50px이 됩니당!!

Padding:

• width + padding: 총 길이. 
  • width:300px을 의도하였으나, padding:25때문에 총 길이는 350px이 되었다. (좌+우:  25px+25px) 

• 원하는 크기의 element를 만들고 싶을때에는, 아래 해결 방법이 있다.
• box-sizing: border-box;
• 이렇게 하면 element의 크기를 테두리까지의 길이를(border-box) 기준으로 사이즈를 지정할 수 있기 때문에 사이즈 조정에 유용하다. 
• element의 크기는 원하는 300px으로 설정을 할 수 있고, 안에 padding:25px이 적용되어 텍스트가 한껏 좁아진것을 볼 수 있다.

Text-align:

• text-align: justify
  • element안의 모든 글자 간격 균등하게 만들기.

• text-decoration: none;
  • 링크에 밑줄 제거
  • 우측 결과처럼 링크 밑줄을 제거하는데 사용된다.

• text-decoration: line-through 취소선 긋기

• text-indent: 50px; 
  • 글자 들여쓰기

• letter-spacing: 글자 간격

• 줄 간격:

line-height: 1.8

ex) p element에 big 이라는 class css를 적용한 모습

Bootstrap Icons:

아이콘을 적용시 다운로드가 필요없는 bootstrap을 사용하면 유용하다. (CDN 을 사용하기 때문에 인터넷에서 바로 이모티콘을 reference해서 적용할 수 있다)

사용법은 <link rel="stylesheet" href="웹사이트 cdn링크 주소"> 만 하면 끝이다. (대신 cdn 을 지원하는 boostrap을 제공하는지 봐야함)

CSS Links:

css 링크는 a 태그, (즉 anchor 태그)를 활용하여 사용할 수 있다.

a 태그에 적용할 수 있는 css는 아래와 같다.

1. 링크를 방문하기 전의 css 

2. 링크를 과거에 방문했을시 css

3. 링크에 마우스를 올렸을때 css

4. 링크를 마우스로 클릭했을때 css

주의점:

CSS lists:

css list에 특정 list style 따로 따로 적용방법:

CSS tables:

우리가 흔히 사용하는 horizontal divider는 table을 만들고 border-bottom:만 활성화 시켜서 만드는 방법이다.

CSS Layout:

display 특성:

CSS layout을 display를 사용하여 조종할 수 있다. 

CSS element은 크게 2가지 타입이 있는데,

1. Block-Level Elements : 새 행에서 시작하고 각 element는 따로 행을 가진다.

2. Inline-Level Elemetns : element가 필요로 하는 만큼의 공간만 차지한다. 즉, 한 행에 여러 element가 (공간만 충분하다면) 함께 올수 있다. 

CSS Layout - The position Property

• position: static;

일단 모든 태그들은 처음에 position: static 상태입니다. (기본적으로 static이라 따로 써주지 않아도 됩니다.) 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓입니다.

• position: relative;

여기서 태그의 위치를 살짝 변경하고 싶을 때 position: relative를 사용합니다. 이제 top(위), right(오른쪽), bottom(아래), left(왼쪽) 속성을 사용해 위치 조절이 가능합니다.

(이건 내가 생각했던 대로 무슨 상대위치 이런게 아니라 위치를 사용자 임의로 설정할 수 있다는 뜻이다... )

## 태그 옆에 공간을 준다고 생각하면 됩니다!! (ex. left:5px; --> 태그 왼쪽으로 5px을 준다는 뜻!!)

즉, position: relative;

     left:5px;  --> 태그 element의 왼쪽에 5px 간격이 생겨서 오른쪽으로 움직입니다. 

태그를 왼쪽으로 움직이고 싶을때에는, left: -5px; 로 해줘야함!!

• position: fixed;

이건 태그를 어느 한 위치에 고정시킬 때 씁니다. 즉, 스크롤을 아무리 움직여도 화면상에는 한 곳에 고정되어 움직이지 않고 보여집니다.

• position: absolute;

원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다.

요약:

static (기본값) :위치를 지정하지 않을 때 사용한다.

relative : 위치를 계산할때 static의 원래 위치부터 계산한다.

absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다. (무슨 말이냐면, 

<div 

fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다. 

         브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.

출처:electronic-moongchi.tistory.com/26

• position: sticky

특정 element를 페이지를 스크롤 하여도 특정 위치에 계속 붙어 있는 효과를 나타낸다.

Overlapping Elements

element를 겹처보이게 하고 싶으면 한 element가 다른 element 뒤에 위치하면 된다.

이걸 적용하기 위해 z-index: -1 을 하면 해당 element가 다른 element 뒤에 위치하게 된다.

CSS Overflow

이건 contents (내용물)이 담고 있는 container element를 넘치면 (overflow) 어떻게 처리할지 지정하는 CSS 이다.

각 방법은:

1. visible- 내용물이 넘쳐나는데로 그냥 내비두어서 보여지게 하는것

2. hidden- 넘처나는 내용물은 안보이게 가리는것 

3. scroll- 넘치는 내용물을 스크롤바로 보이게하는것

4. auto- scroll과 유사, 필요할 때만 스크롤바가 생성된다.

CSS Layout - float and clear

• float:left:

float은 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용됩니다.

• clear: both;

clear은 float속성을 사용하여 float:left, right, top, bottom을 적용하고 난 뒤에 해당 객체 다음에 오는 객체 element가 붙지 않게 하기 위해서 사용하는 속성입니다. 

즉, clear 속성은 float 속성이 적용된 이후 나타나는 다음 요소들의 동작을 조절해 줍니다.

아래 사진은 원래 p 태그가 float: left; float:right 사이에 남은 공백에 위치하였는데 , text 문자를 아래로 오게 하기 위해 적용한 속성이 바로 clear: both; 이다.

float 속성을 이용한 HTML layout 방식!!: (중요 --> 굿!)

<div> 태그 안의 <header>, <nav>, <section>, <footer> 태그는 block style을 따라서 각 태그는 한줄 전체를 활용합니다.

하지만, <nav> 와 <section> 태그는 float와 margin을 사용하여 같은 행에 같이 나타나게 만들었습니다. section 태그 안의 텍스트는 section 구역안에 제한되어 나옴. 

<nav> 태그 안에 float:left 와 border: 3px 와 width: 150px; 를 사용하여, 총 가로 길이 156px를 차지하고 있습니다.

<section> 태그는 <nav> 태그 오른쪽에 오게 하기 위해 float 속성을 사용하지 않고, 다만 margin-left: 156px; 를 주어 <nav> 태그 오른쪽에 올수 있도록 만들었습니다. 

CSS Navigation Bar 

아래 사이트에 한 단계씩 너무 상세하게 설명되어 있어서 고대로 참조해도 좋을듯!!

www.w3schools.com/css/css_navbar.asp

특이사항:

horizontal navbar를 만들때, 각 list를 display: inline으로 설정!

HTML을 이제 막 시작한 단계라면 HTML 디자인에 대해서 궁금하실거에요.

각 태그들이 어떻게 배치가 되고 어떻게 자리와 공간을 차지하는지 아셔야 나중에 각 요소들을 배치할때 엉키지 않고 올바르게 사이즈를 조절하고 배치를 할 수 있답니다.

각설하고,

inline vs block 이란?

상세한 내용은 아래 블로그에서 넘나리 잘 설명해놓아서 여기를 참조해주세용... ㅎㅎㅎ (숟가락 얹기... )

www.daleseo.com/css-display-inline-block/

본 포스트는 위 블로그를 참조하여 정리한 내용입니당

HTML 을 연습하는데 HTML 태그 배치가 (layout이라고 해야하나) 내 맘대로 딱딱 원하는 위치에 배치가 안되서 열불나더라고요.

교수님은 w3schools.com의 try it yourself! 에서 연습하라고 했는데 이렇게 하면 일일히 run을 눌러서 결과를 봐야하는게 여간 힘든 작업이 아니더라고요. 각설하고, (요약한 내용은 맨 밑에서 보세요!!) 

www.w3schools.com/html/tryit.asp?filename=tryhtml_default

제가 생각해낸 방법은 저희가 웹 페이지와 VS code를 연결해놓았잖아요? (전 포스팅 참조: blog.naver.com/PostView.nhn?blogId=blu_mountain&logNo=222195968073&parentCategoryNo=&categoryNo=11&viewDate=&isShowPopularPosts=false&from=postList)
페이지 결과화면에서 우클릭>검사하면 페이지 HTML 정보를 볼수 있답니다. 

또한 커서를 올리면 해당 구역의 HTML, CSS 정보를 볼 수 있어요!

이렇게 계속 웹 페이지 HTML 상태를 모니터링 하고 코드 수정은 VS Code에서 하면 너무나 편리한 것...! ㅜㅠㅠㅜ

너무 뻔한 이야기였나요? ㅜㅠㅜ 

저는 이렇게 하면 편한걸 뒤늦게 알았네용... ㅜㅠㅠ 

(추가): 2021/1/8

암튼 요약하자면

1) 벤치마킹하고 하는 페이지를 띄어놓고 페이지 우클릭 > 검사 (따라하고자 하는 웹 페이지 배치 및 CSS 적용사항을 확인할 수 있음)

2) VS Code로 소스코드 수정 및 저장. (바로 바로 웹페이지에 수정사항이 반영된것을 확인할 수 있음)

www.w3schools.com/css/tryit.asp?filename=trycss_template1_float

위 예제를 똑같이 따라해보는데 3개의 column들이 한 row안에 일정한 간격으로 나오지 못하고 한 column이 밑으로 빠져나오는걸 계속 해결하려다가 안됬는데 간단하게 아래 코드만 <style> 태그 안에 넣어주면 해결이 되는 문제였다. 

* {
          box-sizing: border-box;
        }

제가 설명을 드리자면, HTML CSS size는 텍스트(또는 contents) 사이즈를 기준으로 사이즈를 조절하는건 아시죠? 

모든 column의 width:33.33%이렇게 주면 3개의 column이 한 row에 들어갈 수 있을거라 생각하지만 저희가 빠뜨린게 있습니다.

바로 테두리 사이즈이죠.

이렇게 되면 테두리의 사이즈를 고려하지 못해서 한개의 column이 밑으로 빠지게 되는것이죠!

이걸 해결하기 위해 모든 태그에 (* 사용) 테두리 사이즈, 즉 border-box까지 포함한 사이즈를 기준으로 box-sizing을 한다는 뜻으로, 

아래와 같은 코드를 추가합니당.

* {
          box-sizing: border-box;
        }

이에 대한 설명은 생활코딩에서 잘 설명하고 있습니당!!

opentutorials.org/course/2418/13405