[TIL 06] self-introduction ①

위코드 사전학습을 진행하면서 HTML, CSS를 학습하고 학습한 내용을 바탕으로 자기소개 페이지를 만들어보자❗

What I learned

float 초기화 설정

clear : both;

float을 해제하지 않으면 정상적인 것 같아도 float된 박스를 감싸는 박스에 배경이나 테두리속성이 실행되지 않으므로 float 설정 후엔 반드시 clear both로 float 설정을 초기화해주자.

css 변수설정

색상코드를 바꿀때마다 모든 style 파일에 색상코드 부분을 찾아서 하나하나 바꿔줘야하는게 너무 번거로워서 css에서도 변수 설정을 할 수 있나 찾아보았다.
https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties

html {
    --white: #fff;
    --pink: #f5c3ca;
    --black:  #313131;
}

변수 선언은 위와 같이 작성하고 변수를 사용할때는 var(--white) 이런 형식으로 작성할 수 있다.
색상코드 뿐 아니라 style 파일에서 공통적으로 많이 사용하는 width, height 값 등을 변수로 선언하면 css 작성의 번거로움을 덜 수 있을 것 같다.

오디오 자동 재생

audio 태그와 javascript onload 함수를 사용하여 bgm을 자동재생하려고 했는데 다음과 같은 오류 메세지가 떴다.

play() failed because the user didn't interact with the document first

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
해당 링크로 들어가보니 정책변경으로 음악 자동재생이 금지되었다는 내용이였다. button onclick으로 버튼을 클릭할 시에 음악이 재생되게 할 수 있지만 페이지에 버튼을 넣고 싶지는 않아서 bgm을 포기하기로 했다.

need to check

local 환경에서 imgur 사용

많은 이미지들을 다 workspace에 파일 형태로 갖고있기 번거로워서 사용하던 이미지 호스팅 사이트인 imgur에 업로드 후 링크형식으로 사용하려고했는데 계속 이미지에 오류가 있었다.
구글링해보니 imgur 정책상 localhost 에 대한 액세스를 제한한다고 한다.
(https://stackoverflow.com/questions/43895390/imgur-images-returning-403)

github page로 웹호스팅 후에도 오류가 뜨는지에 대한 확인이 필요할 것 같다.