html, css
웹퍼블리싱
- html5 : 내용
- CSS3 : 레이아웃 - 배치
- JSES6 : 동적
디지털 디자인 // 웹퍼블리싱 // 프론트(react 등) // 백엔드
CSS/JS 연결방식
- 외부: link rel script src
<link rel="stylesheet" href="css외부파일 경로"/>- 내부: style script
<script>
<style>
/*CSS 코드*/
</style>- 인라인: Tag 안에 적용
<태그 style="CSS 코드"></태그>css 선택자: https://cafe.naver.com/hamminglab/21500
기본 선택자
1. (*)
2. tag
3. id
4. class
5. attribute(tag속성)
6. 문자열 선택자는 잘 사용하지 않음
조합선택자
1. 그룹선택자
태그, id, class 등 기본 선택자를 한번에 사용 가능
p, #title, .red{
color:red;
}- 자식선택자
부모선택자 > 자식선택자{css코드}
부모요소의 바로 하위에 있는 자식요소에 스타일을 적용 - 하위선택자
선택자1 선택자2{css코드}
선택자의 범위를 특정 부모요소의 하위요소로 한정
가상요소 선택자
1. before after
기준선택자::가상 요소 선택자{css}
::before 콘텐츠 앞 공간 선택
::after 콘텐츠 뒤의 공간을 선택
가상클래스 선택자
1. 링크/동적 가상 클래스 선택자
<!DOCTYPE html>
<html lang="en">
<head>
<style>
a:link { /* 방문하지 않은 링크*/
color: blue;
text-decoration: none;
}
a:visited { color: purple; }/*방문한 링크*/
a:hover { /*마우스 올린 링크*/
color: yellow;
text-decoration: none;
}
a:active { color: red; }/*활성화한 링크*/
</style>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="https://www.naver.com/">네이버 : 이 링크는 클릭하는 동안 색이 빨갛게 됩니다.</a><br><br>
<a href="https://www.daum.net/"> 다 음 : 방문전과 방문후의 색을 비교해 보세요!</a><br><br>
<p> 1. 링크 글에 underline을 표시하지 않는 것이 <br> 현재 사용되고 있는 스타일 입니다.</p>
<p> 2. 마우스 클릭과 동시에 사이트에 연결되나요...??</p>
</body>
</html>- 구조적 가상 클래스 선택자
- nth-child(n) 표강조등 색을 줄때
https://cafe.naver.com/hamminglab/17801
CSS 기본 스타일 시트
스타일을 지정하면 기본 스타일 보다 우선한다.
CSS 우선순위, 개별성
java에서 연산자 우선순위가 괄호 -> */ -> +- -> 관계 -> 논리 라면,
CSS에서는 !important 로 최우선 속성을 설정한다.
https://cafe.naver.com/hamminglab/21503
우선순위는 다음과 같다. https://specificity.keegan.st/
1. 인라인 스타일
2. 아이디 선택자
3. 클래스 선택자
4. 태그 선택자
5. 전체 선택자
단위
- 절대단위 : px
- 상대단위 https://cafe.naver.com/hamminglab/21064
- % 해당 속성의 상위 요소 속성값에 상대적인 크기
- em 부모 요소 텍스트를 기준으로 상대적인 크기
- rem
- vw
- vh
- 색상표기
- alpha는 투명도(0.1처럼 0~1 사이 소수점으로 표현)
- rgba(red, green, blue, alpha)
CSS 퍼오기
- 개발자모드 > 웹페이지에서 stylesheet의 href를 가져온다(element 복사)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css">- 위 주소에서 href 내 min을 지우고 이동하면 공백이 없는 상태로 확인된다.
- http 형태가 아닌 경우 앞에 https: 를 붙여 확인
<link rel="stylesheet" type="text/css" href="//img.segye.com/static/2019_segye/resources/css/style.css?ver=20230930_1">과제
단위에 대해 아래 카페 글 확인
rgb, rgba,
px, %, em, rem
https://cafe.naver.com/hamminglab/21064
~182
java
객체지향
순차 -> 구조적(블럭) -> 객체지향(모듈화로 블럭 분리, 커넥터만 호환)
OOP 4가지
- 상속
- 다양
- 추상
- 은닉
복수개의 클래스 선언 소스파일
컴파일시 2개의 바이트 코드가 클래스 선언 수만큼 생긴다.
접근제한자
p.262
public 클래스, 필드, 생성자, 메소드 /제한 범위 없음
protected 필드, 생성자, 메소드 / 같은패키지, 자식객체만 사용
(default) 미입력 클래스, 필드, 생성자, 메소드 / 같은 패키지
private 필드, 생성자, 메소드 / 객체 내부
new 연산자
new 연산자 뒤에는 생성자 호출 코드가 오는데, 클래스() 형태를 가진다.
new 연산자는 객체를 생성시킨 후 객체의 주소를 리턴한다.
클래스명 변수명 = new 클래스명(); <-()안에는 입력값이 들어갈수 있다.
클래스의 두가지 용도
- main 있음: 실행클래스.
- main 없음: 라이브러리 클래스. 다른클래스가 이용
클래스의 구성멤버
필드: 객체의 데이터가 저장. 변수선언과 비슷하나 쓰임새는 다름
생성자: 객체 생성시 초기화 역할. 메소드와 선언형태가 비슷하지만 리턴타입이 없고 클래스 이름과 동일하다.
메소드: 객체 동작으로 호출시 실행 블록. 객체와 객체간 상호작용을 위해 호출
객체의 초기화
heap 영역에서 객체가 생성되면 객체내 필드는 기본값을 자동 초기화가 된다.
stack 영역에서 일반 변수의 경우 초기화를 해주지 않으면 값 사용시 에러가 난다.
생성자 선언과 호출
- 모든 클래스는 생성자가 존재하며, 하나이상을 가질수있다. 생성자 선언이 없으면 컴파일러는 기본생성자를 바이트 코드 파일에 자동으로 추가한다.
- 클래스에 개발자가 선언한 생성자가 있다면 컴파일러는 기본 생서자를 추가하지 않는다.
this 의 특징
객체 자신의 대한 참조값을 가진다. ( 자기 자신을 가리킨다.)
메소드 내에서만 사용된다.
객체 자신을 메소드에 전달하거나 리턴하기 위해 사용된다.
객체 생성자 내에서 사용할 경우, 다른 생성자를 호출한다.
static 메소드에서는 사용할 수 없다.
this.멤버변수 : 매개 변수와 객체 자신이 가지고 있는 변수의 이름이 같은 겨우 이를 구분하기 위해 this 를 붙인다.
this(매개변수) : 생성자 내에서 다른 생성자를 호출한다. this(매개변수) 형태로 생성자 내에서 재사용할수 있으나, 가독성이 떨어진다. p.228
오버로딩 오버라이딩
- 오버로딩
생성자와 메소드 오버로딩이 있다.
매개변수의 타입, 개수가 다르게 여러개의 생성자 선언
int a string b
string b int a
위 상황도 인정
생성자 오버로딩
생성자의 조건은 클래스명과 메서드명이 같아야 함. 기능별로 다르게 메서드를 구성하지만 생성자이이므로 메서드 이름은 모두 클래스명과 일치시켜야 할때 오버로딩 사용
- 오버라이딩 -> 재정의
기능을 상속은 받았으나 안의 내용은 고치는것
메소드 선언과 호출
- 선언
리턴타입 메소드명(매개변수,...){
실행할 코드를 작성하는 곳
}
- 메소드명 : 메소드명은 첫 문자를 소문자로 시작, 캐멀 스타일
기타
CS
-
운영체제가 추구하는 4가지
1). 처리 능력 향상
2). 신뢰도 향상
3). 응답시간 단축
4). 사용 가능도 향상 -
ROM, RAM
-
ROM(Read Only Memory)
P: 한번만 입력하면 끝. 메인보드에 사용하여 변경불가로 설정
EP: 자외선으로 삭제
EEP(플래시 메모리 = usb): 전기적 신호로 삭제. 전원이 꺼져도 저장되어있음 -> ROM
BIOS(Basic Input Output System) -
RAM(Random Access Memory)
DRAM: Dynamic(충전/방전을 오감)
SRAM: RS 정적 논리회로로 구성. 1비트 저장되어 static으로 고정
- 운영체제 속에 또 다른 운영체제
1) 하이퍼 바이저 방식 -> VMWare, VirtualBox(os 안에 새로운 os)
2) 컨테이너 방식 -> 버전 충돌 문제를 해결한 도커가 최근 각광 -> MSA
도커로 윈도우에서 리눅스를 실행가능.
click down으로 유투브 인강 다운로드
번호로 되어있는 영상이 다운 락이 걸려있는경우, 1~2이외 3, 10등의 숫자를 쿼리스트링에 입력하여 다운로드 하거나, 해당 채널로 진입하여 해당동영상의 숫자가 없는 링크를 이용
한글 ㄱ~ㅎ 특수문자
다른 os 사용불가 할수있어 특수문자는 위에것으로 제한할것
