HTML/CSS활용 계산기 목업만들기 과제 2번째 시간으로 제출 후 그중 본인이 발표하고싶은 내용들을 발표하고 서로 어떤식으로 했는지 지식공유를 하는 시간을 가졌다.
생각지도 못한 태그들을 사용해 디자인 하는 모습이 매우 인상깊었다. 앞으로 어떤식의 검색키워드를 입력해야 할지 안목이 넓어지는 시간이었다.
1.clip-path 속성
클리핑 범위를 지정해 범위 안의 부분은 보여지고, 바깥은 숨겨지는 기능이다. 포토샵과 일러스트의 클리핑마스크와 유사한 기능인 것 같다. 이를 이용해 구현하기 힘든 모형들을 제작할 수 있다.
하지만 polygon path 를 수동으로 찾는것은 매우 힘든 일이다.
그래서 이를 편하게 해주는 사이트가 있었다.
2. CSS 미디어 쿼리 (Media Query)
이 속성을 처음 보기도 했지만 사용해 js로만 구현 가능한줄로만 알았던 기능들을 구현 한 것을 보고 무척 놀랐다.
기본 문법으로는
@media (조건) {
스타일
}이런식으로 작성을 한다.
스타일 부분에는 일반적인 CSS 코드가 들어가는데, 조건 부분이 만족될 때는 스타일이 적용되고, 만족되지 않을 때는 스타일이 무시된다고 한다.
예를들어 어떤항목을 넓은화면에서는 보이고 좁은화면에서는 안보이게 하려면(실제 동기 수강생이 화면이 넓어지면 자판이 추가되는 계산기를 만들어서 매우 인상깊었다.)
<ul>
<li class="desktop">저는 넓은 화면에서만 보입니다.</li>
<li>저는 항상 보입니다.</li>
<li class="mobile">저는 좁은 화면에서만 보입니다.</li>
</ul>다음과 같이 css코드를 작성하면
@media (max-width: 600px) {
.desktop {
display: none;
}
}
@media (min-width: 1000px) {
.mobile {
display: none;
}
}뷰포트(viewport)의 폭이 600px 이하로 내려가면 desktop 클래스가 적용된 부분이 화면에서 사라지고, 뷰포트(viewport)의 폭이 1000px 이상으로 올라가면 mobile 클래스가 적용된 부분이 화면에서 사라지는 것을 볼 수 있다.
발표시간을 통해서 정말 생각지도 못했던 여러 태그들을 봐서 안목을 넓힐 수 있었던 매우 뜻깊은 시간이었다.
마지막으로 내가마무리 한 계산기다.
다른 동기분들 처럼 버튼을 누르면 눌러지는듯한 느낌의 애니매이션은 못 넣어봤는데 좀 더 공부와 안목이 필요할 것 같다.
다음주 부터는 JavaScript를 배우는데 많이들 어렵다는 말을 들어서인지 조금은 긴장 되지만 코드스테이츠의 엔지니어분들과 동기들이 있어서 걱정은 되지 않는다. 프론트엔드 개발자로서 한걸음 더 나아가는 하루다.
