본문 바로가기

HTML4

글래스모피즘 디자인을 실현하기는 불가능한가. 왜 background blur는 viewport의 가장자리는 어두워지는걸까... 포트폴리오를 만드려고 개발 삽질을 하고 있다. 과연 이 삽질이 의미 있을지는 잘 모르겠지만... 글래스모피즘 같은 디자인을 사이트에 반영하기 위해 background blur로 글래스 모피즘스럽게 블러가 많이 들어간 시안이 웹에서 어느정도까지 구현이 가능할지 테스트 해보고 있다. 테스트 해볼 시안은 이렇다. 보면 블러를 준 가장 위에 있는 오브젝트는 투명하다. 하지만 이걸 웹에다가 적용을 해보니 블러를 먹인 오브젝트는 화면 가장자리가 어두워진다. 이렇게되면 어두침침한 오브젝트 때문에 깔끔한 글래스모피즘 디자인이 나오지 않는다. 브라우저 문제인가 해서 사파리를 테스트 해봤는데 동일하다... ... 시안을 수정해야겠다. ㅜㅠ .. 2021. 1. 19.
inline / block level inline / block level css를 처음으로 시작하면서 가장 먼저 들었던 이야기는 인라인과 블럭 요소의 구분이었다. 블럭 방식은 부모의 가로 넓이를 모두 채움 인라인 방식은 딱 자기 크기만큼 채움 인라인을 블럭 레벨로 블럭을 인라인으로 마음껏 바꿀 수 있다. 대표적인 블럭 레벨의 html테그로는 hn이 있다. 처음 html 을 접했을 때 제목 부분에 사용하는h1 테그가 줄 바꿈을 자동으로 해 주는 것을 볼 수 있었을 것이다. 이처럼 블럭 레벨은 혼자서 가로를 다 차지한다는 특성이 있다. 그래서 제목 다음에 바로 내용(p)이 나오지 않고 다음 줄에 나오도록 할 수 있는 것h1 스타일에 border값을 1px적용을 하면 가로를 차지한다는 것이 무엇인지 알 수 있다. 인라인 방식은 줄바꿈을 야기하지.. 2017. 7. 25.
웹폰트 사용하기 웹 폰트웹 폰트를 사용하는게 생각이 안나서 다시 찾아보면서 정리한 글 입니다. 사람은 망각의 동물이라더니 ㅇㅅㅇhttps://opentutorials.org/course/2418/13372를 참고해서 쓴 글입니다. 웹폰트를 사용하는 이유는 사용자의 컴퓨터 마다 깔려있는 폰트가 다르기 때문인데이를 해결하기 위한 3가지 경우의 수가 있다. 구글이나 네이버 같은 사이트에서 제공하는 웹 폰트를 사용하는 경우, 그리고 그런게 싫다!!! 나는 내 컴퓨터에 있는 폰트를 쓸꺼야!! 하는 경우 그리고 이미 만들어진 웹폰트를 url형식으로 가져다 쓰는 경우 일단 구글 폰트를 사용하는 방법을 알아보자구글 폰트를 웹 폰트로 사용하는 방법1. https://fonts.google.com/?authuser=1여기에 들어가서 내가.. 2017. 7. 25.
CSS Diner 정답공유와 정리 CSS Diner 아니 쓴거 임시 저장 해놨는데 다 날아갔으뮤 ㅜㅠㅠ 처음에는 CSS Diner 답 정리 처음부터 하고 있었는데 앞에 내용 날아가서 넘기고 (어차피 앞 내용은 쉬우니까)내가 12번 부터 제대로 복습을 안한 내용이 나와서 여기부터 정리하면서 넘어가야겠다. http://flukeout.github.io/css diner이거 게임 형식으로 쉽게 css 선택자를 공부 할 수 있게 하는건데 책 보고 지루하게 하는 것 보다 잼있다.이고잉님이 추천해주셨음 (이고잉 짱bb)나는 코드아카데미가 영어이고 재미가 없어서... 코도아카데미보다 다른 학습 방법을 선호한다.자기한테 맞는 배우는 방법이 있으니 그냥 개인 성향에 맞게 공부를 하는 것이 정답인듯! 12plate + apple 이게 뭔지 몰라서 html.. 2017. 7. 24.