6. 스스로 코딩하기 - JavaScript 강의 이후 (2) (+CSS)
지난 글에 이어 이번에도 JavaScript(이하 js) 강의를 듣고 난 후 만든 결과물과 추가로 공부한 내용에 대해 적으려 한다. 이번 게시글에는 js 뿐만 아니라 많이 쓰이는 CSS의 "flexbox" 문법도 소개할 것이다. 로그인 페이지, todo list 등 여러 페이지를 만들면서 CSS의 중요성을 실감할 수 있었는데 가독성 좋고 보기 좋은 웹페이지를 만들기 위해서 CSS문법 공부가 필요하다는 것을 제대로 느꼈던 것 같다.
이번에도 결과물부터 소개하겠다. 첫 화면은 기본 반응형 header 페이지의 모습이다. 아래는 CSS코드에서 "@media"코드를 추가해 특정 크기보다 웹페이지의 크기가 작아지면 바뀌는 화면이다. 대부분이 CSS코드로 작성되었고 두번째 사진의 토글 버튼(햄버거 모양)에만 js 코드가 포함되어있다.
→ media
"media"코드는 그 뒤 괄호에 들어있는 "max-width : 632px" 즉, 페이지의 가로 크기가 632px 아래로 작아지게되면 이후에 나오는 코드들이 실행된다는 뜻이다. 반응형 웹사이트를 만들 때 사용되는 코드이다.
→toggle
toggle코드는 처음 알게 된 코드였다. 앞 게시글에서 설명했던 addEventListener 을 사용하여 클릭했을 때 toggle이라는 함수를 실행할 수 있게 했는데, toggle은 하나의 값에서 다른 값으로 바꾸는 것을 의미하고, active가 되었을 때 숨겨둔 내용을 보이게 하고, 아닐 때는 display: none; 으로 설정하게 한다.
css display 요소 중 하나인 flex는 box를 배치하는 방법으로 전체 컨테이너, 아이템에 각각 속성을 적용할 수 있다.
flex-wrap(기본은 no, 한 줄이 차면 다음 줄로 넘어가게 하는 속성) / justify-content(중심축을 기준으로 아이템을 배치하는 속성, 사이에 space를 두는 속성 등이 있다. 여기서 중심축은 가로로 배치된 아이템들에서는 가로, 세로로 배치된 아이템에서는 세로가 된다.) / align-items(중심축에서 수직이 되는 반대축 기준으로 배치하는 것)
다음과 같은 대표적인 부속 속성들이 있다. 위의 첫번째 사진은 두번째 사진의 웹사이트를 만들 때 사용한 css코드 중 일부이다. flex코드를 사용했는데, justify-content, align-items를 모두 center로 설정하여 웹페이지의 아이템들이 좌우, 상하 가운데 정렬이 되어있는 것을 알 수 있다.
지금은 js문법에 대해 심화 강의를 들으면서 java 객체지향프로그램 강의를 듣고있다. 또 이후에 어떤 강의를 들을지 고민중에 있다. 6월은 지금 듣고 있는 강의를 마무리하고 7월에 새로운 강의를 시작하는 것이 목표이다!