본문 바로가기

분류 전체보기28

CSS box-model CSS box-model https://developer.microsoft.com/en-us/microsoft-edge/platform/usage/ 여기를 보면css테그의 사용 빈도가 박스 모델과 관련된 테그 사용빈도가 엄청 높다는 것을 알 수 있다. 어떤 컨텐츠가 있다. 그것을 박스라고 한다, 그 박스에 대한 것이 박스 모델인데 용어는 중요하지 않음 박스 모델중 중요한 것은border : 테두리 값, margin : 다른 박스 사이의 거리padding : 테두리와 컨텐츠(글자, 그림 등등) 사이의 거리width : 박스의 가로 크기hight : 박스의 세로크기구글에 css box model이라고 검색을 하면 많은 참고 이미지가 나온다. 하지만 인라인 요소에서는 블럭 요소와 달리width 와 hight .. 2017. 7. 25.
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.