Programming

CSS의 구조

사용자를 연구하는 개발자 2023. 3. 11. 18:00
반응형

CSS :

HTML로 작성한 문서에 스타일과 디자인을 입혀주는 기능을 제공하는 언어!

기본적인 구조:

-선택자 : HTML에서 어떤 태그 (부분)에 디자인 기능을 적용할지 잡아오는 기능.

-속성 : 어떤 디자인 기능을 쓸 것인가?

-속성값 : 디자인 기능 중 구체적으로 어떤 것을 수행할지 명령. 꼭 뒤에 (;) 입력해야 함.

h2 { # 선택자
  font-size: 1.5em; # 속성과 속성값
  margin-top: 10px;
  margin-bottom: 0px;
}

CSS를 적용하는 방법!

CSS를 HTML에 적용하는 방법은 크게 세가지 정도가 있다~!

  1. 인라인 스타일 : HTML 태그 안에 인라인 속성으로 넣어주는 방법
  2. 이터널 스타일 : HTML에서 <style> 태그 이용해서 적용시켜 주는 방법
  3. 익스터널 스타일 : CSS파일을 만들고 HTML에 <link> 태그로 불러오는 방법 (웹표준)

주로 3번 방법이 HTML, CSS 각각의 문서를 보관하고 수정하고 가독성이 좋은 이유로 잘 쓰인다!

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS 연동 방법</title>
    <style>                       #<style>태그를 이용해서 css기능 적용
        h1 {color:red;}
    </style>
  <link rel="stylesheet" href="index.css"> #<link>태그를 이용해서 css파일 호출 후 적용
  
</head>
<body>

  <h1 style="color:blue;">Hello world</h1> #style속성을 이용해서 인라인 형식으로 적
  
</body>
</html>

👍CSS의 우선순위! (Cascading)

cascading의 뜻과 같이 위에서 아래로 쏟아지는 이라는 철학적인 내용을 담고 있다! 이 말을 즉슨 순서가 매우 중요하다는 뜻!!! CSS에서는 명령문마다 가지고 있는 적용순서(힘)가 다르다!

  1. 단순히 같은 선택자를 지정했다하면, 가장 나중에 오는 속성값의 우선순위가 높다!
p { color : red;}
p { color : blue;}
p { color : yellow;} # 이 경우 마지막에 온 yellow 값이 적용!
  1. 구체척으로 적은 선택자가 우선순위를 가진다!
header p {color : red;} 
p {color : blue;}

#이 경우 부모태그 header와 자식태그 p가 구체적으로 호출된 선택자의 속성값인 red값이 적용

  1. 선택자의 우선순위(힘,레벨)는 style> id> class> tag 순이다!
<h2 style="color:yellow" id="color" class="color">color</h2>

#color{color:red;}
.color{color:blue;}
h2 {color:black;}

이 경우 css에 적용된 기능을 버리고 style 속성이 우선순위를 가져서 yellow 속성값이 적용된다!

CSS의 주요 속성!!! (너무 많아서 필요할때 마다 찾아 쓰자)

https://developer.mozilla.org/ko/docs/Web/CSS

⭐박스 모델!!!

출처 :&nbsp;https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/The_box_model

위와 같이 총 4개의 영역으로 구성된다. 제일 안쪽부터 content, padding, border, margin이다.

CSS의 움직이는 속성!

  1. Transform 속성 : 움직임, 회전, 크기조절 등을 변화시켜 주는 속성이다!
    • rotate()
    • scale()
    • skew()
  2. transform 속성 방법으로는 대표적으로 다음 등이 있다! 필요에 따라서 구글링 하자.
#ex
transform:rotate(45deg);
transform:scale(2,3);  
transform:translate(100px,200px);
transform:skew(10deg,20deg);
  1. Transition 속성: 변화하는 과정을 보여주는 속성이다! (지속시간과, 부드럽게 등)
    • transition
    • transition-delay
    • transition-duration : 항상 delay 속성보다 먼저 와야 한다!
    • transition-property
    • transition-timing-function
    • .class: hover{ }
  2. transition 속성 방법으로는 대표적으로 다음 등이 있다!
#ex
.transition {
        width: 100px;
        height: 100px;
        background-color: red;

        transition-property: width;
        transition-duration: 2s;
        transition-timing-function:linear;
        transition-delay:1s;

    }

    .transition:hover{
        width:300px;
    }
  1. Animation 속성 ****: Flash 혹은 JavaScript 없이 애니메이션 효과를 주는 속성이다!
    • @keyframes
    • animation-name
    • animation-duration
    • animation-delay
    • animation-iteration-count
    • animation-direction
    • animation-timing-function
    • animation-fill-mode
    • animation
  2. animation 속성 방법으로는 대표적으로 다음 등이 있다!
 .animation {
        width: 300px;
        height: 300px;
        background-color: yellow;

        animation-name: changeWidth;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-delay: 1s;

        animation-iteration-count: 6;
        animation-direction: alternate;
        
    }

    @keyframes changeWidth {
        from{
            width:300px;
        }

        to{
            width:600px;
        }
    }

animation 코드를 한 줄로 정리할 수 있다.

.animation{
    animation: changeWidth 3s linear 1s 6 alternate;
}

반응형 웹사이트를 위한 미디어쿼리!!!

기기마다 다른 화면 사이즈에 따라 웹사이트의 보여주는 부분의 기능들을 따로 설정할 수 있다!!!

pc뿐만 아니라 모바일 태블릿에서 반응형, 적응형 웹사이트를 구현한다.

주의!) ❗항상 html코드에서 meta 코드를 넣어주고 사용해야 한다!!! ❗

<meta name="viewport" content="width=device-width, initial-scale=1.0">

#ex
.media {
        width: 500px;
        height: 500px;
        background-color: red;
}

@media (min-width: 320px) and (max-width: 800px) {
	.media{
    width: 300px;
    height: 300px;
    background-color: yellow;
    border: solid 10px blue;
    }
}
저작자표시 (새창열림)