본문 바로가기

분류 전체보기

CSS Attr Selectors 지정된 속성들로 HTML 요소들 꾸미기요소가 갖고 있는 지정된 속성, 속성 값으로 꾸밀 수 있다. CSS [attr] Selector지정된 속성으로 요소를 선택하기 위해 쓰인다.모든 a태그 중 target 속성있는 것들의 배경을 노랑으로 만든다.a[target] { background-color: yellow; } CSS [attr="value"] Selector지정된 속성과 값으로 요소를 선택한다.a 태그의 target 속성의 값이 _blank인 것 선택a[target="_blank"] { background-color: yellow; } CSS [attr~="value"] Selector지정된 단어를 포함하는 속성의 값으로 요소를 선택한다.속성이 title인 것의 값이 flower인 것을 선택한다. ..
CSS Dropdowns Basic Dropdowndropdown 클래스 안에 dropdown-content 클래스가 있다. dropdown에 마우스를 갖다대면 none이었던 content의 display 값이 block으로 바뀌면서 나타난다. Dropdown Menudropdown content 안에 링크들을 넣었다. Right-aligned Dropdown Content
고장원 작가님의 강연을 듣고 난 뒤 떠오른 질문, 생각들 12345678910111213141516171819202122232425262728293031323334SF란 무엇인가?말 잘 듣는 인공지능, 인간에게 안된다고 말할 수 있는 인공지능도 필요함SF영화는 흥행 상위권에 있음, 미국에선 우주에서 펼쳐지는 SF영화를 선호함한국은 미국만큼은 아니지만 SF영화 선호함대중문화 통계가 별로 없음SF매니아들은 소설을 영화보다 더 많이 본다. 생각지 못한 새로운 아이디어들을 먼저 접할 수 있음캔자스대학엔 SF연구소가 있고 유명 작가들 배출..왜 대학에서 SF를 가르치나? 삶에 스며드는 대중현상이기 때문에’과학기술이 인간사회에 미치는 영향이 갈수록 증가한다. SF는1. 과학적 근거가 전제되어야 한다.융통성은 가질 수 있지만 과학과 무관하면 안됨.2. 자연과학만 다루지는 ..
CSS Navigation Bar 어느 웹사이트에서나 사용이 쉬운 길도우미(내비게이션)를 갖는 건 중요하다.Navigation Bar = List of Links길도우미는 기본적으로 표준 HTML을 필요로 한다.길도우미는 기본적으로 link들의 list이다, 그래서 과 요소들을 사용해야한다. 태그 안에 태그를 넣고 각 태그 사이에 태그를 넣는다. 블록요소라서 세로로 출력되고 머리기호, 밑줄이 나타난다.예시 머리기호, 마진, 패딩을 리스트로부터 없앤다.ul { list-style-type: none; margin: 0; padding: 0; }예시 list-style-type:none; 은 머리기호를 없앤다. 길도우미는 list 마커가 필요하지 않다.margin:0; padding:0;은 브라우저의 기본 설정을 없애기 위해 설정한다.위 예..
CSS Opacity / Transparency 요소의 불투명도, 투명도를 지정한다. transparent image0.0에서 1.0 사이의 값을 가진다. 값이 낮을수록 더 투명하다.예시 transparent hover effect마우스를 갖다 대면 불투명도를 바꾸기 위해 :hover 선택자와 종종 같이 쓰인다.예시 transparent box요소의 배경에 투명도를 추가하기 위해 opacity속성을 사용할 때, 이것의 모든 자식 요소들은 같은 투명도를 상속받는다. 완전히 투명한 요소 안에 있는 글자를 읽기 힘들게 만들 수 있다.예시 transparency using RGBA자식 요소들에 불투명도를 적용하기 싫다면, RGBA 색 값을 쓰면 된다. 다음 예시는 배경색에 불투명도를 설정하고 텍스트에는 안한다.예시rgba(red, green, blue, al..
CSS Pseudo-elements 요소의 지정된 부분을 꾸미기 위해 쓰인다.예를 들어,요소의 첫번째 문자, 또는 줄 꾸밈요소의 내용의 앞이나 뒤에 내용 삽입 문법selector::pseudo-element { property:value; } 더블 콜론 :: vs :CSS3에서 더블 콜론은 싱글 콜론을 대체했다. W3C로부터의 pseudo-classes와 pseudo-elements 사이의 구분을 위한 시도이다. ::first-line pseudo-element첫 줄에 특별한 스타일을 추가하기 위해 쓰인다.모든 요소들에 있는 텍스트의 첫 줄을 포맷한다.예시::first-line 의사 요소는 오직 block 단위 요소에만 적용된다.다음 속성들은 ::first-line 의사 요소에 적용된다.font, color, background, word..
CSS Pseudo-classes 요소의 특별한 상태를 정의하기 위해 쓰인다. 예를 들어,마우스 커서를 요소어 hover했을 경우 꾸밈links를 방문했거나 방문하지 않았을 경우를 다르게 꾸밈요소가 포커싱됐을 때 꾸밈 문법selector:pseudo-class{property:value;} anchor pseudo-classeslinks는 다른 방식으로 표시될 수 있다.예시a:hover는 a:link, a:visited 이후에 나와야 한다. a:active는 a:hover 뒤에 나와야 한다.순서는 link, visited, hover, active pseudo-classes and css classesanchor 태그의 클래스를 지정한 뒤 의사 클래스로 효과를 준다. 마우스를 갖다 대면 지정된 것만 색이 바뀜예시 hover on 요소에 ..
CSS Combinators combinator는 selector(선택자) 간의 관계를 설명해준다.CSS 선택자는 하나 이상의 선택자를 포함할 수 있다. 단순한 선택자 사이에 combinator를 포함할 수 있다. CSS에는 4가지 다른 combinator가 있다.descendant selector(space)child selector(>)adjacent sibling selector(+)general sibling selector(~) descendant selector지정된 요소의 모든 자손 요소를 매칭한다.태그의 자손 중 태그의 배경 색을 노랑으로 바꾼다.예시 child selector지정된 요소의 바로 아래 자식 요소만 선택한다.자손 선택자와의 차이가 있다.태그 중 바로 아래의 자식 태그의 배경색을 노랑으로 바꾼다. 자손 선..

티스토리툴바