B대면 노래방 | 211111

#vscode html 자동완성

html 파일 만들고 ! 친 후 enter 

 

 

#html과 css 파일 연결
link:css 친 후 href에 css 파일명 입력

 

#css
flex-wrap: wrap; #다음 줄로 넘어감
flex-wrap: nowrap; #다음 줄로 넘어가지 않음

 

#html input type="range"

<div>
	<label for="volume">Input</label>
	<input type="range" id="input" name="input" min="0" max="10">
</div>

 

 

---

 

header에서 (intro화면으로 넘어가는) back 버튼과 타이틀을 정렬하는데 꽤나 시간이 소요됐다.
back 버튼을 div로 묶고, 타이틀은 h1 태그를 이용하였다. (추후 타이틀은 이미지로 교체 예정)
div와 h1의 width를 33%로 설정하여 세 부분으로 나누었다.
버튼을 왼쪽 정렬하기 위해 margin-left를 0px로 설정.
타이틀을 중앙 정렬하기 위해 flex를 입힌 후 justify-content: center; 처리를 해주었다.

header > div {
    width: 33%;
}

header > h1 {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    width: 33%;
}

#go_intro_btn {
    margin: 20px 200px 10px 0px;
    width: 130px;
    height: 40px;
}