Published on

Html/CSS 정리하기 (2)

글쓴이

    📌 목차

    html_css
    • Css?
    • Selector
    • 구체성
    • 절대길이와 상대길이
    • 미디어쿼리

    Css?

    html만 가지고 웹페이지를 만들면 우리가 평소에 생각하는 웹페이지의 모습이 아니다. html을 꾸며주는 css가 필요한 순간이다.

    Cascading Style Sheets

    기본 구조

    선택자 {
  속성:값;
  속성:값;
}

    css의 기본구조는 간단하다. 요소를 선택하는 선택자, css 속성과 속성에 해당하는 값이 페어가 되는 구조이다. 페어와 페어는 ;가 delimiter가 되어 개행여부가 상관없지만, 페어 자체는 개행을 하면 안된다. 즉, 속성과 값이 다른 행에 있으면 안된다.

    Css 적용 방법

    Inline

    요소와 같은 라인에서 css 를 적용하는 방법이다.

    <div id="inline" style="color:blue;"><p>텍스트</p></div>

    Internal

    html 파일 내에 <style></style> 태그를 삽입해 해당 html 파일에 대해 스타일을 적용하는 방법이다. html페이지 수가 많아질 수록 css 관리에 적합하지 않다.

    ...
<html lang="ko">
  <head>
   ...
   <style>
   p {
     color:blue;
   }
   </style>
  </head>
...

    External

    css 파일을 분리하고 해당 css파일의 경로를 html에서 명시해 사용하는 방법으로, 실무에서 가장 많이 사용된다. 하나의 스타일을 여러 html에 적용할 수 있어 편리하다.

    ...
<html lang="ko">
  <head>
   ...
   <link rel="stylesheet" href="css/style.css">
  </head>
...

    Selector

    한국어로는 선택자이며, css 뿐만 아니라 js나 crawling 코드를 작성할때 dom 요소에 접근하기 위해 사용하는 개념이다. 선택자는 선택된 요소를 명시하는 방식이다.

    모든 요소 선택하기

    * {
  font-family: Georgia, serif;
}

    태그 선택하기

    여러 요소를 한꺼번에 선택할 수도 있다.

    h1,h2 {
  color : violet;
  background-color: gray;
}

    class 선택하기

    class 는 글로벌 요소로, 여러 요소에 일괄 적용될 수 있다. 또한, 여러 클래스 스타일을 하나의 요소에 적용할 수 있다.

    .class_name {
  color : yellow;
}
.class_name2 {
 background-color: gray;
 }
...

<div class="class_name class_name2" > ... </div>

    id 선택하기

    id는 페이지 내 유일한 하나의 요소에 적용된다. class 보다 구체성이 높다. 구체성이 높다는 것은 적용되는 스타일의 우선순위가 높아진다는 의미이다.

    #id_name {
  color : green;
}
...
<div id="id_name"> ... </div>

    선택자 조합하기

    조합된 조건을 모두 만족하는 요소를 선택한다.

    .class_name.class_name2{ /* 클래스와 클래스 조합*/
  ...
}
p.class_name { /* 태그와 클래스 조합 */
  ...
}

    속성 선택자

    속성 값이 아닌 속성을 기준으로 조합할 수도 있다. 아래의 예시는 p 태그이며, class와 id 속성을 모두 가진 요소를 선택한다.

    p[class][id] { text-decoration: underline; }

    속성의 값을 명시해서 선택할수도 있다.

    p[class="class_name"] { color: silver; }

    속성의 부분을 기준으로 선택할 수도 있다.

    • [class~="name"] : class 속성의 값이 공백으로 구분한 "name" 단어가 포함되는 요소 선택 ex) "myname" 이면 해당 x
    • [class^="name"] : class 속성의 값이 "name"로 시작하는 요소 선택
    • [class$="name"] : class 속성의 값이 "name"로 끝나는 요소 선택
    • [class*="name"] : class 속성의 값이 "name" 문자가 포함되는 요소 선택

    문서 구조 관련 선택자

    문서 구조 상에서 요소들은 다음과 같은 관계를 가지게 된다.

    부모, 자식, 인접, 형제, 조상, 자손

    • 부모는 현재 요소의 바로 상위 요소이다.
    • 자식은 현재 요소의 바로 하위 요소이다.
    • 형제는 현재 요소와 같은 레벨의 요소이다.
    • 인접은 현재 요소와 같은 레벨로 위치상 바로 옆에 속한 요소이다.
    • 조상은 현재의 요소의 모든 상위요소이다.
    • 자손은 현재 요소의 모든 하위 요소이다.

    구조 상의 여러 요소와, 관계를 나타내는 표현을 사용해 가장 오른쪽에 명시된 요소를 선택할 수 있다.

    자손 선택자

    공백으로 구분해 div 의 자손인 p 요소를 모두 선택할 수 있다.

    div p {
  ...
}

    자식 선택자

    꺽쇠(>)를 이용해 div 자식인 p 요소를 선택할 수 있다.

    div > p {
  ...
}

    인접 형제 선택자

    +를 이용해 div의 인접형제인 p 요소를 선택할 수 있다.

    div + p {
 ... 
}

    구체성

    스타일은 조상으로부터 상속받는다. 단, margin, padding, background, border 등 박스 모델 속성들은 상속되지 않는다는 사실에 유의한다. 구체성을 점수로 환산하는 기준이 있으며, 해당 기준에 따라 css 적용의 우선순위가 달라진다. 요소에 해당되는 스타일이 여러개 있어도 우선순위에 따라 적용되는 스타일이 달라진다.

    구체성 환산 규칙

    • 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
    • 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
    • 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소(:가상요소 라고 명시되는 것)
    • 전체 선택자는 0, 0, 0, 0을 가진다.
    • 조합자는 구체성에 영향을 주지 않는다. (>, + 등)
    • 4자리 숫자 중 좌측부터 비교하며, 좌측의 숫자가 클수록 구체성이 높다. (inline 요소는 1,0,0,0 으로 구체성이 아주 높다.)

    예시

    .class_name.class_name2{ // 0,0,2,0
  ...
}
#id_name.class_name:hover { // 0,1,1,1
  ...
}

    절대길이와 상대길이

    절대길이는 px로 표기한다.
    다른 요소에 영향을 받지 않지만 기기의 호환성을 고려한 단위이므로 기기에 따라 실제 길이가 상이할 수 있다.

    상대길이는 다음의 단위를 이용해 표기한다.

    • % : 부모의 값에 대해서 백분율로 환산한 크기를 갖게 된다. ex) width : 20%
    • em : font-size를 기준으로 값을 환산한다. ex) 2em
    • rem : root의 font-size를 기준으로 값을 환산한다. em과 다르게 부모의 크기에 따라 상대적인 적용하는 것이 아니라 루트 기준에 따라 일괄적용함 ex) 2 rem
    • vw : viewport(브라우저에서 사용자에게 보여지는 영역의 범위)의 width값을 기준으로 1%의 값으로 계산한다. ex) 20vw
    • vh : viewport(브라우저에서 사용자에게 보여지는 영역의 범위)의 height값을 기준으로 1%의 값으로 계산한다. ex) 30vh

    미디어쿼리

    미디어의 종류(스크린, 프린트, 스크린 리더기)에 따라 다른 스타일을 적용할 수 있게 만드는 표현이다.

    @media mediaqueries

    다음은 sceern 매체에 대해서만 최대 너비와 최소 너비를 지정하고 그에 따른 css를 지정해준 것이다.

    @media only screen and (max-width: 767px) and (min-width: 481px){
    .container img {
        width: 280px;
        height: 280px;
        border-top: solid #8b8386;
        border-bottom: solid #8b8386;
    }
}
@media only screen and (max-width: 480px){
    .container img {
        width: 240px;
        height: 240px;
        border-left: solid #8b475d;
        border-right: solid #8b475d;
    }
}

    반응형 웹을 위한 viewport 설정

    너비를 기기 스크린 너비로, 초기 배율을 1.0으로 설정한다.

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

    발전을 위한 링크
    https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries