전체 글48 [프론트 엔드 DAY03- 2] 5. 그룹 선택자 - 여러개의 요소를 나열하고 , 로 구분해 스타일을 적용 / 여러 선택자를 동시에 선택해 올 때 사용 EX) 선택지1, 선택지2{ css 문법 } - 코드 입력 - 그룹 선택자 여러개의 요소를 나열하고 ,(쉼표)로 구분해 스타일을 적용 선택자는 다양하게 사용이 가능 - 그룹 선택자 코드 설명- 태그 안 h2, 의 p 태그 안 텍스트 정렬 : 가운데 에다 하겠음. h2, 의 p태그 안 bigText 태그의 폰트에 사이즈 값을 주었음. h2 태그에 컬러 값 레드. p 태그에 컬러 값 블루 . 이렇게 여러개의 요소를 , (쉼표) 로 나누어 구분해 스타일을 적용한다. - 출력 결과- 6. 자손 선택자 - 부모 요소 하위의 모든 요소에 스타일을 적용 / 자손에는 자식, 손자, 후.. Class/Frontend 2022. 4. 25. [프론트 엔드 DAY03-1 ] 📌CSS 적용법 📌 1. 인라인 스타일 - html 요소 내부에 Style 속성을 적용하는 방법 EX) ... 해당 요소에만 스타일이 적용 - 입력 코드- text-align > 텍스트 위치 font-size > 텍스트 폰트 크기 인라인 스타일 html 요소 내부에 style 속성을 사용하여 적용하는 방법 - 출력 결과- 2. 내부 스타일 - HTML 문서의 - 입력 코드- 외부 스타일 css 를 적용하는 방법 인라인 스타일 내부 스타일 외부 스타일 - CSS 코드- - 출력 결과- 📌CSS 의 선택자 📌 1. 전체 선택자 - 스타일 모든 요소에 적용 디테일 한 스타일은 전체 선택자와 body에 적용된 스타일보다 우선시 됨 ex ) * 하고 입력되는 것들이 = 전체 선택자로 됨 *{ css 문법 } - .. Class/Frontend 2022. 4. 19. [프론트 엔드 DAY03] 1. 시멘틱 웹 태그를 쓰는 이유 - 세상에 방대하게 퍼져 있는 웹 문서를 보다 쉽고 정확하게 구분하고 조합하기 위한 시멘틱 웹 태그를 사용하게 됨. (1) 웹 접근성 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹 사이트를 이용할 수 있게 하는 방식을 가리키는 것 (2) 검색 엔진 검색엔진의 자체 알고리즘이 키워드를 구별하는데 이때 해당 알고리즘이 시멘틱 태그를 읽어 더욱 정확한 내용을 전달하여 검색 엔진 상위 문서에 노출될수 있도록 해줌 (3) 가독성 - 구성원들과 같이 작업하거나, 누구나 나의 파일을 열어봤을때 작업 영역을 알아보기 쉽게 하기 위해 - 예시 1- ... - 예시 2 - ....... ... ... > 예시로 봤을때 2번이 더 어떤 영역에서 작업을 하였는지 쉽게 알수 있다. 2.. Class/Frontend 2022. 4. 17. [프론트엔드 day02] 1. Input 문법 - 코드 입력- -1 -2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 출력 결과 - 2. Textarea 텍스트 입력 박스 창 - 코드입력 - te - 출력 결과 - 3. ul 순서가 없는 목록 태그 - ul 안에 리스트 항목을 넣어준다 - 코드 입력 - content1 content2 - 출력 결과 - 4. ol 순서가 있는 목록 태그 - 순서대로 리스트를 보여준다 - 코드 입력- content1 content2 - 출력 결과 - - ol type= "A" start="3" > 알바벳 3번째 자리부터 시작 - 코드 입력 - content1 content2 - 출력 결과 - 5 . Table - 표 유뷰브 - 공유하기 - 퍼가기 - 안에있는 iframe .. Class/Frontend 2022. 4. 16. [프론트엔드 day01-1 ] 1. 웹 에 " 안녕" 이라는 글자 출력하기 - 출력하고 싶은 내용을 body 안에다 적어주면 된다. - 코드입력- 안녕 - 출력 결과 - 2. div - 하나에 구역을 정할때 사용함. 줄바꿈이랑은 개념이 다름. ex) 네이버 창 - 이렇게 구역으로 나뉘어 질때 주로 사용함 - 코드 입력- 안녕 하세요 - 출력 결과- 3. 문단 태그 - 태그 문법- - 구역 설정 - 문장안에 서 독립적으로 설정할수 있음 - 강조태그 - 기울기 태그 - 기울기 - 칠하기 -문장위 선으로 긋기 - 밑줄긋기 - 올려쓰기 - 내려쓰기 - 공간 상관없이 개행 - 띄어쓰기 - 코드 입력 - 목숨이 눈에 없는 하였으며, 예가 이 얼마나 말이다. 없으면, 만천하의 놀이 되려니와, 아니다. 노년에게서 자신과 끓는 피부가 전인 끓는다. .. Class/Frontend 2022. 4. 16. [ 정보처리기사 영어단어 정리] ( CBT 를 풀고 또 풀다보면 ,,, 비슷한 영어단어에 영어 용어에 헷갈리는 것들이 많다. 어흐.. 😖 따라, 정보 처리 기사에 나오는 영어 단어의 의미와 개념을 정리해 보았다. ) ------------------------------------------------------ Reverse Shell - 클라이언트 타깃 서버 쉘 획득 Credential Stuffung - 사용자 계정 탈취 Scam - 기업 이메일 계정 도용 Stuxnet - 산업기반 시스템 침투 후 오작동 일으킴 TCP - 전송계층 양방향 UDP- 비연결형 서비스 프로토콜. 신뢰성이 떨어짐. 작지만 빠른 전송 가능 RTCP - 제어 프로토콜. 제어와 관련된 기능 수행. IP - 데이터 주소 지정, 경로 설정 ICMP - 8Byte.. Self Study 2022. 4. 15. [정보처리기사 필기 정리 4 ] ( 외우고 또 외운다. 영어단어만 집중적으로 외우고 있다. 제일 기본적인 것만 틀리지 말자 ) # CASE 의 주요기능 case 란 ? : 소프프웨어 공학 자동화 , 결과물 관리, 관리 자동화, 엔지니어 분석 설계, 코딩 작업 도움. - 오류 검증 - S.W 전 데이터 연결 - 모형지원 - 명세 그래픽 지원 - 모순검사 - 다이어그램 # 유형별 COCOMO Organic : 조직형 / 소규모 소프트웨어 일괄 자료 처리 /5만 라인 이하 Semi-detached : 반분리형 / 트랜잭션 처리 시스템이나 운영체제, DB / 30만 라인 이하 Embedded : 내장형 / 최대형 규모 트랜잭션 처리 시스템이나 운영체제 / 30만 라인 이상 # 테일러링 (Tailoring) 프로젝트 상황 특성에 맞게 정의된 소.. Self Study/정보처리기사 2022. 4. 14. [정보처리기사 필기 정리 3 ] # 결합도 순서 ( 낮을수록 좋다 ) ( 외우는 법 : 내공 / 외제 / 스자 ) = 자료 가 제일 낮음 내용 ( content ) > 공통 (common) > 외부 ( External) > 제어 ( Control) > 스탬프 ( StampCoupling) > 자료 ( Data coupling) # 응집도 순서 ( 높을수록 좋다 ) ( 외우는 법 : 우논시 / 절교 / 순기 ) 기능 ( Functional) > 순차( Sequential ) > 교환 (Communication) > 절차 ( Procedural) > 시간 ( Tremporal) > 논리 (Logical) > 우연 ( Coincidental ) # SQL 논리 연산자 - AND, OR, NOT #네트워크 공격 기술 1. DOS ( 서비스 거.. Self Study/정보처리기사 2022. 4. 14. [정보처리기사 필기 정리 2 ] 어느정도 기본 개념들은 다 정리 하였고 이제 바짝 외우기만 하면 될것 같다. 4,5 과목에서는 보기가 영어 단어로만 되어있는 문제가 많아 영어 단어 와 그 의미 개념에 대해 익숙해 져야될것 같다. 단원의 개념들을 계속 보다보니 어느 부분이 중요하고 출제율이 제일 많은지 보이기 시작한다. 다시 한번 외우고 상기 시킬겸 요약 정리를 적어본다. # OSI 모델의 계층 ( 외우는 방법: 앞글자 따기 : 물데네/ 전세 / 표애 ) 1. 물리 계층 - 기계적, 전기적, 절차, 물리적 전송 매체 와 신호방식 2, 데이터 링크 계층 - 흐름, 프레임 동기화, 오류 순서. 제어 3. 네트워크 계층 - 경로설정, 데이커 교환및 중계, 패킷 정보 전송 4. .. Self Study/정보처리기사 2022. 4. 13. [정보처리기사 필기 정리 ] [ 다시한번 외울겸 , 외어야 할것들 정리 해본다 ] # 요구사항 검토 동료 검토 - 2~3 명 동료 같이 검토 워크스루 - 사전검토, 오류 조기 검출 인스펙션 - 명세 작성자 x , 다른 전문가 확인 # 객체 지향 프로그램 메소드 - 객체 행위 상속성 - 객체 데이터 메세지 - 객체간 통신 클래스 - 객체 추상화 #데이터 흐름도 (DFD) process (프로세스) data flow( 흐름 ) Terminator ( 단말 ) data store ( 자료 저장소) # E-R 모델의 표현 방법 개체 타입 - 사각형 관계 타입 - 마름모 속성 타입 - 타원 연결 - 선 # GOF 디자인 패턴 생성 - Builder , Prototype 구조 - Bridge 행위 - Visitor 1. Builder : 작게.. Self Study/정보처리기사 2022. 4. 11. [프론트엔드 day01] html 파일의 확장자명 -파일명.html 페이지 실행키 -Alt + l + o div -하나의 구조를 나타내는 것 br -줄바꿈   -스페이스바 역할 자바 스크립트 할때 value 값을 가지고 올수 있다. required -넘어가기전 필수 입력 값 알려주는 것 div -빈 박스, 하나의 구역 p -한 줄 단위 , 위 아래 공간이 생긴다 span -단어 단위, 특정 구간을 분간 b , strong -강조, 굵은 폰트 h1 - 6 -제목태그, 폰트 크기, 굵기, 위 아래 공간이 숫자가 내려 갈수록 커진다 em,i -폰트 기울기 mark -형광색 으로 칠해짐 del -가운데 밑줄 ins -밑줄 sup, sub -위 첨자 , 아래 첨자 br -줄바꿈 , 개행 $lt , > -.. Class/Frontend 2022. 4. 10. [ CSS애니메이션 / Animation1-1 응용 ] 1. keyfram 값에 각각의 transform 을 넣어 이곳 저곳 움직이는 공을 만들어보자 2. 움직이면서 색이 변하는 공을 만들어 보자. HTML 삽입 미리보기할 수 없는 소스 - % 마다 transform 의 값이랑 background 의 색을 다르게 하였다. - border-radius을 통해 원형의 값을 만들어 주고 크기를 퍼센트로 정하였다. - 안에 들어갈 텍스트 값은 .box 가 아닌 .circle 로 바꿔 넣었다. = 부족한점 = 최대한 배운것 안에서 원형을 만들어야 해서 매끄럽지 않다 . 원형이 튕기는듯 하다가 마지막 애니메이션에 느리게 원래 자리로 돌아간다. Self Study/응용 2022. 4. 5. 이전 1 2 3 4 다음