웹개발 기초
브라우저는 서버에서 준비되어있는 것을 받아서 그려주는(렌더링) 역할을 수행한다.
브라우저는 요청을 보내고, HTML파일을 응답받아서 렌더링
서버에서 만들어놓은 API요청을
브라우저에서 주소를통해 API로 서버로 요청을 보내면 서버에서 브라우저로 HTML을 돌려준다.
하지만 API요청을 보냈을때 HTML전체를 보내줄수도있지만, 데이터만 돌려주는경우도 많다.
데이터만 돌려주면 브라우저에 표시된 요소들 중 해당하는 데이터들을 교체해주기만 하면되니까!
VSCode 에서 Alt+B 누르면 open in browser!
HTML 팁
빈 HTMl파일에서 ! 를 입력하면 인텔리센스가 기본 뼈대를 만들어준다
개발자 도구 코드 검사기능 활용하기
CSS 기초
html은 페이지의 내용, 그 내용의 서식 등은 CSS로 관리할 수 있는데, CSS에 위와같이 작성하면, html에서 선택자를 가지고 쉽게 서식을 적용할 수 있다.
html 태그에 class 와 id를 추가해서 CSS를적용할 수 있느데,
여러개의 CSS를 적용시 class, 하나를 적용할 때는 id 르 ㄹ쓴다고 한다.
나는 CSS파일을 따로 관리하는 예제만 곁눈질로 봐왔었는데, HTML파일에서 CSS Style을 적용하는 방법을 배웠다.
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>서병렬 로그인 페이지</title>
<style>
/* css*/
.mytytle{
color: red;
font-size: 40;
}
#id{
color:aliceblue
}
</style>
</head>
위 코드와 같이 head 태그 내에 style 태그를 이용하여
. 으로 클래스,
#으로 id를 선언한다.
이를 body태그에서 사용하려면
<body>
<p class="mytytle">
boo
</p>
<h1>로그인 페이지</h1>
<p id="id" >ID: <input type="text" /></p>
</body>
위와 같이 태그 옆에 class면 class, id면 id를 지정해준다.
html태그는 부모자식관계를 잘 파악해야한다!
오 html도 상속이 되는구나
<aside> 💡 기본적으로 HTML 태그는 Block과 inline이 있습니다. Block 속성 태그는 1줄 모두 차지하며 위에서 아래로 쌓입니다. inline 속성은 글자처럼 가로로 배치됩니다
</aside>
Block은 스택형식으로 1줄 차지,
inline은 가로 배치
WPF의 WrapPanel같은 태그에서 Orientation 을 수평 수직으로 설정한거랑 비슷하고
flutter에서 Stack 사용하던거랑 비슷하다.
<style>
.container {
background-color: rgb(216, 216, 219);
margin: 10px;
padding: 7px;
height: 50vh;
/* flex */
display:flex
}
display:flex 속성은 기본적으로 정해져있는 상하 좌우 배치를 직접 설정할수 있게 되고,
justify-content 설정으로 내가 설정한 주축 방향을 기준으로 정렬할 수 잇다.
align-items 설정으로 주축방향과 수직으로 정렬
css 자주 사용하는 정렬 (가로 세로 가운데 배치)
/* 가로 가운데, 세로 가운데 배치 */
display:flex;
justify-content: center;
align-items:end;
홈페이지의 기본 구조
홈페이지의 구조는 주로 세 가지 주요 요소로 구성됩니다 :)
- 네비게이션 바 (Navbar): 네비게이션 바는 홈페이지 상단에 위치하며, 주로 메뉴 항목이 포함되어 있습니다. 이 항목들은 사용자가 웹사이트 내에서 이동하고자 하는 다른 페이지로 연결되어 있습니다!
- 본문 (Main): 본문은 홈페이지의 가장 큰 부분으로, 주요 컨텐츠가 포함되는 영역입니다. 이곳에는 웹사이트의 내용이 위치하며, 텍스트, 이미지, 동영상 등 다양한 형태의 정보가 포함되어 있죠!
- 푸터 (Footer): 푸터는 홈페이지의 하단에 위치하는 부분으로, 주로 추가 정보와 사이트에 대한 부가적인 링크를 포함합니다. 일반적으로 연락처 정보, 저작권 정보, 이용약관 링크, 개인정보 처리 방침 등이 포함하고 있습니다.
<aside> 💡 이 세 가지 요소는 홈페이지의 구조를 구성하는 중요한 부분이며, 사용자 경험을 향상하고 웹사이트 내에서의 탐색을 쉽게 만들어 줍니다.
Tip : nav.navbar tag.class 와 같이 쓰면 <nav class = “navbar”>자동완성된다.
<style>
.container{
display: flex;
flex-direction: column;
}
</style>
위 코드는 html 기본 정렬에 의해 수직으로 정렬되던 요소들을
display: flex 설정으로 수펴으로 변경했다가
flex-0direction: column으로 수직으로 다시변경한다
그럼 보기엔 그대로인데 왜 이런걿라까?
요소들을 정렬하기 위해서!
그냥 body 태그 내에 다른 태그들을 놓고 정렬하려고하면
margin 설정을 아주아주 복잡하게 활용해서 정렬해야할것이다( 내 생각). 이러면 모든 요소들을 오른쪽으로 20px 옮기고싶다고 했을때 귀찮아져 코드 유지보수 측면에서 이점이 있다.
.container{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
이렇게 해놓으면 의도한대로 상하좌우 정렬이 완벽히 되는데! 해당 태그 내에서만 그렇게 정렬된다.
무슨 말이냐면
정렬하고싶었던 친구들이 container 클래스가 설정된 태그 내에서 정중앙 정렬이 되고있는것, 당연하다!
그러면 화면 전체의 정 중앙에 놓이게하고싶다면,?
.container{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
height 설정을 100vh viewport height 설정을 바꿔주야한다. 물론 Navbar나 footer부분을 제외한 만큼 적용된다.
Viewport는 뭐냐하면
A viewport is a term for the visible area of a webpage on a
display device.
기기에서 웹페이지의 보이는 영역이라고한다.
css position: fixed;
설정하면 스크롤이나 뷰포트의 사이즈가 변해도 해당 위치에 고정시킬수가 있다.
강의 내용중 상속에 대한 생각
강의 막바지에 navbar 정렬중 상속에 대한 이해를 할 수 있는 부분이 있어 정리
<nav class="navbar">
<img class="logo"
src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/images/sparta-logo.svg"
alt=""
/>
<div class="weather">
<img
src="https://ssl.gstatic.com/onebox/weather/64/partly_cloudy.png"
id="weather-icon"
/>
<p>날씨 맑음, 20ºC</p>
</div>
</nav>
- navbar
- logo
- img
- weather
- img
- p
- logo
이러한 구조를 갖는 navbar nav 태그에서
캡쳐한 사진과 같이 보이기 위해 (스파르타 로고위치에 주의) 강의 중 먼저
weather 클래스의 속성을 다음과 같이 정의했다
.navbar {
display: flex;
justify-content: space-between;
}
.weather {
display: flex;
align-items: center;
margin-right: 30px;
}
근데 이렇게 하면 navbar의 자식인 weather에게만 align-items: center 가 적용되어 아까 사진에서 볼 수 있든 스파르타 로고가 좀 더 위에 놓여잇다.
그래서 강의중
navbar 전체에데가 align-items:center 속성을 추가했는데, 그럼 코드가 아래와 같이 변경된다.
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.weather {
display: flex;
align-items: center;
margin-right: 30px;
}
내생각에 저렇게 해놓으면 약간의 문제? 불편한 점이 생길 수 있다.
weather 입장에서 이미 부모태그에서 중앙정렬을 했는데 본인도 중앙정렬을 redundant하게 하고있다.
나중에 navbar만 수정하면 weather는 왜 아직도 중앙정렬되어있지? 하며 코드 수정에 시간이 소요될 우려가 있어
부모자식 관계를 잘 파악하여 자식태그에서는 중앙정렬 속성을 지우는게 좋을수도.. (근데 이게 현실적인지는 의문)
아무튼 상속 때문에 weather 태그의 css속성에서 정렬하지않아도 부모태그 navbar 속성을 물려받아 정렬이 적용됨에는 틀림없다. 그래서 난 아래 처럼 했음
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.weather {
display: flex;
margin-right: 30px;
}
아래는 정렬 결과
부트스트랩을 사용하는 과정에서 필요한 요소를 복사해와서 붙여넣으면 아래와 같은 코드가 입력된다.
<nav
class="navbar bg-dark border-bottom border-body d-flex justify-content-center"
data-bs-theme="dark"
>
class가 뭐가 이렇게 기냐면
navbar라는 클래스에 bg-dark / boarder-bottom / border-body / d-flex / justify-content-center 스타일을 적용하겠다는 뜻이다.
이전에 motto.html 작성하던 것과는 달리 좀더 편하고 파일들을 오고 갈 필요가 없어졌다
이전에 작성한 motto.html은
<!-- html 단 -->
<nav class="navbar">
/* css 단 */
.navbar {
display: flex;
justify-content: space-between;
/* align-items: center; */
}
이런식으로 작성했었는데 많이 편해졌다!
Modal 기능 부트스트랩에서 복사
모달 창이라는게 배경을 흐리게 하는 팝업창이라는 것을 처음 알았는데
<!-- Modal -->
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
결국엔 위 코드로 명암을 조절해서 아래와 같은 모달 팝업창이 뜬다는 건데
부트스트랩 내에 js 코드 내부 동작을 눈으로 확인할 수 없어서 아쉽긴 하다.
부트스트랩을 활용하는 방법을 많이 알게 되었다.
