CSS 20

[CSS] css 기본 , 인접형제 , 일반형제 , 자식 선택자

전체선택자 페이지에 있는 전체 전체 요소를 대상으로 한다. 주의 : 실전에서는 사용하지 말 것을 권함. 브라우저에 과부하가 걸릴 수 있음. * { margin:0; padding:0; } 타입 선택자 h1, p, div, span 등 html 요소(Element)를 선택하는 선택자. 클래스 선택자(.) 특정 값을 class 속성의 값으로 갖는 요소를 선택한다. .abc{ color:red; } p.abc{ color:blue; } /*클래스 값으로 abc를 갖는 p 요소를 선택*/ 인접형제선택자(X+Y) 0 1 2 3 4 div + p{ color:red; } 등위 선택자로 동등한 위치에 있는 태그를 선택하여 css속성을 지정할 수 있다. 지정한 요소의 바로 다음에 위치하는 요소만 선택한다. 그래서 바로..

CSS 2021.09.15

[CSS] css 속성 선택자

특정 속성이나 특정 속성값을 가지고 있는 HTML 요소를 선택할 수 있다. [attribute] 해당 속성을 가진 태그를 지정. a[target]{ color:red; } /*a링크 중 target 속성을 가진 태그를 선택*/ [target]{ color:#fff; } /*target 속성을 가진 태그를 선택*/ [attribute="value"] 속성명과 속성값이 동시에 일치하는 요소를 선택자로 지정하는 기능. [class="tomato"]{ background-color:blue; } /*속성명이 class이고, 속성값이 tomato인 요소를 선택자로 지정.*/ p[class="tomato"]{ background-color:red; } /* p 태그 중에서 속성명과 속성값이 일치하는 요소를 선택자로..

CSS 2021.09.15

[CSS] CSS 선택자 정리 - 가상 클래스

가상 클래스는 클래스 or 태그명 선택자 뒤에 콜론(:)을 붙여서 표시하는 특별한 요소의 상태, 요소의 순서를 기준으로 자식 요소를 선택하는 방법이다. 1 상태 가상 클래스 선택자 :link, :visited, :hover, :active 는 링크 요소(마우스 클릭에 반응하는 요소)의 다양한 상태를 표현하는데 사용할 수 있는 가상 클래스이다. :link 방문하지 않은 링크를 선택 a:link{ color:red; } :visited 사용자가 방문한 링크를 선택 a:visited{ color:green; } :hover 마우스를 위에 올린 상태 a:hover{ color:orange; } :active 마우스로 클릭한 상태 a:active{ color:coral; } ※ 주의할 점! 링크 클래스들은 스타일..

CSS 2021.09.15

[CSS] box-sizing

html의 모든 요소들은 margin, padding 등 각각의 여백들을 가지며 이 때 width나 height값을 주게 되면 여백값과 더해져서 화면에 나타나게 된다. 이때 요소의 너비와 높이를 계산하는 방법을 지정해주는 것이 box-sizing 속성이다. content-box 요소의 너비와 높이를 설정하면 테두리(border)와 안쪽 여백(padding)은 여기에 더해진다. border-box border와 padding의 크기도 요소의 크기로 고려된다.

CSS 2021.07.30

[CSS] 폰트 파일 적용시키기 @font-face

사용자의 컴퓨터에 설치되지 않은 글꼴을 서버서에서 다운받아 사용할 수 있게 해준다. 폰트 파일 종류 EOT IE에서만 통용되며 IE에서 폰트를 사용하기 위해 EOT로 변환해주는 작업이 필요하다. TTF, OTF 대개 컴퓨터 서체 파일로 널리 사용되는 파일 형식. 대부분의 브라우저에서 지원함. WOFF 웹을 주된 대상으로 설계된 파일 형식, 파일 크기가 작아 신속히 다운됨. 안드로이드 지원안됨. SVG 이렇게 종류가 많기 때문에 모든 브라우저에서 원하는 글꼴을 표기하기 위해서는 .eot, .woff, .otf, .ttf, .svg 파일을 모두 업로드 해야한다. @font-face @font-face{ font-family : '폰트 이름'; src : url('파일 주소') format('폰트포맷'); f..

CSS 2021.07.23

[CSS]가상 클래스/ 가상 요소

가상 클래스(pseudo-class) 어떤 상태를 지정할 때 사용한다. 마우스를 올려 놓은 상태(:hover), 방문하지 않은 링크를 나타내는(:link) 등 문서상에 있는 것이 아니라서 가상 선택자라고 부른다. :link, :visited :link 방문하지 않은 링크의 상태를 나타낼 때 사용 :visited 방문한 링크의 상태를 나타낼 때 사용. :active, :hover :active 마우스로 클릭한 상태 :hover 마우스를 위에 올린 상태 :focus 키보드 포커스를 가질 때 :first-child, :last-child, nth-child(n) 가상 요소(::) 실제로 존재하는 않는 요소를 만들어 준다. 가상 요소는 inline 요소이므로 block 성질이 필요하면 display:block을..

CSS 2021.07.06

[CSS]transform(3D)속성 : perspective(원근법)

css로 3D 효과를 주기 위해서 가장 중요한 것이 perspective다. 투영점, 원근감 등의 의미이며 3D 환경을 만들기 위해서 깊이감을 주어 입체감을 부여하는 것이다. 픽셀 기반의 길이 값을 지정할 수 있으며, z축을 따라 캔버스로부터 관찰자의 깊이감을 나타내게 된다. 그래서 perspective(300px)는 스크린으로부터 300px 만큼 떨어진 곳에 관찰자가 있다는 것을 근거로 3D 환경을 구성하게 된다. transform-style : preserve-3d; 자식요소들을 3D 공간에서 묘사하기 위해 부모 요소에 적용시키는 속성이다. 기본 값은 flat으로 2D의 2차원에서 부모 요소와 동일한 평면에 배치된다. perspective-origin perspective의 기준점을 지정해주는 속성이..

CSS 2021.07.06