jfmam 개발 블로그

개요 css를 적용할 때 우선순위로 적용되는 경우에 대해 알아보자 css우선순위는 0,0,0,0을 기억하면 된다. 인라인 스타일로 작성 되었는가? id 선택자를 기반으로 스타일시트가 작성 되었나? 클래스, 가상클래스, 속성선택자 기반으로 스타일시트가 작성되었나? 요소를 기반으로 스타일시트가 작성 되었나? 💡 왼쪽의 수가 높을수록 우선순위가 높다. 1,0,0,0 은 0,1000000000,0,0 보다도 우선순위가 높다. 올림픽 메달과 개념이 비슷하다. 💡 숫자는 갯수를 의미하며 여러개가 있으면 해당 갯수만큼 숫자를 붙여준다 인라인 스타일로 작성된 경우 1, 0, 0 ,0 이 된다 id선택자로 스타일시트를 작성한 경우 #idSelector { } 두번 째 수를 갯수만큼 올려준다 class선택자로 스타일시트를..

개요 우리가 작성한 의도를 html로 정확하고 다채롭게 전달 할 수 있어야한다. 그러면 의미론은 무엇인가? 문제점 div, span의 경우 의미가 없는 태그이다. HTML 문서에 의미를 부여하는 태그들에 대한 이해가 필요하다. 목표 html5에 새로등장한 태그들을 익혀보자, 시맨틱태그들에 대해서 이해하고 활용하자 header footer 문서의 처음과 끝 부분을 담당하는 태그 header: 도입부 헤딩 - 글로벌 네비게이션 바 footer: 저자 저작권 연락처 section article section: 제목이 있는 주제별 콘텐츠 그룹 - 제목이 있고 컨텐츠가 있는 경우 사용 article: 독립적으로 배포 가능한 완결형 콘텐츠: 뉴스기사, 블로그, 사용자의 댓글 - 문서의 제목과 본문 sns의 게시물 ..

개요 회사 렌딩페이지를 만들면서 모바일, 태블릿 등 다양한 기기 환경에서도 볼 수 있는 UI를 제공하기 위해서 반응형을 고려하였다. 해당 글은 프로젝트를 진행하면서 학습했던 것을 정리 하는 용도로 작성되었으며 참고용으로 봐주었으면 한다 목차 뷰포트 설정하기 break point (중단점) 설정하기 비율 설정을 통해 화면 크기에 맞추기 뷰포트 설정하기 디바이스 화면크기에 맞추며 초기배율은 1배수(100%)를 따른다. 또한 핀치줌을 지원하여 확대 축소가 가능하게 지원한다. 핀치줌이란? 모션을 통해 확대 축소를 하는 행위를 말한다. 모니터로는 컨트롤+ 스크롤 모바일로는 검지와 엄지를 대각선으로 벌리고 줄임으로써 확대축소를 할 수 있다. 예시 break point(중단점) 설정하기 중단점을 설정함으로써 다양한 ..

개요 seo 도대체 무엇인가 seo 왜 써야하는가? seo 어떻게 쓸 수 있는가? seo 도대체 무엇인가? 검색엔진최적화를 의미하며 설정을 통해 검색 시 상단에 노출을 시키는 방법이다. seo 지수 100점!! seo 도대체 왜 써야하는가? 현재 제공하려는 서비스의 형태는 플랫폼이다. 플랫폼의 경우 사용자를 많이 유입 시키는 것이 중요하다. 네이버나 구글 같은 서비스에 광고수수료를 지불하는 경우 일정 비용을 지출해야 한다. seo 설정을 잘하면 위의 스크린샷처럼 수수료를 지불하지 않고도 상단에 띄울 수 있다. (네이버도 마찬가지이다.) 결론 사용자에게 컨텐츠를 노출시킴으로 우리의 서비스로 유입 시킬 수 있게한다. 코드만 짤줄알면 무료로 사용이가능한데 최적화 시키지 않을 이유가없다. seo 어떻게 쓸 수 ..