test08_1.html - web/src/main/resources/static/css
http://localhost:8080/css/test08_1.html
border-style
border-width
빛이 left top에서 비춘다고 가정
테두리 바깥 경계까지가 배경색 들어감
http://localhost:8080/css/test08_2.html
display: inline은 자기만의 너비, 높이를 가지지 못한다
visibility: hidden;
안 보이게 할 뿐이지 자리는 계속 차지함
구성요소(컴포넌트)
객체 여러 개를 묶어서 하나의 컴포넌트
object
Object
• 램
• 나사
• 저항
• 트랜지스터
이 객체들을 모아서 모듈램(Component)
한 개 이상의 객체로 구성된다
Object : 기본 부품
Component : 중간 부품
단순기능 -----> 복합 기능 ------> 반제품
Object -----> Component -----> 베어본
CPU는 Object
모듈램
프레임워크 빈 자리에 Object를 채운다. 또는 중간부품을
Spring Web MVC
프레임워크 : Spring Boot
Object : BoardController, BoardDao, Board
중간부품 : JDBC Driver, MyBatis
베어본 : 한 개 이상의 컴포넌트와 오브젝트로 구성된다. + 개발자가 추가적으로 얘네들을 붙임
UI 컴포넌트 : 한 개 이상의 UI 태그
위아래 margin은 서로 겹친다
공중부양 시키면 margin이 겹치지 않는다
float : 좌우 움직이는 건 가능. 위아래는 이동 못 함
body의 높이는 body가 품고 있는 UI 컴포넌트의 높이의 합
그런데 자식들 중 한 놈이 공중부양
자식 중에서 공중부양한 애들은 너비 높이 계산에서 제외시킨다
HTML
문서 안에 다른 문서의 연결 정보를 두는 거
부가 명령
Hyper-Text Transfer Protocol
box-sizing: border-box; 이용하기
http://localhost:8080/css/test10_4.html
한 칸에 하나의 제품이 아니라 한 칸에 여러 제품을 출력하고 싶음
div의 너비를 지정
inline block으로 하면 한 줄에 여러 개 나옴
브라우저 크기를 줄이면 자동으로 밑으로 내려감
display: block; float: left;로 처리해도 된다
test10_5.html - web/src/main/resources/static/css
http://localhost:8080/css/test10_5.html
position: absolute
absolute 하는 순간 현재 위치에서 공중부양
조상 중에 absolute나 relative, fixed 중에서
자기랑 가장 가까운 조상
http://localhost:8080/css/test10_6.html
test10_7.html - web/src/main/resources/static/css
adDiv.style.display = "none";
adDiv.style["display"] = "none";
둘 중에 아무거나 쓰기
라이브러리 사용하기
test10_8.html - web/src/main/resources/static/css
position: relative;
position: absolute;
test10_9.html - web/src/main/resources/static/css
본문을 화면에서 가운데 정렬시키기
margin: 0px auto;
testx.html - web/src/main/resources/static/css
html과 css를 분리시킨다
textx.css
testx.js
script 태그는 끝태그를 반드시 적어야 한다
<script type="text/javascript" src="textx.js"></script>외부 CSS/JavaScript 라이브러리 적용하는 방법
① CDN 방식
CDN (Content Delivery Network)
외부 서버에서 가져오기
css library 2022 검색
3d javascript 검색
chart javascript 검색
https://getbootstrap.com/docs/5.1/getting-started/introduction/
https://getbootstrap.com/docs/5.1/getting-started/introduction/#starter-template
https://getbootstrap.com/docs/5.1/layout/containers/
class="container"
https://getbootstrap.com/docs/5.1/components/list-group/
https://getbootstrap.com/docs/5.1/components/buttons/
웹 브라우저는 다운로드 받은 파일을 서버별로 일정 크기만큼 보관해둔다.
=> 같은 서버의 라이브러리를 사용한다면 다시 다운로드 받지 않는다.
이것이 CDN 방식의 장점이다!
실행속도가 빠름
단점
라이브러리 서버가 다운되면 라이브러리 그 서버의 파일에 의존하는 모든 사이트가 화면을 출력할 때 깨질 것이다
