같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법 - 점수가 높은 선언이 우선 - 점수가 같으면 가장 마지막에 해석된 선언이 우선 인라인 선언 (style="coloe: orange";) - 1000점 css 속성 값 뒤(color: red !important;)!important(중요도) - 999999999점 ID선택자(#color_yellow) - 100점 class 선택자(.color_yellow) - 10점 태그 선택자(div) - 1점 전체 선택자(*) - 0점 body 같은 상속 되는 건 계산하지 않음 점수를 통해서 우선순위를 계산할 수 있어야함

box-sizing : 요소의 크기 계산 기준을 지정 content-box : 요소의 내용(content)으로 크기 계산 border-box : 요소의 내용 + padding + border로 크기 계산

border: 선-두께 선-종류 선-색상; -> 요소의 테두리 선을 지정하는 단축 속성 border : 요소의 크기가 커짐 선-두께 : border-width 선-종류 : border-style 선 색상 : border-color ex. border의 기본값 -> border: medium none black; border-width : 요소 테두리 선의 두께 -> 개별 속성 이면서 단축 속성 (padding,margin과 같음) 기본값 : medium(중간 두께) border-style : 요소 테두리 선의 종류 -> 개별 속성 이면서 단축 속성 (padding,margin과 같음) - 기본값 : none (선 없음) solid(실선) dashed(파선) border-color : 요소 테두리 선의 색..

CSS속성 표현 단위 px : 픽셀 % : 상대적 백분률 em : 요소의 글꼴 크기 rem : 루트 요소(html)의 글꼴 크기 vw : 뷰포트 가로 너비의 백분률 vh : 뷰포트 세로 너비의 백분률 margin : 요소의 외부 여백(공간)을 지정하는 단축 속성(0 : 외부 여백이 없음, auto : 브라우저가 여백을 계산), 음수를 사용할 수 있는 속성 -> 단축 속성 :1개의 값부터 최대 4개의 값까지 입력할 수 있다. - 4개 입력 : margin 1px(상) 2px(우) 3px(하) 4px(좌) - 3개 입력 : margin 1px(상) 2px(좌,우) 3px(하) - 2개 입력 : margin 1px(상,하) 2px(좌,우) - 1개 입력 : margin 1px(상,하,좌,우) margin 개별..

CSS속성 - 박스 모델 width : 박스의 가로 영역 범위 지정 (auto : 브라우저가 너비 계산) height : 박스의 세로 영역 범위 지정 (auto : 브라우저가 너비 계산) span : 콘텐츠 영역 설정 용도(인라인 요소(auto(기본값 상태)일 때 가로 넓이 줄이려고 함) div : 콘텐츠의 영역 설정 용도(블록 요소(auto(기본값 상태)일 때 세로 넓이를 늘리려고 함) max-width : 요소가 커질 수 있는 최대 가로/세로 너비 (none : 최대 너비 제한 없음) max-height :요소가 커질 수 있는 최대 가로/세로 너비 (none : 최대 너비 제한 없음) min-width : 요소가 작아질 수 있는 최소 가로/세로 너비 (0 : 최소 너비 제한 없음) min-height..

속성의 종류 박스 모델 : 가로, 세로 너비 글꼴, 문자 : 폰트(서체), 문자 크키 등 배경 : 배경 이미지 등 배치 : 원하는 요소를 원하는 위치에 배치 플렉스(정렬) : 수직에서 쌓이는 레이아웃이 아닌 수평 정렬 전환 : 요소의 전 생태와 후 상태를 자연스럽게 애니메이션 처리를 해주는 것 변환 : 요소를 회전하거나 이동시키거나 크기를 조정시키는 것(2D, 3D변환 등) 띄움 : 요소를 공중으로 띄우는 것(이미지 주변으로 문자가 나타내게 하는것 ex.신문기사 등) 애니메이션 : 복잡한 구조의 이미지 변환을 사용할 떄 자연스럽게 해주는 것 그리드 : 행과 열을 가지고 있는 2차원의 레이아웃을 제어하기 위함 다단 : 여러 단으로 나누고 구별해줄 때 사용 필터 : 이미지 흐림(blur)처리, 흑백(gray..

가상 요소 선택자(Pseudo-Elements) before : 선택자 x요소 내부 앞에 내용(content)을 삽입 .x::before{ content: "앞"; } after : 선택자 x 요소의 내부 뒤에 내용(content)을 삽입 .x::after { content: "뒤"; } 속성 선택자(Attribute) attr : 속성 x를 포함한 요소 선택 [x]{ color: red; } attr=value : 속성 x를 포함하고 값이 y인 요소 선택 [x="y"]{ color:red; }

네트워크 보안 방화벽 : 외부의 공격으로부터 방어하는 것을 목적으로 컴퓨터에 설치하는 소프트웨어나 인터넷에 설치하는 하드웨어의 총칭 방화벽의 종류에는 패킷 필터형 방화벽이나 애플리케이션 게이트웨이형 방화벽이 있다. 방화벽은 네트워크 간의 통신 가능 여부를 제어한다. 웹 애플리케이션 방화벽(Web Application Firewall) : 웹 애플리케이션의 통신 제어로 특화된 방화벽 프록시서버 : 해당 컴퓨터 대신 인터넷에 엑세스하는 서버(IP주소의 효과적인 활용을 위해서 사용한다.) 공격을 감지하고 시스템을 방어하는 세가지 장치 IDS(Intrusion Detection System) : 침입 감지 시스템 -> 공격 감지를 관리자에게 통보 IPS(Intrusion Prevention System) : 침..

DoS(Daniel of Service attack 서비스 방해 공격) : 웹 사이트에 집중 엑세스 공격을 하여 웹 사이트를 다운시키는 것 DDoS(Distributed DoS 분산형 DoS) : Dos는 일대일 공격이지만 DDoS는 일대다 공격이다. 분산된 여러 공격자가 하나의 웹 사이트를 다운시킨다. 대기형 공격 : 많은 사용자가 엑세스하는 사이트를 대상으로 취약점을 찾아 사이트를 변조해 바이러스를 감염시킨다. 표적형 공격 : 특정 조직이나 기업을 표적으로 한 공격 드라이브 바이 다운로드 : 브라우저 등을 경유하여 사용자의 PC에 몰래 그리고 강제적으로 멀웨어를 다운로드시켜 설치하는 공격방법 버퍼오버플로 : 소프트웨어에 대한 입력을 저장하는 영역(버퍼)을 넘치게 하는 것(오버플로)으로 시스템에 의도하..

동적 해석 : 멀웨어를 실제로 작동시켜 그 움직임을 따라감으로써 멀웨어가 어떤 나쁜 행위를 하는지 해석하는 방법 정적 해석 : 멀웨어를 실행시키지 않고 실제로 피해를 입은 컴퓨터에 남겨진 파일이나 메모리에 잔존하는 멀웨어 관련 정보등의 내용을 보고 해석하는 방법 포렌식 : 컴퓨터이 잔존하는 정보를 수집하여 해당 컴퓨터에서 무슨 일이 일어났는지를 나타내는 정보를 특정하고, 그 내용을 조사하는 작업 SIEM(Security and Event Management) : 각종 로그를 총동원하여 해석하고, 보안상 위협 되는 사건을 감지하는 장치

핀테크(FinTech) 금융과 기술의 합성어 금융업체가 아이티 기술을 도입해 사업이나 서비스를 출시하는 것 주체 : 금융업체 간편결제서비스, 온라인자산관리 서비스 등 테크핀(TechFin) 기술 중심의 기업에서 기술을 중심으로 금융 서비스를 하는 것 (인공지능을 사용한 금융서비스 등) 주체 : 기술중심기업 중국 알리바바 그룹의 마윈회장이 처음 제시 "테크핀은 ICT바탕 위에 금융시스템을 구축한 서비스" 카카오뱅크나 카카오페이 네이버페이 토스 등이 테크핀에 해당 네이버파이낸셜의 네이버페이 엔트파이낸셜과 협업하고 있는 카카오페이 sk텔레콤과 손잡은 대구은행, kdb산업은행 은행권도 디지털 전환을 시도하기 위해 노력하고 있다. 테크핀의 간편 송금 간편 결제가 활성화 되자 간편이체 등의 서비스를 만들고 있다.

가상 클래스 선택자 (Pseudo-Classes) Hover : 선택자 x 요소에 마우스 커서가 올라가 있는 동안 선택 .x { width: 100px; height: 10px; background-color: orange; transition 1s; (자연스러운 변경) } x:hover { width: 300px; } active : 선택자 x 요소에 마우스를 클릭하고 있는 동안 선택 x:active { } focus : 선택자 x요소가 포커스 되면 선택(포커스가 가능한 요소만 적용가능 ex. input select 등 , html에서 포커스 하고자 하는 요소에 tabindex="-1"을 넣어주면 포커스가 가능하다. ) x:focus{ } first-child : 선택자 x가 형제 요소 중 첫째라면 선..

CSS 선택자 종류 기본선택자, 복합선택자, 가상 클래스 선택자, 가상요소 선택자, 속성 선택자 기본 선택자 전체 선택자(*) 에스터리스트 : 모든요소를 선택 * { } 태그 선택자 : 태그이름이 x인 요소 선택 x { } 클래스 선택자 : HTML class속성의 값이 x인 요소 선택 .x{ } 아이디 선택자 : HTML id 속성의 값이 x인 요소 선택 #x{ } 복합선택자 일치 선택자 : 선택자 x와 y를 동시에 만족하는 요소 선택 x.y{ } 자식 선택자 : 선택자 x의 자식요소 y 선택 x > .y{ } 하위 선택자 : 선택자 x의 하위요소 y선택(띄어쓰기가 선택자의 기호) x .y{ } 인접 형제 선택자 : 선택자 x의 다음 형제요소 y 하나를 선택 .x + y{ } 일반 형제 선택자 : 선택..

시큐어 셸(Secure SHell, SSH)은 네트워크 상의 다른 컴퓨터에 로그인하거나 원격 시스템에서 명령을 실행하고 다른 시스템으로 파일을 복사할 수 있도록 해 주는 응용프로그램 또는 그 프로토콜을 가리킨다. 기존의 rsh, rlogin, 텔넷 등을 대체하기 위해 설계되었으며, 강력한 인증 방법 및 안전하지 못한 네트워크에서 안전하게 통신을 할 수 있는 기능을 제공한다. 원래는 telnet(텔넷)이라는 원격 접속 방식을 사용했는디 암호화를 지원하지 않아서 ssh를 사용하게 되었다. 기본적으로는 22번 포트를 사용한다. SSH는 암호화 기법을 사용하기 때문에, 통신이 노출된다고 하더라도 이해할 수 없는 암호화된 문자로 보인다. 대칭암호화, 비대칭암호화 해시함수의 임호화 방법이 있다. SSH의 주요 기능..

파일 전송 프로토콜(File Transfer Protocol)의 약자로 tcp/ip 네트워크 상에서 컴퓨터들이 파일을 교환하기 위해 1971년에 최초로 공개된 통신 규약이다. 네트워크에 연결된 컴퓨터끼리 데이터를 원활하게 교환하기 위한 목적으로 개발되었다. 파생형으로 FTP에 TLS 프로토콜이 적용된 FTPS가 있으며, 비슷한 기능을 제공하는 SSH 프로토콜 기반의 SFTP가 있다. SFTP는 FTP라는 키워드를 포함하고 있으며 용도 또한 같으나 FTP와 기술적인 연관성은 없는 완전히 다른 프로토콜임을 주의해야 한다. FTP는 비밀번호가 평문으로 전송되어 보안성이 매우 떨어지므로 FTPS를 사용하는걸 적극 권장한다. FTPS의 경우 PROT P를 사용하면 데이터 전송까지 암호화되어 높은 보안성을 지니며,..

보안의 3대 요소 기밀성(Confidentiality) : 허가받은 사람만 정보에 접근할 수 있는 것 무결성(Integrity) : 정보가 본래 상태에서 변조되지 않았고 신뢰할만한 상태 가용성(Availability) : 정보에 접근할 수 있는 사람은 언제든지 그 정보에 접근할 수 있는 것 암호 어떤 데이터를 외부인이 간단히 읽을수 없도록 하기위한 수단 암호화 : 평문을 외부인만 읽을 수 없게 하는 것 복호화 : 암호화된 데이터를 원래대로 돌리는 것 공통키 암호화 : 데이터의 암호화와 복호화에 똑같은 키를 사용한다. 공개키 암호화 : 데이터의 암호화와 복호화에 다른 키를 사용한다. 암호는 어떠한 암호든 시간이 지나면 반드시 풀린다. 단, 현재 사용하고 있는 암호들의 모든 조합을 시험하려면 방대한 시간과 ..

타입스크립트(TypeScript)는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. C#의 리드 아키텍트이자 델파이, 터보 파스칼의 창시자인 Anders Hejlsberg가 개발에 참여한다. 클라이언트 사이드와 서버 사이드를 위한 개발에 사용할 수 있다. 타입스크립트는 자바스크립트 엔진을 사용하면서 커다란 애플리케이션을 개발할 수 있게 설계된 언어이다. 자바스크립트의 슈퍼셋이기 때문에 자바스크립트로 작성된 프로그램이 타입스크립트 프로그램으로도 동작한다. 타입스크립트에서 자신이 원하는 타입을 정의하고 프로그래밍을 하면 자바스크립트로 컴파일되어 실행할 수 있다. 타입스크립트는 모든 운영 체제, 모든 브라우저, 모든 호스트에서 사용 가능한..

웹 애플리케이션의 구성요소 HTML CSS JavaScript HTML UI를 기본적으로 만들고, CSS는 비주얼적인 요소를 만들며, JS는 동적인 프로그램을 만든다. 문서, 정보만 주는 목적으로 만드려면 HTML, CSS만 있어도 되며 그냥 웹페이지 라고 할 수 있다. 웹 애플리케이션이 되기 위해선 정적으로 동작하기 위한 자바스크립트가 반드시 필요하다. 웹앱을 실행시키는 것이 브라우저이며, 브라우저는 런타임 환경을 제공하는 환경이다. Node.js 라는 앱이 나오면서 브라우저가 아니더라도 자바스크립트를 실행할 수 있게 되었다. 자바스크립트가 실행되면서 필요한 UI를 생성해내는 방식과 웹서버에서 HTML이 만들어져서 브라우저로 전송하는 방법이 있다. HTML을 주도적으로 만들어서 UI로 표현하는 것을 클..

반응형 웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다. 디바이스의 디스플레이의 종류에 반응하여 그에 맞도록 적절하게 UI 요소들이 유기적으로 배치되도록 설계된다. 반응형 웹 디자인을 하기 위해서는 일반 웹 디자인과 다른 특별한 기법들이 사용된다. 이는 웹 디자인에 대한 높은 이해도와 새로운 레이아웃 등의 개념을 필요로 한다. - 반응형 웹 디자인을 할 때 필수적인 기법들 미디어 쿼리 미디어 쿼리는 CSS2부터 시작되어 CSS3에서 본격적으로 쓰이기 시작한 웹 기법이다. 디바이스의 폭이나 높이 등의 정보를 가지고 스타일을 개별적으로 줄 ..

홈페이지에 오늘 방문자 수, 어제 방문자 수, 전체 방문자 수가 카운트되어 보여지도록 되어있는데 이 카운트 방식에 문제가 있었다. 홈페이지의 어느 곳에 들어가든 페이지가 바뀌게 되면 +1로 카운트가 되고 그 페이지에서 새로고침을 해도 +1 카운트가 된다. 그냥 페이지에 접속 하기만 해도 카운트가 되는 방식으로 소스가 짜여져 있는 것 이었다. 같은 사람이 여러번 접속해도 카운트가 안되게 하려면 접속하는 기기의 IP가 중복인지 확인을 하는 방법이 있고, 접속자가 쿠키를 가지고 있다면 쿠키가 저장된 시간과 현재의 시간을 비교하여 하루가 지났다면 방문자수를 카운트 해주고 쿠키 저장 시간을 바꿔주는 방법이 있다. 하지만 접속자가 쿠키허용을 하지 않았을 경우에는 어떻게 해야할지 모르겠다. 가장 좋은 방법은 IP를 ..