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 어떻게 쓸 수 ..

서버의 부하 대량의 패킷이 서버로 요청 될 경우에 서버가 모두 처리하지 못할 수 있는 상황이 발생한다. 이를 해결하기 위한 부하 분산 방법에 대해 알아보자. DNS를 이용한 부하분산 DNS서버에 같은 이름으로 여러대의 웹 서버를 등록하는 방법 라운드로빈을 이용하여 차례대로 다른서버에 요청을 보낸다. DNS의 경우 서버의 상태를 체크할 수 없어 서버가 요청을 받을 수 없는 상태에도 해당 서버에 요청을 보내는 단점이 있다. 클라이언트 측에서 여러페이지에 걸쳐 대화를 하는경우 중간에 끊길 수도있다. 예를들어 로그인을 한 상태인경우 로그인상태가 다른서버에 접근하더라도 유지가 되어야한다. 복수페이지의 대화를 진행하는 방법 전후의 관계를 나타내는 데이터를 추가 쿠키를 HTTP헤더에 추가 로드밸런서(부하분산장치) D..

방화벽 패킷을 검사하여 조건에 부합하는 패킷만 통과시킨다. 차단하는 패킷의 경우 이를 분석하여 나중에 부정침입을 방지한다. 패킷필터링형 패킷의 수신측 IP주소와 웹서버의 IP주소에 일치하는 패킷을 통과시킨다. TCP 또는 UDP 헤더의 포트를 이용하여 수신측과 송신측의 포트번호가 일치하는 경우 통과 시킨다 웹 서버에서 브라우저로 접근하려는 경우 동작을 중지시킨다. 접근하려고 할 경우 컨트롤비트의 ACK = 0으로 변경하여 응답에 실패했다는 표시를 추가한다. 막을 수 없는 공격 패킷의 데이터에 문제가 있는경우 방화벽으로 막을 수없음 해결방법 버그를 고쳐서 다운되지 않도록한다. 계속해서 버전 업데이트 패킷의 내용을 조사하여 방화벽과는 또 다른 장치나 소프트웨어를 준비한다.

접속(connect) 커넥션: 소켓끼리의 연결을 의미 소켓 한개분량의 메모리 영역 확보 ->제어정보를 기록한다 Application의 connect 호출: 접속단계 수신측의 IP주소와 포트번호를 통해 연결이 가능한지 확인 데이터를 임시적으로 저장하는 버퍼메모리 생성 프로토콜 스택에 서버 IP와 포트번호를 받아 TCP담당 부분에 전달 제어정보를 이용하여 TCP 헤더생성 컨트롤 비트 SYN을 1로설정(초기 접속 시) IP담당 부분에 전달 수신측 소켓과 연결(상세한 부분 생략) 응답 시 ACK비트 설정 -> 연결 되었음을 확인 작성(write) 송신 접속(connect)이후의 동작으로 송신하려는 데이터를 프로토콜 스택에 전달 프로토콜스택에 버퍼메모리에 데이터를 임시저장 네트워크 이용효율을 위해 패킷을 적당한크..

프로토콜 스택간 동작 원리 nestat 제어정보 (헤더) 제어정보는 서버측에서 확인할 수 없다. 송신처, 수신처 포트번호 SEQ,ACK 데이터 오프셋 컨트롤 비트: 통신제어를 위한비트 ACK: 수신데이터의 일려번호 필드가 유효함을 나타냄 -> 데이터를 올바르게 도착했음을 의미한다. SYN: 송신측과 수신측의 일렬번호를 확인, 최초연결 시 사용 FIN: 연결끊기 URG: 긴급포인터의 유효 RST: 접속 강제종료 윈도우: 수신처에서 받을 수 있는 데이터의 양을 송신측에 알려주기 위한 제어정보 긴급 포인터: 긴급하게 처리해야 할 데이터를 나타냄 체크섬: 오류 유무 사용 TCP 데이터를 송수신하기 위한 프로토콜 패킷을 제대로 받지 못했을 경우 다시 송신 수신확인 응답이 꼭 필요하다. UDP 데이터를 송수신하기 ..