1/2

박인태·2023년 1월 2일
0

WEB

목록 보기
5/12

headstyle 태그를 사용하는 대신 태그의 속성에 직접 style을 입력해서 그 부분만 따로 설정할 수 있다.

CODE

<li><a href="1.html">우왁굳</a></li>
<li><a href="2.html" style="color:black">이세계아이돌</a></li>
<li><a href="3.html">고정멤버</a></li>

Web

  • 우왁굳
  • 이세계아이돌
  • 고정멤버
  • 위 코드는 html 이지만 style이라는 속성코드는 뒤에 반드시 css가 온다고 약속한다.

    반면 어제 공부한 head에 들어가는 style은 효과를 누구에게 지정할 지를 설정해서 적용하기로 약속한다.
    그리고 이 때 a{ } 부분은 선택자(selector)라고 하며, color:black 부분을 효과(declaration)이라고 한다.

    정리하자면, 특정 태그에 직접 스타일을 넣을때는 선택자 없어 효과선언만 해주면 된다.
    추가로 또 다른 효과를 넣어줄 경우 ;를 써서 효과선언이 끝났음을 표시해주는 것이 좋다.

    	a{
    	color:red;
    	}

    a : 선택자(selector)
    color:red; : 효과(선언,declaration)
    color : 속성(property)
    red : 값(value)

    CSS 선택자의 기본

    태그의 속성을 통해서 여러 개의 선택자를 해당 태그에 적용시킬 수 있다.
    class 속성의 값은 여러개가 올 수 있으며 띄어쓰기로 구분한다.
    다만 style에서 나중에 온 선택자가 속성에 미치는 영향력이 더 크기 때문에 같은 선택자를 쓰는 속성을 중복으로 부여하는 것은 별로 좋지 못하다.

    선택자 우선순위 => 구체적이 우선순위
    id선택자# > class선택자. > tag선택자

    idvalue는 중복해서 사용하면 안된다.


    박스모델

    bolck : 화면 전체를 쓰는 태그
    inline element : 컨텐츠 만큼의 부피를 쓰는 태그

    같은 속성이 중복된다면 ,를 이용해서 합쳐주자

    h1{
    border-width: 5px;
    border-color: red;
    border-style: solid;
    }
    a{
    border-width: 5px;
    border-color: red;
    border-style: solid;
    }
    =>
    h1, a{
    border-width: 5px;
    border-color: red;
    border-style: solid;
    }

    h1{
    border-width: 5px;
    border-color: red;
    border-style: solid;
    }
    =>
    h1{
    border: 5px, red, solid;

    웹페이지 우클릭 -> 검사(개발자 도구 진입) -> 스타일
    해당 컨텐츠의 css 스타일 영역을 확인할 수 있다


    grid

    (숫자)fr - 화면 비율을 자동으로 맞춰주는 단위, 크기에 따라 유동적으로 설정됨

    cf) caniuse.com : 태그의 사용빈도, 사용가능여부를 보여주는 사이트

    개발자 도구의 레이아웃을 통해 그리드들의 적당한 크기를 파악할 수 있다


    미디어 쿼리

    @media(min-width:00){ }
    @media(max-width:00){ }
    -> 창 크기가 변하는 것에 반응하는 코드

    profile
    읽고 쓰고 배우고 만들고

    0개의 댓글