23일차 2024 - 3 - 28

배운 내용들 다시 복기

 

http://localhost:8080/htmlcssjs 에서 htmlcssjs가 왜 자동으로 붙는지?

초기에 src/main/resources → spring/dispatcher 폴더의 view_resorver에 아래와 같이 세팅되었기 때문이다.

<context:component-scan base-package="com.mycompany.htmlcssjs">
  <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Service"/>
  <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Repository"/>
</context:component-scan>

context의 base-package에 htmlcssjs로 지정해주었기 때문.

 

밑의 코드는 Controller의 한 부분이다.

@RequestMapping("/exam10_float_layout")  // 이것은 도메인 주소를 나타냄
public String exam10FloatLayout() {
	log.info("exam10_float_layout() 실행");  // 도메인 요청이 들어오면 이 메소드가 실행된다.
	return "css/exam10_float_layout";  // (/WEB-INF/views/)생략 css/exam10_float_layout --> 파일 경로를 나타낸 것이기 때문에 정확하게 기입해야 한다 (JSP파일명과)
	}

@RequestMapping은 도메인 주소를 나타낸다고 보면 된다.

http://localhost:8080/htmlcssj 이후에 "/exam10_float_layout"를 입력받게 되면 exam10FloatLayout 메소드가 실행이 된다. log.info("메시지")는 이 메소드가 실행이 될 때 콘솔창에 메시지를 출력하게 되고, return "css/exam10_float_layout" 이 부분은 (/WEB-INF/views/) css폴더 아래 exam10_float_layout파일을 해당 브라우저의 화면에 보여주게 되는 것이다.

(return 부분은 파일 경로를 나타낸 것. 정확하게 기입해야한다. 파일은 JSP파일)

 

● /WEB-INF/views/ 부분은 왜 생략해도 되는건지?

<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
  <property name="prefix" value="/WEB-INF/views/"/>
  <property name="suffix" value=".jsp"/>
</bean>

 

prefix는 접두사를 표현하며 이는 초기 설정으로 /WEB-INF/views/ 이것이 앞에 붙는다는 것이다.

suffix는 접미사로 .jsp를 붙인다는 의미이다.

 

 

저번 시간 float 학습에 이어서 수업 시작.

■ 레이아웃

오늘은 화면의 전체적 구성을 공부한다.

 

<header>, <section>, <article> 태그 등 <div>와 같은 역할을 한다. 그런데 태그 이름이 왜 다를까?

→ 해당 태그의 의미를 담은 내용을 넣어주면 해당 HTML을 분석하기 쉽고 여러모로 좋기 때문.

<nav>를 붙이는 이유?

→ 네비게이션을 뜻하고 주로 메뉴를 감싸는 용도로 쓴다.

<article>은 <nav>에 따른 내용이기 때문에 <nav> 밑이나 중앙에 편성되거나 한다.

익숙하지 않고 일단 어떻게 쓸지 모르겠다면 <div>를 사용하자.

 

★ 프로젝트 시 W3School 문서 Block & Inline 정보를 보며 태그의 이름을 확인해보자.

 

화면을 구성하는 작업에 있어서 해당 태그의 영역을 확인해보려면 border를 이용해보자.

nav {
	border: 1px solid yellow;  // 경계선을 나타내준다.
	float: left;
	width: 29%;
}
			
article {
	border: 1px solid black; // 경계선을 나타내준다.
	float: left;
	width: 69%;
}

 

● box sizing

너비 + 패딩 + 테두리 = 요소의 실제 너비
높이 + 패딩 + 테두리 = 요소의 실제 높이

 

요소의 너비/높이를 설정할 때 요소가 설정한 것보다 더 크게 나타나는 경우가 많다.

(요소의 테두리와 패딩이 요소의 지정된 너비/높이에 추가되기 때문)

 

box-sizing 속성을 사용하면 요소의 전체 너비와 높이에 패딩과 테두리를 포함할 수 있다.ex) box-sizing: border-box;

 

● flex

#wrapper{
	display: flex;
	flex-direction: row;
	height: 300px;
	align-items: flex-end;
	justify-content: center;
}

id가 wrapper인 <div>태그에 css를 적용한 예이다.

 

row일 때와 column일 때의 align-items는 수직 정렬이냐 수평 정렬이냐 달라진다.
row일 때와 column일 때의 justify-content는 수직 정렬이냐 수평 정렬이냐 달라진다.

 

* flex-grow → 비율을 나타낸다.
ex) 다음 세개의 태그들은 wrapper 되어있다.

#div1 {
	width: 100px;
	height: 100px;
	flex-grow: 1;
}

#div2 {
	width: 100px;
	height: 100px;
	flex-grow: 3;
}

#div3 {
	width: 100px;
	height: 100px;
	flex-grow: 1;
}

→ (전체 너비나 높이에서 = row로 표현되느냐, column으로 표현되느냐에 따라 달라짐) div1은 1/5, div2는 3/5, div3은 1/5를 차지하게 된다.

 

# float을 사용할 때와 flex를 사용할 때는 어떤 기준으로 사용해야 할까?

→ 앞으로 직접 사용하며 확인해보자!

 

# flex의 추가기능?
flex-grow, flex-shrink, flex-basis

→ 이 기능들이 합쳐져 flex: 값; 으로 사용하는 식으로 바뀌었다. 앞으로 비율 배치는 flex만으로 사용하자.

 

 

★ Bootstrap

세계에서 가장 유명한 CSS 프레임워크!

 

W3School에서의 부트스트랩 튜토리얼은 보기가 편하고 간단히 사용해볼 수 있다.
부트스트랩 사이트에서는 초심자가 보기는 불편하지만 내용이 풍부하다.

https://www.w3schools.com/bootstrap5/bootstrap_get_started.php

 

사용 예시)

<div class="container-fluid p-5 bg-primary text-white text-center">
.container-fluid{ ... }
.p-5 { ... }
.bg-primary { ... }
.text-white { ... }
.text-center { ... }

이런식으로 클래스 이름으로 미리 정의해둔 css를 적용할 수 있다!!
빠르게 HTML문서 구조를 가져온 다음 클래스 이름으로 수정하여 변형 가능하다는 것이다.

 

# 부트스트랩 사용 방법

● CDN으로 사용하기

<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

→ 미리 만들어 놓은 css를 참조한다는 코드 (이 코드를 넣어야 부트스트랩 css를 사용할 수 있다)

 

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

→ 미리 만들어 놓은 script를 참조한다는 코드 (이 코드를 넣어야 부트스트랩 반응형 script를 사용할 수 있다)

 

● 다운로드하여 사용하기

→ src 부분에 다운받은 css파일과 js파일의 경로를 넣어주면 된다.

 

# cdn을 가져와서 사용하는 것이 좋을까, 다운로드 받아 사용하는 것이 좋을까?

상황에 따라 다르다.

만약, cdn으로 외부에서 참조하여 가져오는 경우 그 외부 파일이 깨지거나 끌어오지 못하게 되는 상황이 된다면 불안정해진다.
따라서 다운로드 받아 사용하는 것이 안정적이다.

반대의 경우,
나의 파일의 크기가 커지는 경우라면 (엄청 큰 가정하에) 속도가 느려질 수 밖에 없다.
나의 웹 서버가 무거워진다는 뜻이다. 그럴 땐 외부에서 참조받아 사용하는 것이 유리할 수 있다.
이 경우엔 HTML만 넘겨주면 되기 때문이다.

ex) 한국 ↔ 미국
HTML (파일 크기 1) + CSS, JS (파일 크기 10)  →  넘겨줌

기본적으로 통신거리가 멀기 때문에 통신 지연이 있기 때문에, 
전세계적으로 운용하는 웹 서버인 경우에는 CDN이 더 빠르다. (더 적합하다)

 

● row, column

한 행을 row라고 표현한다. 한 행에는 열(column)이 들어갈 수 있는데, 한 열의 크기가 '1'이라면 총 12개의 열을 배치할 수 있다. (부트스트랩은 한 행 전체 열의 가로 비율을 12비율로 나눈다.)

row는 하나의 행을 의미하고 한 row에 column은 12등분이 되어 구성된다.
ex) div class="col-sm-6 col-md-4"

→ 스몰범위에 있다면 6등분을 차지하고, 미디움범위내에 있다면 4등분을 차지한다라는 뜻

 

★ 그리드 표기 방식

→ 규격은 정해져있고 이 규격을 얼마나 잘 활용하느냐에 따라 사이트의 완성도가 올라간다!

 

● .container 를 적용했을 때
도큐먼트 규격대로 컨테이너의 규격이 알맞게 구성된다.
container-fluid → 전체(브라우저 창의 최대) 사이즈로 늘려준다.

 

● typography

.text-start  // 왼쪽에서부터
.text-end  // 오른쪽에서부터
.text-center  // 가운데

 

● 기본 브라우저의 h1~h6 태그의 크기와 부트스트랩의 h1~h6의 크기는 다르다.
부트스트랩을 적용하게 되면 기본 여백도 사라져 있다.

 

★ Spacing

https://www.w3schools.com/bootstrap5/bootstrap_utilities.php

 

The classes are used in the format: {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl and xxl.

Where property is one of:

m - sets margin
p - sets padding

Where sides is one of:

t - sets margin-top or padding-top
b - sets margin-bottom or padding-bottom
s - sets margin-left or padding-left
e - sets margin-right or padding-right
x - sets both padding-left and padding-right or margin-left and margin-right
y - sets both padding-top and padding-bottom or margin-top and margin-bottom
blank - sets a margin or padding on all 4 sides of the element

Where size is one of:

0 - sets margin or padding to 0
1 - sets margin or padding to .25rem
2 - sets margin or padding to .5rem
3 - sets margin or padding to 1rem
4 - sets margin or padding to 1.5rem
5 - sets margin or padding to 3rem
auto - sets margin to auto