1. CORS란 교차 출처 리소스 공유(Cross-origin Resource Sharing, CORS)는 추가 HTTP헤더를 사용하여, 한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 여기서 origin(출처)란 Scheme(protocol), Host(domain), Port로 구성된다. 예를 들어 https://www.google.com/maps 라는 주소가 있다면 protocol : https:// host : www.google.com port : :443 이다. 위와 같이 출처는 서버의 위치를 찾아가기 위해 가장 기본적인 구성요소라고 보면 된다. 여기서 같은 출처와 다른 출처의 구분 같은 출처라 하면 두 URL의..

pseudo-class → 특정 요소가 다른 상태일 때 스타일 줄 수 있게 도와줌 : pseudo-class ::pseudo-element → 내부의 일부분만 스타일 줄 때 ::after → 내부 맨 뒤에 뭔가 추가할 때 ::before → 내부 맨 앞에 뭔가 추가할 때 pseudo-element로 clear:both 박스 만들기 → 요소 뒤에 clear:both 속성을 가진 박스가 필요하다면 div를 만들 필요 없이 그 요소 뒤에 content 빈 공간으로 아래 같이 코드와 같이 입력하면 된다. .box:after { content: ''; display: block; clear: both; float: none; } -webkit- → 사파리, Edge, 크롬에서만 적용되는 스타일 -moz- → Fi..

부트스트랩 .row 안에 col를 사용하면 균일하게 나누기 가능 가로로 나누고 싶으면 → col-차지할 크기 안녕하세요 -> 이 줄을 3의 크기로 4개로 나눈다. 안녕하세요 안녕하세요 안녕하세요 안녕하세요 md 사이즈 이상에서만 적용 안녕하세요 md 사이즈 → 부트스트랩 그리드(Grid) 검색 부트스트랩 사이즈 xl → 1200px lg → 992px md → 768px sm → 576px 부트스트랩 order-first 순서 재배치 가능 order-1 → order-2 → order-3 안녕하세요 안녕하세요 안녕하세요 CSS 덮어쓰기 잘 하는 법 같은 클래스 명이나 스타일을 하단에 작성 같은 클래스명 혹은 스타일이라도 하단에 정의된 것이 우선적으로 적용 .custom { color: green; } /..

font-family: inherit 되는 속성 폰트 적용하는 법 @font-face { font-family: '작명~~'; src : url(../font/NanumSquareR.ttf) } 한글폰트 사이즈는 너무 커서 1~2개만 사용을 권장함 용량을 주리려면 .woff → ttf의 3분의1까지 줄여줌 Anti-aliasing 폰트 부드럽게 처리하는법 → 맥 OS의 경우 자동으로 처리를 해주므로 안해도 무관 아래와 같이 아주 조그만한 각도를 회전시키면 된다. p, h4, h3, h2, h1, span { transform: rotate(0.03deg) } 레이아웃 - Flexbox display: flex → 부모 속성에 주기 flex 특징 width 600px를 준다고 해도 600px가 되지 않는다..

14강 + 숙제 nth-child(n) 셀렉터 : n번째 등장하는 요소만 스타일링 할 때 사용 td 하나로 합치기 colspan = “5” → 5개의 셀을 합쳐주세요. cursor: pointer → 버튼을 눌렀을 때 커서가 변경됨 pseudo-style :hover → 마우스 올릴 때 스타일 변경 :active → 클릭 중 스타일 변경 :focus → 커서 찍혀있을 때 스타일 변경 pseudo-style (a 태크) :link → 방문 전 링크 스타일링 :visited → 방문 후 링크 스타일링 순서가 중요함 :hover → :focus → :active 순서로 함 pseudo-class 특징 거의 모든 스타일을 넣기 가능 Object Oriented CSS 코드양 줄어드는 class 작명법 → 뼈대용..

7강 float 관련 문제 float 준 요소 다음에 clear:both 넣은 추가하는 걸 추천 Navbar 만들기 기능은 와 똑같음 보다 읽기가 쉬움 Selector 문법 공백 : ~안에 있다 라는 뜻 .navbar li { } : ~안에 모든 자식 : .navbar>li { } a 태그 문법 a href =”#” → #은 아직 링크를 지정하지 않았을 때 사용 링크 디자인 a 태그는 밑줄이 생기는데 아래 코드로 밑줄 제거 text-decoration: none; a 태그 방문, 클릭 시 링크 색상 변경 .클래스(링크):visited { color : black; } (참고) 태그에 class 2개 이상 부여하려면 클래스 뒤에 (띄어쓰기)클래스명으로 부여 가능 8강 Background 이미지 넣기 .ma..