잼굴 코딩공장

1. CSS란 무엇인가? -> Cascading Style Sheets의 약자 // HTML로 된거 꾸며주는거 2. CSS 우선적용 순위 쉽게 생각하면 태그내에서 가장 가까운걸로 적용됨 3. CSS는 2버전 이후로 모듈로 업데이트중 4. CSS의 기본구조 4.1 Selector 4.2 Property 4.3 Value 선택자(Selector): 스타일을 적용하고자 하는 HTML 요소를 선택 속성(Property): 스타일 속성 이름 값(Value): 속성에 대응되는 값 Declaration 선언 블록은 각각 적혀있는 선택자에게만 적용 됨 선언 블록 내부의 한줄한줄 = 선언 선언 끝날때마다 ; (세미콜론) 써야함 CSS 적용하기 CSS를 적용하는 방식에는 4가지가 있다. 순서대로 CSS 우선 적용순위가 위..

블록은 한 개의 독립된 덩어리로 화면의 가로 폭 전체를 차지하는 요소 인라인은 컨텐츠 자신의 크기 만큼 영역을 가지는 요소 안녕 안녕 인라인은 height같은거 조정안되는데 dispaly:inlie block; 주면 조정가능 Block 요소들 연락처 정보 단락 콘텐츠 부가 콘텐츠 긴("블록") 인용구 상세 정보 위젯 대화상자 설명 목록의 정의 설명 문서의 분할 설명 목록 설명 목록의 정의 필드 집합의 라벨 그림 설명 미디어 콘텐츠 그룹과 설명 (을 참고하세요) 페이지나 구역의 푸터 입력 폼 , , , , , 1~6단계 제목 페이지나 구역의 헤더 헤더 정보 그룹 수평선(구분선) 목록의 항목 문서에서 하나 뿐인 중심 콘텐츠 탐색 링크를 포함 정렬된 목록 p>문단 미리 서식 적용한 글 웹 페이지의 구역 표 정..

테이블(표형식)을 만들기 위해서는 을 사용한다. 의 자식요소 caption (제목) tr (행) col (열) th (셀의 제목) td (셀) 자식요소에 대해 알아보자 1. 테이블의 제목이나 설명을 의미함! 시각장애인들을 위해 사용할수있으면 사용해주자. 이달의 책 판매량 구분 이름 판매량 2. , , 각각 테이블의 머리글, 본문, 바닥글을 의미함. 꼭 써야하는건 아님. 테이블 내용이 많을때 구역을 보기쉽게 나누기위해 사용하자. tfoot에는 주로 결론, 합계 이런거 넣음 3. , , 은 테이블 행을 나눌때 사용한다. 는 태그로 나눈 행에서 셀을 분리할때 사용한다. 는 행,열의 머리말로 나타날때 씀. 굵게, 가운데정렬로 표현됨 이달의 책 판매량 구분 이름 판매량 1 해리포터 100 4. colspan을 하..

Form은 정보를 입력하는 양식. Form에 입력하고 제출하게 되면 데이터는 서버로 전송되고, 전송된 데이터는 웹서버가 처리하고, 처리 후 로그인 결과와 같은 다른 웹페이지를 클라이언트에 전송한다. Form 동작방식 웹 페이지에 있는 form에 데이터를 입력 웹 페이지 내 액션이 일어나게 되면 데이터는 웹 서버로 이동한다. 웹 서버는 데이터를 처리하기 위해 APP을 호출한다. 이때 APP은 물리적으로 별도의 서버일 수도 있다. 필요에 따라 APP은 DB로 데이터를 전송한다. 이때 DB는 물리적으로 별도의 서버일 수도 있다. DB에서 CRUD 작업이 일어나고 작업 결과를 APP으로, WEB으로 전송한다. 웹 서버는 받은 결과를 Client 브라우저에게 보낸다. 사용자 브라우저는 Response 받은 페이지..

Embedded contents의 요소들 src alt 반응형 이미지를 위한 srcset x서술자, w서술자 , sizes 속성 source media 속성 type 속성 HTML 페이지내에 이미지를 삽입할 때 사용하는 태그. 이미지만 넣을수 있음. src (source) : 태그에 이미지가 있는곳을 입력하기 위한 수단. 경로는 절대경로와 상대경로이어야 한다. alt (alternative text) : alt 속성은 이미지가 보이지 않을때 어떤 이미지인지 설명해주는것이다. 그리고 접근성을 위한 프로그램에 정보를 제공해주며, 브라우저에 이미지에 대한 정보를 전달함으로써 SEO에 도움을 준다. *SEO = Search Engine Optimize * 모든 이미지에 alt값을 넣을 필요는없음. 불필요한 내용..

Text-level semantics의 종류들 , , , , 1. 과 은 줄바꿈 태그이다. 은 원하는곳에서 줄바꿈을 할수있게 해주는것. 은 현재 요소의 줄바꿈 규칙을 무시하고 브라우저가 줄을 바꿀수 있는 위치를 정하는 것. 2. : 앵커. 하이퍼링크를 넣을수있게 하는 태그. 이형태로 사용함. 경로는 웹페이지 경로와 파일경로, 해시링크를 넣을수 있다. 웹페이지 경로는 웹페이지에서 이동하는것. 파일경로는 설정한 HTML로 이동하는것. 해시링크는 클릭을하면 해당 id를 가진 태그로 이동하는것. , 해시링크를 사용하기 위해서는 반드시 id값이 있어야한다. 3. , : CSS가 생기기전에 사용하던 굵은글꼴 태그이다. 이제는 사용하지 않는다. : 굵은글꼴에 대해서 강조하고 싶을 때 사용하는 태그. 막 사용하면 안됨..

1. URL 웹상에서 문서, 이미지, 동영상등의 위치를 나타내는 주소. ex) https://www.naver.com , https://www.tistory.com URL의 구조 1. 프로토콜의 종류 2. 자원이 있는 서버의 IP주소, 포트주소, 도메인주소 3. 자원의 위치 ex) https://comic.naver.com/webtoon/list?titleId=183559&weekday=mon https ➡ 프로토콜 comic.naver.com ➡ 도메인 주소 webtoon/list?titleId=183559&weekday=mon ➡ 자원위치 IP IP 주소는 컴퓨터 네트워크 상에서 각 장치들의 고유 번호. 번호들의 나열 ex) 1231:3120:0000:0000:0000:0000:1111:0000 포트..

1. 마진 패딩 margin : 바깥 여백 padding: 안쪽 여백 border: 테두리 border 설정법 border : 두께 선의종류 색상 -> border: 1px solid black; 2. 가운데 정렬 text-align display: block; margin-left: auto; => div,p,h1,li는 자체 block 내장이라서 display: block 안해도 됨 margin-right: auto; 3. 가로정렬하기 3-1 float 요소를 공중에 띄워 왼쪽/오른쪽 정렬함 보통 요소를 가로로 정렬하고싶을때 사용함 사용법: float: left; float: right; clear: both 결론: 깝치지말고 그냥 float 쓰자 4. 클래스 두개 이상 붙이기 -> 그냥 띄어쓰고 또..

내부 슬롯, 내부 메서드 = JS엔진에서 사용하는 의사 프로퍼티와 의사 메서드 (Doctor 아님ㅋㅋ) 내부슬롯과 내부 메서드는 직접적으로 접근하거나 호출할수 없음. [[Prototype ]] 내부슬롯의 경우 __proto__를 통해 간접적으로 접근가능. JS엔진은 프로퍼티를 생성할때 프로퍼티 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동정의함. 프로퍼티상태란 프로퍼티 값 값의 갱신 가능 여부 열거 가능 여부 재정의 가능 여부 Object.getOwnPropertyDescriptor 메서드를 사용해 간접적으로 확인가능 console.log(Object.getOwnPropertyDescriptor()); -> 프로퍼티 디스크립터 객체들을 반환한다. 프로퍼티의 종류 데이터 프로퍼티 접근자 프로퍼티 데..

var 키워드의 문제점 1. 변수 중복선언으로 의도치않은 부작용 2. var키워드로 선언한 변수는 함수의 코드블록만 지역스코프로 인정 3. 변수 호이스팅으로 의도치않게 undefined를 반환하는 경우 let키워드 ! 특징 1. 변수 중복 선언 금지 2. let 키워드로 선언한 변수는 모든 코드블록을 지역스코프로 인정하는 블록레벨스코프! 변수 호이스팅 console.log(foo); // ReferenceError let foo; -> 호이스팅이 안돼서 참조에러가 발생함. var는 선언단계와 초기화단계가 한번에 진행돼서 undefined로 초기화해주는데 let은 선언단계랑 초기화단계가 분리되어서 진행됨 ' 그 분리되는 구간을 일시적 사각지대 라고 부름 -> let 키워드는 변수호이스팅을 하지않는다?? N..