오늘도 삽질중

css(시맨틱태그,em/rem,css내용분해,class/id,background) 본문

HTML,CSS

css(시맨틱태그,em/rem,css내용분해,class/id,background)

해빋 2021. 8. 30. 12:52

CSS( = Cascading Style Sheet)

 

<목차>

  • 시맨틱 태그
  • background와 background-color 차이
  • em과 rem
  • css 내용 분해하기(셀렉터와 선언블록 , css 파일 추가하는법)
  • class와 id
  • HTML안에 CSS를 정의하는것을 권장하지 않는 이유

    -하나에 집중하기 위해 파일,구간을 구분하는 관심사 분리 측면에서 권장하지 않음.

 

시맨틱 태그 

-이름에 의미를 붙여 부르는 태그. 

-<header><main><nav><aside><footer>태그는 <div>태그와 똑같다.  그러나 태그를 부르는 이름이 다르다. 

 

<body>
    <header>This is the header.</header>
    <div class = 'container'>
        <nav>
            <h4>This is the navigation section</h4>
            <ul>
                <li>Home</li>
                <li>Mac</li>
                <li>iPhone</li>
                <li>iPad</li>
            </ul>
        </nav>
        <main>
            <h1>This is the main content</h1>
            <p>...</p>
        </main>
        <aside>
            <h4>This is the aside section</h4>
            <p>...</p>
        </aside>
    </div>
    <footer>
        <ul>
            <li>개인정보 처리방침</li>
            <li>이용 약관</li>
            <li>법적 고지</li>
        </ul>
    </footer>
</body>
body{
    margin:0;
    padding:0;
   background-color: coral;

}

header,footer{
    font-size: large;
    text-align:center;
    padding: 0.3em 0 ;
    background-color: #4a4a4a;
    color: #f9f9f9;
}
nav{
    background-color: goldenrod;
}
main{
    background-color:#f9f9f9;
}
aside{
    background-color:hotpink;
}

 css를 통해 색상을 주어 semantic 태그 별로 구분을 주었다

 

 

 

👌  background 속성과 background-color 속성은  어떻게 다른가요?

    -background 는 color이 외에 다른 background옵션들을 지정해 사용할 수 있고  ex)color/image/repeat/attachment/position..)     

 background-color은 색만 지정할 수 있다. background는 여러 background 속성을 부여할 수 있는 축약 속성이다. 그러나 좀 더 구체적으로 코드를 작성해주기 위해 각각의 옵션명을 적어주는것이 더 좋다.

background-color
background-position
background-image
background-attachment
background-repeat
body{
    margin:0;
    padding:0;
   background: #fff ; // 배경 색상
    color: #4a4a4a;   // 글씨 색상

}

header,footer{
    font-size: large;
    text-align:center;
    padding: 0.3em 0 ;
    background-color: #4a4a4a; // 배경색상
    color: #f9f9f9;  // 글씨 색상
 
}
nav{
    background: goldenrod;  // 배경 색상
    color: purple;
}
main{
    background:#f9f9f9;
}
aside{
    background-color:hotpink;
}
.personal_information{
    font-size: 30px;
}
.how_to_use{
    font-size: 2em;
}

.footer_menu{
    text-decoration:underline;
}

 

👌   em의 의미( rem과 em의 차이 )

- em: 절대적 단위 px와 달리 상대적 단위 em은 상위요소 크기를 기준으로 폰트사이즈가 결정됨.

body{ font-size: 20px;}
div{font-size: 1.5em;}

=> div는 상위요소 body의 폰트 사이즈에(상위 요소 크기) 1.5배를 하겠다는 뜻.

장점:  부모 요소의 한 번의 변경으로 자식 요소들의 크기값이 동시에 바뀔 수 있어서 매우 유연한 단위라봄.

단점: 모든곳에 em이 px를 대처하기에는 어려움이 있다.

           상위 요소가 무엇이고 크기가 어느정돈지 알기 어렵다.

예시

<footer>
        <ul>
            <li class = 'personal_information'>개인정보 처리방침</li>
            <li class = 'how_to_use'>이용 약관</li>
            <li>법적 고지</li>
        </ul>
    </footer>
.personal_information{
    font-size: 30px;
}
.how_to_use{
    font-size: 2em;
}

 

개인정보 처리방침 폰트보다 이용약관이 2배 더 커진걸 볼 수있다.

 

👌   rem의 의미

- rem(Root EM): em의 단점을 보완한 rem. HTML루트 요소의 글씨크기가 계산의 기반 값이다. 루트 요소의 글씨 크기는 웹 브라우저의 기본 폰트 사이즈가 결정함. 대부분 16px로 정해 놓음. 예를들어 어떤 자식요소의 css에 프로퍼티 값 2rem을 지정하면 (16 * 2 = 32) 결과값은 32px 가 된다. 

div{
  font-size: 2rem;   // 16px * 2 = 21px
  margin: 1.5rem;    // 16px * 1.5 = 24px
  }
  
  만약 padding: 4rem; 이라면 바로바로 크기가 머릿속에 그려지는가? no... 직관적이지 못함(단점)

 단점: em 과 비슷하게 비직관적임. 

 

참고

  • 절대 단위: px, pt 등
  • 상대 단위: %, em, rem, ch, vw, vh 등

css 내용 분해하기

 

출처:코드스테이츠

셀렉터로 특정 요소를 선택했다면 선언 블록안에(중괄호안)서 적용할 내용을 작성한다. 적용할 수 있는 내용을 속성이라한다. 속성에는 색상이나, 폰트사이즈가있다.  

 

CSS파일 추가(CSS파일에 작성된 내용을 HTML파일에 적용하는방법)

<link rel="stylesheet" href="index.css" />

link태그는 html파일과 다른 파일을 연결하는 목적으로 사용. link태그의 rel은 연결하자고 하는 파일의 역할이나 특징을 나타낸다. <head>태그에 작성.

 

똑같은 구조에 다른 스타일을 적용하는법=> css파일 하 나 더 만들고 link태그에 추가하면된다.

<head>
<link href = "layout.css" rel = "stylesheet">
<link href = "semantic.css" rel = "stylesheet">
</head>

 

 

layout.css 파일만들어서 기존 html(+semantic.css적용되어있는상태)에 layout.css 적용한 예

class 와 id

id  class
# .
한 문서에 하나의 요소에만 적용(유일하다) 여러개 가질 수 있음
특정 요소에 이름을 붙이는데 사용 스타일의 분류에 사용

 

<footer>
        <ul>
            <li class = 'personal_information footer_menu'>개인정보 처리방침</li>
            <li class = 'how_to_use footer_menu'>이용 약관</li>
            <li class ='footer_menu'>법적 고지</li>
        </ul>
    </footer>

 

.personal_information{
    font-size: 30px;
}
.how_to_use{
    font-size: 2em;
}

.footer_menu{
    text-decoration:underline;
}

 

'HTML,CSS' 카테고리의 다른 글

CSS(레이아웃 리셋, Flexbox) (수정중)  (0) 2021.09.07
CSS(Selector 구체적으로)  (0) 2021.09.07
inline  (0) 2021.08.30
HTML  (0) 2021.08.27
css(margin, border, padding)  (0) 2021.08.25
'HTML,CSS' Related Articles more
Comments