진리는어디에/Web (9) 썸네일형 리스트형 [CSS] position 프로퍼티 엘리먼트의 위치를 지정하는 프로퍼티는 top, bottom, left, right가 있다. 하지만 이 프로퍼티들은 아래에서 언급 할 position 프로퍼티가 지정되기 전까지는 동작하지 않으며 position 프로퍼티에 어떤 값이 지정되는지에 따라 다른 동작을 한다. position 프로퍼티는 엘리먼트가 위치하는 방법을 정의한다. position 프로퍼티는 아래의 다섯가지 값중 하나를 가질 수 있다. static relative fixed absolute sticky position: static; position 프로퍼티의 기본 값이며 static 포지션은 top, bottom, left, right 프로퍼티에 영향을 받지 않는다. position: static; 으로 설정된 엘리먼트는 페이지의 흐름에.. [CSS] ::before, ::after CSS에서 ::before와 ::after는 선택한 엘리먼트의 앞 또는 뒤에 content에 지정된 문자열을 추가합니다. 보통 엘리먼트를 장식 할 때 사용 됩니다. Example : https://kukuta.tistory.com https://kukuta.tistory.com Result : https://kukuta.tistory.com-> [CSS] 프로퍼티 컬러(Color) 색상 표현 - 정의된 색상 이름 또는 RGB, HEX, HSL, RGBA, HSLA 값으로 표현 가능 Hello World Hello World Hello World Hello World Hello World 배경색 프로퍼티 "background-color" Hello World 텍스트 컬러 프로퍼티 "color" Hello World 테두리 프로퍼티 "border" Hello World 배경(Background) 배경색 프로퍼티 "background-color" Hello World 배경 투명도 "opacity" h1 { background-color: red; opacity: 0.3; } ※ opacity를 조절하면 h1 엘리먼트에 속한 텍스트의 투명도도 같이 적용 된다. 배경의 투.. [CSS] @charset 규칙 @charset 규칙은 style sheet가 사용하게 될 텍스트 인코딩 방법을 정의한다. @charset은 반드시 모든 style sheet 엘리먼트 앞에 위치 해야하며 뒤에 다른 텍스트들이 따라와서는 안된다. 만일 두개 이상의 @charset이 정의 된다면 첫번째 규칙만 사용된다. @charset 규칙은 style 속성 내부에 사용 될수 없으며 엘리먼트 안에서 역시 사용 될 수 없다 문법 @charset "charset"; "charset"에 사용하고자 하는 인코딩 방식을 기술하면 된다. 예를 들어 스타일 시트의 인코딩 규칙을 utf-8로 하고 싶다면 @charset "utf-8"; 이라고 적어 주면 된다. 부록 1. 참고 CSS @charset Rule CSS @charset Rule Example.. [CSS] CSS tutorial CSS란 무엇인가? CSS는 "Cascading Style Sheet"의 약자다. 한글로는 종속형 스타일 시트 정도로 번역 된다. (미안하다..스타일 시트를 한글로 어떻게 번역해야 할지 모르겠다) CSS는 HTML 엘리먼트들이 어떻게 보여질지에 대해서 기술한다. 같은 HTML이라 하더라도 어떤 CSS를 사용하느냐에 따라 레이아웃이 완전히 달라 질수 있다. CSS는 웹페이지의 레이아웃에 대한 정의를 한 곳에서 처리하므로써 작업량을 엄청나게 줄일 수 있다. CSS는 HTML 문서 내부에 정의 될 수 있을 뿐 아니라, style sheet 파일에 따로 정의 될 수 있다. 왜 CSS를 사용해야 하는가? 과거에 HTML만 존재 했을 때는 태그에 모든 모든 속성들을 담고 있었다. 만일 개발자가 대규모 웹사이트를 개.. CSS 로딩하는 세 가지 방법 아무 생각 없이 작성한 포스트였는데 알고보니 100번째로 작성한 포스트군요. 작성 도중에 지워 버린 포스트도 있고, 시작만 하고 완성하지 못해 공개 해놓지 못한 포스트들도 있어서 컨텐츠의 개수는 100개가 안되지만 어쨌거나 100번째로 작성하고 있는 포스트라니..감회가 새롭습니다. 예전에 네이버 블로그를 사용 할 때는 거의 모든 포스트들이 다른 블로그의 내용들을 가지고 온 것들이었는데, 이 블로그의 포스트들은 모두 제 손을 거쳐 탄생된 것들이어서 더욱 애착이 가네요^^; 가장 먼저 해야 할 일은 CSS를 작성하는 것이지만 작성에 결과를 바로 바로 보면서 진행 해 나갈 수 있도록 하기위해 CSS를 로딩하는 방법에 대해 먼저 알아 보도록 하겠습니다. 만일 이 포스트를 읽고 계시는 분 중에 CSS작성에 대해서.. [CSS] Selectors CSS는 단순한 HTML태그에 여러가지 스타일 속성을 부여해서 보다 아름다운(?) 웹 페이지를 만들 수 있도록 도와줍니다. 하지만 모든 태그에 동일한 스타일 속성을 지정한다면 정말 무미건조 해지겠지요. 그래서 특정 태그만을 지정 하여 속성을 적용 할 수 있도록 범위를 한정 지을 수 있습니다. 그 때 사용되는 것이 바로 CSS Selector 입니다. CSS Selector를 사용하여 스타일 적용 범위를 한정 하는 것에는 간단하게 세 가지 방법으로 나뉩니다. 물론 앞의 세 가지 방법들을 조합해서 사용하는 것도 가능하구요 : 태그를 이용해 구분하는 방법 클래스를 이용해 구분하는 방법 아이디를 이용해 구분하는 방법 그럼 위의 세 가지 방법에 대해서 보다 자세히 알아 보도록 하겠습니다. 태그를 이용해 구분하는 .. XMLHttpRequest 의 속성과 메소드 Method abort() : 현재 진행 중인 모든 액션을 취소 getAllResponseHeaders() : HTTP 헤더의 모든 내용을 반환 getResponseHeader("헤더이름") : 지정된 HTTP헤더 내용을 반환 open(method, url, async, username, password) : HTTP Request 를 셋팅. 이름과 달리 뭔가 컨넥션을 연다거나 하는 작업은 하지 않는다. method : "GET", "POST" 가 들어 갈 수 있다. 자세한 사항은HTTP 트랜젝션의 구조 참조 url : 서버 도메인을 제외한 자원의 위치, 예를 들어 http:/kukuta.tistory.com/resource 중 resource async : XMLHttpRequest가 동기(false).. HTTP 트랜젝션의 구조 다른 여러 네트워크 프로토콜들과 마찬가지로 HTTP 역시 클라이언트-서버 모델을 가지고 있습니다. HTTP클라이언트는 서버로 향하는 컨넥션을 만들고 리퀘스트 메시지(request message)를 보냅니다. 응답을 마친 서버는 컨넥션을 닫아 버립니다. HTTP 컨넥션에 대한 지속적인 상태를 유지하지 않습니다. 이런 프로토콜 성향 때문에 HTTP를 비상태유지(stateless)프로토콜이라고 합니다. 요청 메시지와 응답 메시지의 포멧은 비슷합니다. 둘 다 텍스트 기반의 프로토콜이며 아래와 같은 메시지 구조를 갖습니다 : 이니셜 라인(initial line) 이니셜 리퀘스트 라인과 이니셜 리스폰스 라인, 두 가지로 구분 됩니다. 헤더 라인 헤더라인 자체가 없어도 되고 1개 이상의 헤더라인이 와도 상관은 없습니.. 이전 1 다음
