SW공부 43일차

Guryena·2023년 3월 7일
0

HTML

목록 보기
2/9

1. 선택자(Selectors)란 그리고 종류는?

CSS 선택자는 CSS 규칙을 적용할 요소를 정의한다.

유형 선택자
html에 div 또는 span으로 정의한 경우 해당 선택자를 css에 사용한다.

div {
  width: 300px;
}

html로 코딩된 모든 div를 선택하기 때문에 header, nav, section, article로 나눈다

전체 선택자
*{}로 접근하여 전역으로 영향을 미친다.

id 선택자

<div id="name">id selector</div>
<style>
  #id {
    width: 100px;
  }
</style>

class 선택자

<div class="name name2">id selector</div>
<style>
  .name {
    width: 100px;
  }
  .name2 {
    height: 200px;
  }
</style>

자식 선택자
바로 아래 있는 요소만 선택된다.

즉 하나 아래 자식만 선택되고 한번더 nesting된 자식은 선택되지 않는다.

<div class="div_box">
  <div>
    children
    <div>not selected</div>
  </div>
</div>
<style>
  div.div_box > div {
    background: orange;
  }
</style>

자손 선택자
하위 자손 모두 선택한다.

1, 2, 2-1 모두 선택됩니다.

<section>
  <div>1</div>
  <div>
    2
    <div>2-1</div>
  </div>
</section>
<style>
  /* section안의 div를 모두 가져온다 */
  section div {
    background: orange;
  }
</style>

인접(형제) 선택자

  • 기호를 사용한다.

앞의 요소 바로 다음 요소만 사용 가능하다.

<div>
  <input type="checkbox" id="checkform" />
  <label for="checkform">
    <em></em>
  </label>
</div>
<style>
  input[id="checkform"] {
    display: none;
  }
  input[id="checkform"] + label em {
    padding: 10px;
  }
</style>

속성 선택자
#element[attr="value"]
attr는 기본요소에 추가적으로 들어오는 값

<!-- name이 attr -->
<input type="text" name="user-id" />
<style>
  input[name="user-id"] {
    background: red;
  }
</style>

#element[attr^="value"]

해당 속성을 가진 선택자를 모두 사용한다.

<div>
  <a href="http://naver.com">네이버</a>
  <a href="http://google.com">구글</a>
  <!-- 요건 http가 없어서 css 안먹음 -->
  <a href="youtube.com">유튜브</a>
</div>
<style>
  a[href^="http"] {
    background: red;
  }
</style>

#element[attr$="value"]
value로 끝나는 속성을 가져온다

<div>
  <a href="/file/selector.pdf">네이버</a>
</div>
<style>
  a[href$=".pdf"] {
    background: red;
  }
</style>

#element[attr*="value"]
value를 포함한 요소를 가져온다

<div>
  <a href="http://naver.com">네이버</a>
  <a href="http://naverblog.com">블로그</a>
  <a href="http://news-naver.com">블로그</a>
</div>
<style>
  a[href*="naver"] {
    background: red;
  }
</style>

#구조적 가상요소 선택자
#:first-child
첫번째 요소 가져옴

#:last-child
마지막 요소 가져옴

#:nth-child(n)
n번째 요소 가져옴

2. CSS 란?

종속형 시트 또는 캐스케이딩 스타일 시트(영어: Cascading Style Sheet)는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(영어: Style sheet language 스타일 시트 랭귀지)로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이고, 레이아웃과 스타일을 정의할 때의 자유도가 높다.

기본 파일명은 style.css이다.

마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다. 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다.

3. 시멘틱(Semantic) 태그에 대하여 설명하고, 그 종류는?

시맨틱(semantic)이라는 '의미의', '의미론적인'라는 뜻을 가진 형용사이다.
즉, 시맨틱 태그는 의미를 부여한 태그라는 뜻이다.

<div>태그에 의미를 부여했다고 생각하시면 이해가 편하다. 이런 시맨틱 태그는 HTML5에서는 처음 등장하였다. 예를 들자면 <header>나 <footer> 같은 태그들을 말한다. 이 태그들은 이름만 봐도 상단과 하단이라는 것이다. 이렇게 시맨틱 태그의 등장으로 인해 우리는 태그만 보고서도 문서를 더 쉽게 이해할 수 있게 되었다.

사용하는 이유

HTML 문서의 가독성과 유지보수가 쉬워진다. 만약 모든 태그들을 div로 만들었다고 가정한다. HTML 문서가 길어진다면 어디가 어느 부분인지, 어떤 영역인지 한눈에 파악하기가 힘들어진다. 하지만 시맨틱 태그를 활용하면 유지보수를 할 때나 다른 작업자가 코드를 파악하기가 보다 쉬워진다.
웹 브라우저가 HTML만 보고도 상단(header), 본문(main), 하단(footer), 사이드(aside) 어느 영역인지 쉽게 알 수 있다. 이는 웹 접근성 시각에서 볼 때도 중요하게 사용된다. 예를 들어 시각장애인들이 사이트를 사용할 때 사용되는 화면의 텍스트를 읽어주는 스크린 리더기 등을 통해 활용될 수 있다.
검색엔진이 검색을 수행할 때 HTML내의 태그를 분석할 수 있다. 예를 들자면 검색엔진의 검색로봇에서는

태그가 사용된 콘텐츠를 재배포할 수 있는 콘텐츠로 인식한다. 반대로 태그로 묶은 콘텐츠는 재 배포를 금지하는 콘텐츠로 인식한다.

4. class 와 id 선택자의 차이와 어떨 때 사용하는가?

  • 아이디 선택자는 동일한 이름을 부여할 수 없고, 하나의 태그에 이름을 정해서 디자인을 할 수 있다.
    html 표시 : id="이름" / css 표시 : #이름

    아이디 선택자는 HTML 요소의 id 속성 값을 참조하여 선택하는 방법으로, 이때 id 속성 값은 하나의 HTML 문서에 한 번만 사용할 수 있기 때문에 아이디 선택자를 사용하면 유일한 요소를 선택할 수 있다.


  • 클래스 선택자는 동일한 이름을 가질 수 있고, 여러 곳에 적용해서 디자인을 할 수 있다.
    html 표시 : class="이름" / css 표시 : .이름

    클래스 선택자는 HTML 요소의 class 속성 값을 참조하여 선택하는 방법으로, 이때 class 속성 값은 하나의 HTML 요소에 여러 개를 지정할 수 있기 때문에 다중 class를 선택자로 지정할 수도 있다.

5. px 과 em 의 차이는? (font)

CSS의 단위로는 절대 단위와 상대 단위가 있다. px는 절대 단위이고, 이외의 cm, mm, ic(인치), pc, pt(포인트) 등이 있다. 상대 단위로는 em, ch, rem, vh, vw 등이 있다. 대부분의 브라우저에서는 폰트 사이즈의 기본값이 12pt, 16pt, 1em, 100%로 이루어져 있다.

  • px
    픽셀인 px는 모니터에 따라 상대적인 크기를 가짐으로써, 반응형 웹에는 적절하지 않다. 그렇기 때문에 웹디자인의 경우 px를 권장하지 않는다.
  • em & rem
    em은 부모 요소의 글꼴 크기 를 의미하고, rem은 루트 요소의 글꼴 크기를 의미한다.

0개의 댓글