CSS

2020/07/15 - [개인 프로젝트/JIDO] - 카카오 지도 API를 이용해 지도 띄우기 카카오 지도 API를 이용해 지도 띄우기 프로젝트 목표 방문한 장소에 마커를 찍고, 작은 코멘트를 달아 나만의 방문 지도 꾸미기 친구 혹은 애인과 그룹을 만들어 우리의 지도를 채워보세요 타임 라인을 통해 다이어리처럼 이용도 가� coding-nyan.tistory.com 메인 페이지의 디자인이 이랬습니다. 지도가 핵심이지만 따로 노는 느낌이 들어서 디자인을 수정했습니다. CSS로 이미지의 검은색을 흰색으로 바꾸기 그냥 지도 API만 지워버리면 밋밋하잖아요?? 대신해서 그림을 넣어줄까 합니다. 가끔 블로그 포스팅할때나 학교에서 발표할 때 항상 사용하던 픽토그램을 가져옵니다. https://www.flaticon...

웹 개발을 하면서 디자인 적으로 수정할 일이 생깁니다. 정렬을 하거나 글자색을 바꾸거나 할 수 있죠. 이걸 자주 하게 되면 어느 순간 적용이 안된다고 느껴질 때가 있습니다. 문법적인 실수를 하지 않았나 다 체크해보지만 멀쩡해요. 되야만 할 때 안된다면 우리의 잘못이 아닐 수 있습니다. 문제 발생 이유 우리가 사용하는 브라우저는 캐시라는 기능을 지원합니다. 페이지에 다양한 리소스가 있다면 이를 따로 저장해둡니다. 갈 때 마다 로딩을 하면 느리다고 느끼고 우리는 불편함을 느끼죠. 더 빠른 웹을 위해 캐시를 사용하게 됩니다. 여기서 문제가 발생합니다. 나는 현재 css나 js를 수정했는데 브라우저는 예전에 받아둔 파일이 있다면서 새걸로 적용을 안해줍니다. 해결 방법 파일명 변경 가장 간단하게는 파일명 자체를 ..

HTML로 페이지의 구조를 다듬었다면 CSS로 꾸밀 수 있습니다. 꾸미기 위한 다양한 옵션들이 존재합니다. 폰트를 바꿀 수 있고, 글자 크기, 배경 색, 기울기 등 창의력만 있다면 여러 가지 구현 가능합니다. 1.CSS 문법 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 body { background-color: gray; } Hello cs CSS는 위의 예시처럼 작성이 가능합니다. 태그로 묶인 그 범위가 CSS입니다. 위의 예시에서 body는 적용할 범위를 나타내는 선택자입니다. 특정 태그 전체에 적용할 때는 특별한 기호 없이 사용 가능합니다. background-color은 속성이고 콜론 뒤에 따라오는 값은 속성 값이라고 칭합니다. 속성은 매우 다양하기에 여기에 전부 담기는 힘듭..

지난 시간에는 프론트엔드/백엔드의 차이점을 간단하게 살펴보았습니다. 이 두개가 모두 웹 개발 분야인데 그렇다면 웹이란 무엇일까요?? 웹이란? 웹에 대해서 자세히 알아보기 전에 간단한 OX퀴즈를 내보겠습니다. 인터넷은 웹이다? O/X 인터넷은 네트워크와 네트워크 사이를 연결해서 통신을 합니다. 이 인터넷에서 파일이나 메일, 문서 등을 주고받습니다. 이때 중요한게! 요청하는 쪽이 클라이언트고 제공하는 쪽이 서버입니다. 만약에 서버와 클라이언트가 서로 호환이 안된다면?? 문제가 생기겠죠 이를 위해서 약속을 정의합니다. 파일 = FTP , 문서 = WWW(http) 이런 방식으로요. 즉 웹(WWW)은 인터넷에서 문서를 주고받기 위한 규약이므로 정답은 X입니다. 역사적으로 발전해오면서 웹은 현재와 같은 형태를 갖..