도라에몽주머니

벌써 웹강의 마지막 시간이 되었다. 각자 원하는 주제를 정해서 반응형 웹페이지를 구현하는 과제를 마지막으로 WEB은 마무리되고 이제 자바 공부를 시작하게 된다. 갑자기 추석을 끼고 일본에 가게되어서 생각보다 촉박하게 페이지를 만들게 되었지만 그래도 최대한 반응형을 구현할 수 있도록 노력했다. (디자인은 거의 포기,,,ㅋㅋㅋㅋ쿠ㅜㅜ) 일본에서 쓸 포폴에 추가할 예정이라 페이지를 전부 일본어로 제작해봤다. 주제는 나의 일본(私の日本). 내가 좋아하는 일본의 지역, 음악, 음식을 카테고리로 나누어서 페이지를 만들었다. - 메인페이지는 일본의 분위기를 잘 보여주는 사진을 배경으로 사용하고 absolute를 이용해 볼드한 느낌의 텍스트를 페이지 중앙에 고정했다. 원래는 폰트를 훨씬 크게해서 페이지를 꽉차게 만들고..

✔ Preview overflow, max-width, scroll-behavior 속성 정리 ✍ Summary Overflow : 요소의 컨텐츠가 너무 커서 요소 내에 모두 보여주기 힘들 때의 처리 방법을 지정한다. visible, hidden, scroll, auto 등의 속성이 있다. 종류 설명 visible 넘치는 부분을 요소의 바깥으로 보여줌 (기본값) hidden 넘치는 부분을 잘라서 보여주지 않음 scroll 스크롤바가 추가되어서 스크롤이 가능 (가로, 세로 모두 추가됨) auto 자동으로 스크롤바가 추가될지 아닐지를 결정 header { text-align: center; position: relative; overflow: hidden; /* 넘치는 내용을 자름 */ } max-width..

2번째로 만들어본 뮤지컬 웹페이지. 첫번째는 강사님이 만들어주신 틀 안에서 내용만 추가된거여서 따로 올리지는 않았다. 이번에는 본문 영역에 sementic tag인 section과 article 태그를 사용해 영역을 구분해주었다. 아직은 header에 페이지를 링크해두지 않았지만 어떤 내용으로 추가 페이지를 구성할지 결정되면 추가로 채워나갈 예정이다. 각 article마다 hover로 애니메이션같은 효과를 넣어주었고, 아직까지 내가 본 뮤지컬이 3개밖에 없어서 남은 영역들은 내가 좋아하는 넘버와 공연했던 넘버로 채워보았다. audio 파일도 넣어둬서 원한다면 넘버를 들어볼 수도 있다. 가사는 iframe을 활용해 페이지 안에서 볼 수 있게 구현했는데 더 효율적인 방법이 있을지 찾아봐야겠다. 반응형웹을 구..

✔ Preview transition, position, background, box-sizing 복습 ✍ Summary Transition : 속성에 변화가 있을 때, 값의 변화가 특정 시간동안 이루어지도록 하는 속성이다. nav { position: relative; margin-left: 15%; width: 85%; height: 35px; background-color: #001020; transition: all 0.5s; } Position : 문서 내에서 요소의 위치를 지정하는 속성이다. static, relative, fixed, absolute, sticky 이렇게 5가지를 사용할 수 있다. 종류 설명 static 다른 태그와의 관계에 의해 자동으로 배치되며 위치 임의 설정 불가능 (기..

✔ Preview viewport, @keyframes, 미디어쿼리(반응형) 정리 ✍ Summary 반응형 웹 (Responsive Web) : 하나의 웹사이트로 PC, 태블릿, 스마트폰 등 다양한 디스플레이 기기에 맞추어 화면의 크기가 자동으로 변화하도록 만든 웹페이지이다. Viewport : 웹페이지가 사용자에게 보여지는 영역이다. PC를 기준으로 작성된 웹페이지를 모바일에서 열게 되면 웹사이트의 글자들이 매우 작게 보이게 되는 문제가 생기는데 viewport는 이를 조절할 수 있도록 한다. 모바일기기에서 렌더링되는 영역과 뷰포트의 크기, 줌 레벨 등을 조절할 수 있다. @Keyframes : 애니메이션의 중간중간의 특정 지점을 선택해 키프레임을 설정함으로써 세밀하게 애니메이션을 제어할 수 있도록 하..

✔ Preview 대괄호 속성 선택자, 다중 class, z-index, 반응형 미디어쿼리 ✍ Summary 대괄호 속성 선택자 : css 내에서 [ ](대괄호) 사이에 찾으려는 속성을 지정해 원하는 속성만 스타일을 지정할 수 있다. /* class명이 col-로 시작하면 스타일 적용 */ [class *="col-"] { box-sizing: border-box; float: left; padding: 0 10px; } 다중 class : HTML에서 여러개의 class 값을 부여할 수 있다. 부여하려고 하는 class명 사이에 공백(space)를 넣어주면 css에 작성된 순서대로 실행된다. 치악산 복숭아 당도최고. z-index : 요소의 수직 위치를 결정하는 속성으로서 요소가 겹치게 배치된 경우 주..

✔ Preview transform, transition, 이미지맵 태그 사용 방법 정리 ✍ Summary Transform : transform은 특정 요소의 회전, 크기 조절, 기울이기 등의 효과를 주는 속성이다. #transform1 { transform: lotate(90deg) /* 시계 방향으로 90도 회전 */ } #transform2 { transform: skewy(20deg) /* y축을 기준으로 20도 비틀기 */ } #transform3 { transform: scale(1.5, 1.5) /* 가로 1.5, 세로 1.5 확대 */ } Transition : 속성의 변화가 있을 때, 값의 변화가 특정 시간(duration)동안 이루어지도록 하는 속성이다. #box { width: 30..

✔ Preview input type, 애니메이션 작성 방법 정리 ✍ Summary Input : 태그는 사용자로부터 정보를 받아올 때 사용되는 태그로서, type이라는 속성을 통해 다양한 입력 방식으로 설정할 수 있다. * button, checkbox, color, date 등 다양한 type이 있으니 w3schools를 통해 확인하며 사용(https://www.w3schools.com/html/html_form_input_types.asp) Animation (애니메이션) : CSS를 통해 요소에 적용되는 스타일을 정의할 수 있다. 기존에는 자바스크립트를 통해 애니메이션을 정의했지만 CSS를 이용하면 좀 더 간단하고 효율적으로 애니메이션을 적용할 수 있다. keyframe을 이용한 애니메이션 정의 ..

✔ Preview 이미지, 오디오, 비디오 태그 및 웹폰트 사용 방법 정리 ✍ Summary Image : 태그는 문서에 이미지를 삽입하는 태그이다. src 속성을 통해 이미지의 경로를 지정한 후 width, height 등의 속성을 통해 크기를 조정할 수 있다. Audio : 태그는 문서에서 오디오(음성)을 재생할 수 있도록 하는 태그이다. src 속성을 통해 오디오의 경로를 지정한 후, controls 속성으로 제어기를 생성할 수 있다. Video : 태그는 문서에서 비디오(동영상)를 재생할 수 있도록 하는 태그이다. 태그와 비슷하게 src 속성을 통해 비디오의 경로를 지정한 후, controls 속성으로 제어기를 생성할 수 있다. 하지만 width와 height 속성을 통해 비디오의 사이즈를 꼭 지..

✔ Preview 줄간격, outline, position 속성 정리 ✍ Summary Line Height (줄 간격) : line-height 속성은 문단에서의 줄간격을 조정하는 속성이다. px, em, % 등으로 설정할 수 있고 기본값으로 설정하려면 normal을 사용하면 된다. p { line-height: 1.7em; /* 170% 줄간격 설정 */ padding: 0 18px; } Outline : border와 비슷한 유형의 속성이다. border는 테두리를 나타내고 outline은 border의 바깥 외곽선을 나타낸다. a, a:hover { outline: none; /* outline 없음 */ color: #a4aa04; text-decoration: underline; } Posit..