2020-12-09 TIL
css
- CSS(Cascading Style Sheet)?
- HTML UI 컴포넌트(=태그)의 모양을 제어할 때 사용하는 기술
Css10_4부터
위치
- position: absolute
- 가장 가까운 조상 중에 absolute나 relative, fixed 타입 조상이 있으면 그 조상을 기준으로 자신의 위치를 조정한다.
- 테두리 안쪽을 기준으로 위치를 계산한다.
- 만약 조상 중에 absolute나 relative, fixed가 없다면, 문서 가장자리를 기준으로 자신의 위치를 조정한다.
-
absolute 태그는 width, height를 지정하지 않으면 콘텐츠의 크기에 맞춘다.
- 기준이 되는 태그가 움직이면 자신도 같이 움직인다.
- relative = 위치의 기준이 될 수 있다. 포지션을 조절하는 것은 안된다.
-
기준은 body를 기준으로 하는 것이 가장 좋다.
-
body 가 자신의 높이를 고려할 때 float는 고려하지 않는다.
- float는 자기가 원래 출력하려던 위치에서 오른쪽 왼쪽으로 움직일 뿐이다.
- float의 위아래 위치를 조절하려면 margin으로 실행한다.
-
position: fixed
=> 웹브라우저의 클라이언트 영역을 기준으로 위치를 지정한다.
=> 클라이언트 영역?
웹브라우저의 툴바 아래에 위치한 내용이 출력되는 화면이다.
=> 내용을 위,아래로 스크롤하더라도 fixed 타입의 태그를 움직이지 않는다.
=> 화면 스크롤과 상관없이 웹브라우저의 특정 영역에
내용을 띄우고 싶을 때 사용한다.
-
position: relative
=> absolute나 fixed와 달리 공중부양시키지 않는다.
=> 현재 자리를 유지한 상태에서 상,하,좌,우로 위치를 조정하고 싶을 때
사용한다.
=> absolute 타입의 자식 태그의 기준으로 만들고 싶을 때
부모 태그를 relative로 지정한다.
- 가운데 정렬
- 바디 안에 div=main을 둔다.
- Margin: 0px auto;
- 위아래, 좌우 위치
-
외부 CSS 라이브러리(bootstrap) 도입
사이트: http://www.getbootstrap.com
- CDN(Content Delivery Network) vs local
- CDN 방식?
라이브러리를 가리키는 방식.
=> HTML에서 다른 서버에 있는 CSS, JavaScript 등의 파일을 사용하는 방식.
=> 여러 사이트에서 공통으로 사용하는 코드를 한 서버에서 서비스 하는 방식
=> 웹브라우저의 캐시(cache) 기능을 응용한 것이다.
캐시?
특정 사이트에서 파일(HTML, CSS, JavaScript, Image 파일 등)을 다운로드 받으면
웹브라우저는 자신이 관리하는 별도의 폴더에 보관해 둔다.
같은 파일을 사용할 때 마다 다시 서버에서 다운로드 받지 않고
기존에 보관된 파일을 사용하기 때문에 네트워크 오버헤드도 줄이고, 속도도 빨라진다.
=> 장점:
중복해서 가져오지 않는다(네트워크 오버헤드가 줄어든다.)
사이트가 바뀌더라도 공통으로 사용하는 파일은 캐시에 보관되어 있기 때문에
다시 다운로드 하지 않아서 속도가 빠르다.
=> 단점: 외부 사이트가 라이브러리 관리
1) 캐시되지 않은 상태에서 그 파일이 존재하는 서버가 꺼져있다면,
실행할 수 없는 문제가 있다.
2) 보안을 중요시하는 사이트(정부, 은행 등)에서는 웹페이지와 관련된
코드를 외부에 둘 수 없다. 왜? 외부에서 해킹코드를 삽입할 수 있기 때문이다.
이런 경우 무조건 해당 서버에 다운로드 받은 후 실행하도록 한다.
- local 방식?
라이브러리를 다운로드 받아서 프로젝트에 포함한 뒤 사용한다.
=> HTML에서 사용할 CSS, JavaScript 등의 파일을 HTML이 있는 서버에 두는 방식.
=> 장점:
1) CDN과 달리 HTML이 참조하는 모든 파일이 같은 서버에 있기 때문에
다른 서버에서 사고가 발생하더라도 영향을 받지 않는다.
=> 단점
1) 여러 사이트에서 같은 CSS, JavaScript 파일을 사용하더라도
각 사이트마다 매번 다운로드 받아야 한다.
즉 사용자 입장에서 같은 파일을 매번 받아야 하기 때문에
네트워크 오버헤드가 발생하고, 속도가 느릴 수 있다.
- 다운로드 방식일 때는 webapp 폴더에서 실행한다.
Last login: Wed Dec 9 02:18:42 on ttys001
rsh@rsh ~
cd bitcamp-workspace
rsh@rsh ~/bitcamp-workspace master ±
cd bitcamp-web-project
rsh@rsh ~/bitcamp-workspace/bitcamp-web-project master ±
pwd
/Users/rsh/bitcamp-workspace/bitcamp-web-project
rsh@rsh ~/bitcamp-workspace/bitcamp-web-project master ±
cd src/main/webapp
rsh@rsh ~/bitcamp-workspace/bitcamp-web-project/src/main/webapp master ±
pwd
/Users/rsh/bitcamp-workspace/bitcamp-web-project/src/main/webapp
rsh@rsh ~/bitcamp-workspace/bitcamp-web-project/src/main/webapp master ±
ls
WEB-INF ex04 handlebars javascript npm test
bootstrap ex05 index.html jquery package.json upload
css facebook index2.html jsp photo.jpeg
el fileupload index3.html jstl temp
rsh@rsh ~/bitcamp-workspace/bitcamp-web-project/src/main/webapp master ±
npm -v
6.13.4
rsh@rsh ~/bitcamp-workspace/bitcamp-web-project/src/main/webapp master ±
brew upgrade node
Updating Homebrew...
==> Auto-updated Homebrew!
Updated 2 taps (homebrew/core and homebrew/services).
==> New Formulae
aerc docui json5 libtirpc tendermint xkeyboardconfig
aws-rotate-key duf kcgi lua@5.3 terraform@0.13 youtube-dlc
bpytop evernote2md kubecm magic_enum tm youtubedr
cairomm@1.14 f3d kubevela overdrive utf8cpp
cargo-edit giza libbsd php@7.4 v2ray
cfn-format gopls libcap regipy xcb-util
clash gping librttopo t-rec xinput
==> Updated Formulae
Updated 4581 formulae.
==> Renamed Formulae
now-cli -> vercel-cli
==> Deleted Formulae
curl-openssl fmsx rmtrash stlviewer unp64 xspin
Error: node not installed
✘ rsh@rsh ~/bitcamp-workspace/bitcamp-web-project/src/main/webapp master ±
npm -v
6.13.4
rsh@rsh ~/bitcamp-workspace/bitcamp-web-project/src/main/webapp master ±
npm install bootstrap@next
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN bootstrap@5.0.0-beta1 requires a peer of @popperjs/core@^2.5.4 but none is installed. You must install peer dependencies yourself.
npm WARN webapp@1.0.0 No description
npm WARN webapp@1.0.0 No repository field.
+ bootstrap@5.0.0-beta1
added 1 package from 2 contributors and audited 1 package in 5.069s
1 package is looking for funding
run `npm fund` for details
found 0 vulnerabilities
╭────────────────────────────────────────────────────────────────╮
│ │
│ New minor version of npm available! 6.13.4 → 6.14.9 │
│ Changelog: https://github.com/npm/cli/releases/tag/v6.14.9 │
│ Run npm install -g npm to update! │
│ │
╰────────────────────────────────────────────────────────────────╯
rsh@rsh ~/bitcamp-workspace/bitcamp-web-project/src/main/webapp master ±
ls
WEB-INF ex05 index2.html jstl photo.jpeg
bootstrap facebook index3.html node_modules temp
css fileupload javascript npm test
el handlebars jquery package-lock.json upload
ex04 index.html jsp package.json
rsh@rsh ~/bitcamp-workspace/bitcamp-web-project/src/main/webapp master ±
npm install sweetalert2
npm WARN bootstrap@5.0.0-beta1 requires a peer of @popperjs/core@^2.5.4 but none is installed. You must install peer dependencies yourself.
npm WARN webapp@1.0.0 No description
npm WARN webapp@1.0.0 No repository field.
+ sweetalert2@10.12.3
added 1 package from 7 contributors and audited 2 packages in 3.646s
2 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
rsh@rsh ~/bitcamp-workspace/bitcamp-web-project/src/main/webapp master ±
- web일때는 라이브러리를 절대로 교체하지 않는다.
부트스트랩
- css 를 다 만들어뒀다.