유니의 코딩공부

둘 이상의 선택자를 연결해서 특정한 요소를 선택하는 방법 id값이 containter인 요소와 이 요소를 부모로 하는 하위의 모든 p요소 자식 요소 : 자식에만 적용 시킴 컨테이너 밑에 있는 자식p에만 적용됨 형제 선택자 h1 ~ p h1다음 첫번째p 태그에만 적용시키고 싶은 경우 인접 형제 선택자 : h1 + p 속성 선택자 href가 있는 속성에만 스타일을 지정하고 싶은 경우 href="#"인 경우에 cursor를 마우스로 하고 싶은 경우 가상 클래스 링크에 많이 사용 됨 :link :visited :hover :active 순서를 지켜주어야 한다. 순서를 지키지 않으면 적용되지 않는 경우가 있음 link와 visited를 똑같이 묶어서 지정 hover 마우스를 올렸을때 마우스 오버하면 배경은 짙은색..

float 속성: 왼쪽, 오른쪽으로 떠 있게 할 수 있음 float 속성: 왼쪽, 오른쪽으로 떠 있게 할 수 있음 사이드 바를 이용해서 왼쪽, 오른쪽에 배치할 때 많이 사용 해지하고 싶은경우 clear box4는 float영향을 받지 않게 됨 position : 요소 위치 지정할때 사용 margin : 20px auto(좌우를 auto로 주면 화면의 중앙에 둘 수 있); static : 기본. 웹 소스가 나열된 순서대로 화면에 나열 relative : 소스 작성 순서대로 배치 & 위치 값 지정 가능 absolute : 부모, 상위 요소에서 postion:relative가 기준점이 됨. 소스 위치와 상관 없이 위치 값 지정 fixed : 위치값 고정

블록 레벨 요소 : 자체가 브라우저 화면에서 한 줄을 차지 인라인 레벨 요소 : 필요한 영역만 차지 box-sizing : box모델의 넓이 계산할때 보더박스까지 계산을 포함해서 넓이가 200px이라는 의미 첫번째 박스 크기 : 260 (200+양쪽20+양쪽10) 두번째 박스 : box-sizing 200으로 설정했기 때문에 padding과 border까지 포함해서 200인 것을 알 수 있음 각각 따로 지정할 때 가장먼저 border-style지정 필요. 없으면 테두리 그려지지 않음 한꺼번에 지정하는 border속성인 경우는 순서 상관 없음. border-width : 5px(top,bottom) 10px(right, left)

글꼴 지정할 때 모든 사람의 컴퓨터에 있는 글꼴로 지정필요 웹 폰트 사용. 상대방이 폰트를 다운로드해서 사용할 수 있게끔 폰트파일 업로드 필요 em : 대문자 M의 폭 크기가 1em 웹폰트 1) 사용자 시스템에 설치 되어 있지 않은 폰트를 내가 사용하려고 할 때, 폰트 정보를 서버에 올려놓고 사용자가 사이트에 접속했을때 다운받아 사용 2) 웹상에 있는 폰트정보를 링크로 사용 가능. 네트워크에 영향 받아 사이트 속도가 떨어질 수 있음 select this style하면 @import가 보임 첫번째 글꼴을 가져올 수 없을 경우에 , 두번째 글꼴을 사용하라고 지정해줌 text-align text-decoration : 텍스트 링크를 만들면 밑줄이 생기는데, 없앨 때 많이 사용 그림자 가로5px 세로5px 번지..

전체 선택자 : 웹 문서 전체에 적용 되는 선택자 브라우저에 기본 스타일이 적용되어 있는데 초기화 시키고 싶을 때 사용 *를 기호로 사용 타입(태그) 선택자 : 특정 태그에만 적용하고 싶은 스타일을 만들 때 사용 class 선택자 : 특정한 부분에만 다르게 적용하고 싶은 경우 사용. 문서 안에서 여러번 사용 가능 앞에 .를 붙임 위와 같은 예제에서 "레드향"이라는 글자 일부에만 적용하고 싶은경우 태그를 사용하여 묶어 줌 id 선택자 : 문서 안에서 1번만 사용 가능 고유성을 가지기 때문에 자바스크립트 같은 경우에도 한 부분만 집어 프로그래밍에 사용 가능 #를 붙여 사용 padding: 테두리와 그 안에 있는 여백 그룹 선택자 : 같은 스타일 규칙을 가진 선택자를 그룹으로 묶어 나열 가능 마지막 p타입이 ..

인라인 스타일 : 태그 안에 직접 style을 씀 스타일 시트 : 여러 개의 스타일을 모아 놓은 것 /head태그 앞에 사용. 스타일 정보를 body전에 알려줘야 파일을 불러와 준비 함 body태그 전에 적어 주어야 함 선택자: 스타일을 어디에 적용할지 설정해줌 외부 css폴더에 있는 ex.css파일을 연결한다는 의미. 그파일은 스타일 시트이다.

태그 : 이름과 속성이 있음 현재 문서가 HTML5 언어로 작성한 웹 문서라는 뜻 이름 : a, img 속성: href, src 열린 태그 닫힌 태그 태그가 시작을 했으면 끝에 종료 태그를 넣어줘야 한다. 열린 태그와 닫힌 태그는 쌍을 이 종료태그가 없는 경우는 넣지 않아도 된다 웹 브라우저 화면에 보이는 부분 개행. 태그를 짝 없이 단독으로 사용 문자 세트 등 문서 정보가 들어 있는 태그. 한글로 된 내용을 표시하기 위해서 UTF-8 문자세트를 사용 하이퍼링 href: 어디로 연결할지 target : 새로운 탭으로 열고 싶을때 입력 양식 작성하기 form 사용자 정보를 입력하게 만들 수 있는 형식 사용자가 입력하는 정보 는 브라우저에서 서버로 넘겨주는 역할만 담당 정보를 직접 처리하는것은 서버에 있는 ..

HTTP API 가장 중요한 것은 리소스 식별 API URI 설계 : 리소스 식별, URI 계층 구조 활용 클라이언트가 서버에 요청할 때 기대하는 행동 간혹 PATCH를 지원하지 않는 서버가 있는데, 이런 경우 POST를 사용하면 된다. POST는 무적이다~~~ HTTP 속성 안전/ 멱등/ 캐시 가능 캐시 : 로컬 PC 웹브라우저에 저장 - GET은 URL만 KEY로 잡고 캐시로 하면 되므로 심플 HTTP메서드 활용 최대한 리소스 개념으로 URI설계를 하고, 그 상황에서 안될 때 컨트롤 URI를 대체로 쓴다

HTTP (HyperText Transfer Protocol) 특징 1. 클라이언트 서버 구조 2. 무상태 프로토콜 (Stateless) - 상태 유지 : 꼭 필요한 경우에 최소한 으로 사용 ex) 로그인 - 무상태 : 로그인이 필요 없는 단순한 서비스 소개 화면 3. 비연결성 HTTP메시지

URI(Uniform Resource Identifier) 로케이터(locator), 이름(name) 또는 둘 다 추가로 분류될 수 있다"