웹찢남

CSS 정리 본문

FRONT_END/이론 정리

CSS 정리

harry595 2020. 12. 8. 20:30

CSS도 정리해 봤습니다!

 

h1{color:red;font-size:12px;} 여기서 h1은 선택자 color는 속성 red는 값 {}내의 내용은 Declaration

선택자에는 위의 h1과 같이 tag 선택자, id 선택자 (#), class 선택자 (.)가 있다.

 

Id는 pk의 개념이고 class는 그룹으로 생각하여 해당 선택자를 사용해야 한다.

 

ul li {} -> ul 밑의 li 만 css 속성을 먹임 (조상 자손 선택자)

#lecture>li {} -> lecture의 직계 자손의 li에만 css를 먹음 (부모 자식 선택자)

 

orange.small -> tag이름이 orange인데 class 가 small 인 경우

ul,ol {} -> ul과 ol을 동시에 선택

plate+apple -> plate tag 다음의 apple tag

plate~pickle -> plate 후의 모든 B

plate orange:first-child -> plate tag 내의 orange tag들 중 첫번째

plate orange:nth-child(3) -> plate tag 내의 orange tag들 중 3번째

apple:not(.small) -> small class를 가지지 않은 apple tag

[attribute] -> [for]의 경우 for의 속성을 가진 모든 tag

 

가상 클래스 선택자 – 클래스 선택자는 아니지만 엘리먼트들의 상태에 따라 여러 엘리먼트를 선택할 수 있음

Ex) a:active{} -> 마우스를 클릭했을 때 a:hover{} -> 마우스를 올려 놓았을 때 a:visited{} ->방문했던 사이트 a:link{} -> 방문 한 적이 있는 링크  a:focus{} -> 포커싱 된 태그

동급인 두개의 css 가 선언되면 뒤쪽부터 우선순위를 줌

 

Property

Font-size: Rem과 px의 차이 화면의 전체를 zoom하는거 말고 브라우저의 setting 속 font size를 기준으로 % 화 , REM을 쓰자

Text-align:justify -> 양쪽이 균등하게 분배됨 (단어의 간격을 늘림)

font-family: arial, verdana monospace -> 글꼴, monospace 속성은 글씨체의 거리가 다 똑같음

line-height: 2; -> 행과 행 사이의 간격 font-weight: bold; -> 굵은 글씨

부모 엘리먼트의 속성을 자식 엘리먼트가 물려받음 이 떄 어떤 속성은 상속되고 어떤 거는 안됨 ex) border은 상속x, font style은 상속

캐스케이딩(폭포): html을 꾸미는 언어의 규칙( 브라우저 사용자, 웹페이지 저자, 웹 브라우저의 기본 디자인의 결합)

중요도:

  1. <head>의 <style>
  2. <head>의 <style> 내의 @import
  3. <link>로 연결된 CSS 파일
  4. <link>로 연결된 CSS 파일 내의 @import
  5. 브라우저의 기본 CSS

명시도: !important -> style attribute -> id selector -> class selector -> tag selector -> 상속

 

Layout

화면 전체를 사용하는 태그 => block level element

화면의 일부를 차지하는 태그 => inline level element

H1{display: inline;} 하면 엔터가 없어짐 a{display: block;} 하면 화면 한 줄을 다 씀

padding: 박스 모델에서 테두리와 내부 요소(content)들 사이의 간격

Margin: 박스 모델에서 요소들 사이의 간격

inline 방식에서는 width와 height는 무시된다.

Width는 border, margin과 padding을 뺀 content의 크기를 의미한다.

box-sizing: content-box가 default임, content-box는 위처럼 width,height는 content만 계산

box-sizing: border-box: 위처럼 width, height를 border까지 쳐서 계산함

마진 겹침 현상:

1. margin은 두 content 사이 중 큰 margin만 채택한다.

2. 같은 content에 부모속성과 자식 속성이 모두 margin을 가지고 있으면 더 큰 margin을 택한다.

(부모의 속성이 투명할 때)

3. tag에 시각적인 요소가 없으면 위쪽 margin과 아래쪽 margin값 중에 더 큰 값이 margin이 됨.

 

Position – 각각의 element의 위치를 지정

#me{position: relative; left:100px; top:100px;} -> 원래의 위치에서 왼쪽부터 100px 위로부터 100px 떨어진 곳에 해당 tag를 위치시킴 (부모에 대해 상대적으로)

#me{position: static;} -> left, bottom 이런 것을 신경 쓰지 않고 해당 위치를 고정적으로 박음

#me{position:absolute;}-> 부모 element가 아닌 html 웹 사이트 그 자체를 기준으로 위치

-> 만약 부모들 중 element가 static이 아닐 때 offset 기준을 html이 아닌 해당 부모의 element 위치로 지정, 또한 부모와의 관계성이 끊기기 때문에 크기가 자신의 content만 해진다.

#me{position:fixed;} -> header로 사용할 수 있음, 스크롤을 내려도 해당 element는 고정됨

Header로 쓰려면 body에 padding을 주면 아래로 좀 내려 감/얘도 부모와의 link가 끊김

 

 

Flex – 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구

display:flex를 통해 각각의 element들의 위치를 조정해줄 수 있음.

 

.container {display:flex; flex-direction:row-reverse; }-> row-reverse는 자식 element들을 반대로 정렬

.container {display:flex; flex-direction:column; }->자식element들을 부모element내에 수직으로 정렬

.item:nth-child(2){ flex-basis:200px } -> class가 item인 두번째 element의 크기를 조정

.item{ flex-grow:1} -> 해당 element들을 부모 element의 여백 전체를 공평하게 분배

-> 이때 .item:nth-child(2){flex-grow:2;}를 주면 2번째 element는 2만큼 자리를 더 차지

.item:nth-child(2){ flex-shrink:0 } -> container의 사이즈가 줄어도 해당 element는 사이즈가 고정

 holy Grail Layout

 

<style>

  .container{Display:flex; Flex-direction:column;}

  Header{Border-bottom:1px solid gray;}

  Footer{Border-top:1px solid gray;}

  .content{Display:flex;}

  .content nav{Border-right:1px solid gray;}

  .content aside{Border-left:1px solid gray}

  Nav,aside{flex-basis:150px; flex-shrink:0;}

</style>

<div class=”container”>

<header></header>

  <section class=”content”>

    <nav></nav>

    <main></main>

    <aside></aside>

  </section>

<footer></footer>

</div>

 

Align-items: flex-start -> 수직으로 맨 위 flex-end -> 수직으로 맨 아래 center-> 딱 중간

Justify-content: flex-start -> 수평으로 맨 왼쪽 center -> 가운데 space-around -> element들 사이에 gap을 주며 해당 container를 분배

Align-content: align-items와 비슷하지만 같은 행을 기준으로 그룹 후 정렬

Media query

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”> ->이거를 추가 해야함

@media(max-width:500px){background-color:red;}-> 화면의 크기가 500이하가 될 때 색 변경

@media(max-width:500px){.content{flex-direction:column}} -> 화면이 작아졌을 때 수직으로 정렬

 

Float

Img{ width:300px; float:left;}를 주면 글과 조화가 된다.

<p style=”clear:both;”> 일 경우 float 효과를 clear

 

 

Multicolumn

.column{column-count:2;} -> 화면을 두개로 분할하여 text를 쪼갬

.column{column-width:200px;} -> 200px에 맞춰 단을 나눠 줌(column의 수를 자동 조정)

è  위 두개를 동시에 선언하면 column-count가 최대 값이 됨

.column{column-gap:20px; } -> 단 사이의 간격

.column{ column-rule-style: dotted} -> 단 사이에 점선으로 라인이 생김 (column-rule-width,color)

H1{column-span:all;} -> column에 구애 받지 않고 자리를 잡음

 

 

 

 

Background

Background-image: url(‘run.png’) -> 화면에 반복적으로 나옴

Background-repeat: no-repeat; -> 이걸 줘야 사진이 반복되지 않음

Repeat-x는 x축으로만, rapeat-y는 y축으로 반복

Background-attachment: fixed; -> 스크롤이 되도 position-fixed같이 동작

Background-size: 500px 100px -> 사진의 크기를 정할 수 있음

Background-size: cover / contain -> cover: 화면을 이미지가 덮지만 이미지 바깥쪽으로 삐져나감 contain: 화면의 크기에 모든 이미지가 들어가지만 여백이 생김

Background-position: right top; -> image의 위치를 조정할 수 있음

 

Filter – 이미지, 비디오에 다양한 효과 추가

Img{-webkit-filter:grayscale(30%); -o-filter:grayscale(30%); filter:grayscale(30%);} -> 흑백 효과

H1{-webkit-filter:blur(3px); -o-filter: blur(3px); filter: blur(3px);} -> 번짐효과

Img{transition: all 1s;} -> 화면이 바뀌는 걸 1초동안 한다.

 

blend

.blend{background-> red+image; background-blend-mode: difference;) -> 백그라운드에 사진과 색을 줬을 때 blend-mode를 통해 사진과 배경색을 섞어 블랜드 효과를 낼 수 있음

.blend{mix-blend-mode:screen;} -> 색과의 합성 뿐 아니라 다른 content와의 블랜드도 이루어짐

 

Transform

H1{transform: scale(2,1);} -> x축으로 2배 늘림 ( transition과 같이 쓰면 좋을 듯 )

 

 

 

 

Transition

a:active{transform:translate(20px,20px);} -> a를 누르면 20px로 움직임

transition-timing-function: cubic-bezier; -> transition의 속도를 함수같이 변환

 

link를 사용하면 캐시 데이터에 css 파일을 다운하고 재접속할 때 네트워크를 통해 다운을 하지 않고 임시 디렉토리에서 해당 css 파일을 불러와 경량화가 된다.

@import는 edge에서 못 씀

Link 태그는 html 태그로 로드할 때 사용 import는 css에서 다른 css 파일을 로드할 떄 사용

'FRONT_END > 이론 정리' 카테고리의 다른 글

JAVASCRIPT 정리  (0) 2020.12.08
HTML 정리  (0) 2020.12.08
'FRONT_END/이론 정리' Related Articles more
Comments