본문 바로가기

CSS

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지정된 요소의 바로 아래 자식 요소만 선택한다.자손 선택자와의 차이가 있다.태그 중 바로 아래의 자식 태그의 배경색을 노랑으로 바꾼다. 자손 선..
CSS Layout - display:inline-block display:inline과 비교하여 주된 차이는 display:inline-block은 너비와 높이 설정을 허용한다는 것이다.또한 top bottom margin padding이 존중된다display:block과의 주된 차이는 display:inline-block은 요소 다음에 줄 바꿈이 없다는 것이다. 그래서 다른 요소 옆에 위치할 수 있다. 아래 예시를 보면 inline은 요소가 나란하지만 높이 너비 패딩이 무시된다. inline-block이 적용된 span은 div 옆에 붙어있게 된다. 그리고 너비가 잘 적용되므로 창의 너비를 넘어섰기 때문에 줄바꿈이 있는 것처럼 보인다. width를 줄이면 높이가 적용된 span을 볼 수 있다. display:block은 너비 높이 패딩이 다 적용되지만 줄바꿈이..
CSS Layout - float and clear float 속성은 요소가 어떻게 떠있는지 지정한다.clear 속성은 지워진 요소 옆에 어떤 요소가 떠오르며 어떤 면에 떠있을 수 있는지 지정한다. (뭔말인지..) float 속성float 속성은 웹 페이지의 레이아웃과 위치 지정을 위해 쓰인다.float 속성은 다음 값을 가질 수 있다left : 요소는 컨테이너의 왼쪽에 떠있다right : 요소는 컨테이너의 오른쪽에 떠있다.none : 요소가 떠있지 않다. 기본값inherit : 요소는 부모의 float 값을 상속한다. 가장 간단한 사용에 있어서 float 속성은 이미지 주변 텍스트를 감싸는 데 쓰일 수 있다. float : righthttps://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float..
CSS Layout - The position Property position 속성은 요소의 위치 지정 방식의 유형(static, relative, fixed, absolute, sticky)을 지정한다. position:static;HTML 요소는 기본적으로 static 포지션이다. position:static;인 요소는 top, bottom, left, right 속성에 영향을 받지 않는다.div.static { position: static; border: 3px solid #73AD21; } position:relative;normal 포지션에 상대적으로 위치한다.top, bottom, left, right 속성을 지정하면 normal 포지션으로부터 벗어나 수정된다.div.relative { position: relative; left: 30px; borde..
CSS Layout-width and max-width Using width, max-width and margin:auto; width를 설정하는 것은 컨테이너의 모서리보다 넘치는 것을 예방한다. margin을 auto로 하고, 수평적으로 중앙을 맞출 수 있다. 그 요소는 지정된 width를 가지고 남은 공간은 동등하게 분할될 것이다.하지만 이것의 문제는 브라우저 창이 요소의 width보다 작을 경우이다. 브라우저는 페이지에 수평 스크롤바를 추가한다. max-width를 대신 쓰면 작은 창의 브라우저를 잘 다룰 수 있다. 작은 기기에서 사이트를 사용할 수 있게 하려면 중요하다. ex2는 너비가 500px 이하가 되어도 짤리지 않고 반응형으로 border가 모두 표시된다. div.ex1 { width: 500px; margin: auto; border: 3p..
CSS Layout-the display property display 속성은 레이아웃을 제어하기 위한 가장 중요한 속성이다. the display propertydisplay 속성은 요소가 표시될지 말지, 어떻게 표시될지 지정한다.모든 HTML 요소는 해당 요소의 타입에 따라 기본 display 값이 있다. block, inline이 있다. Block-level Elements항상 새로운 줄에서 시작하고 전체 너비를 가진다., -, , , , , 이 block 요소이다. Inline Elements새로운 줄에서 시작하지 않고 필요한 만큼만 너비를 가진다., , 가 inline 요소다. Display:none;display:none;은 요소를 삭제하거나 생성하지 않고 숨기거나 보여주기 위해 흔히 쓰인다. 요소는 display:none;을 기본으로 쓴다. Ove..

티스토리툴바