# 20. TIL

이지훈·2021년 6월 7일

CSS html

TIL

목록 보기

20/33

Semantic Web

웹이 발전하면서 정보로써 가치가 중요해지기 시작했다. 이에 따라 활용하기 좋은 형태의 데이터를 주기위한 웹의 트랜드를 말한다.

Semantic Tag

네이버에서 css를 지우면 안보이던 text들이 나타난다. 이는 장애인이든 비장애인이든 웹의 접근성 향상을 증진시키기 위함인 것을 알 수 있다. 즉, 각 부분을 나눠 정보를 효과적으로 전달할 수 있는 방법, 이를 시멘틱(의미론적) 태그라고 한다.

문제를 풀며 선택자가 많이 어려웠다. 그래서 이를 집중적으로 알아보기로 했다.

1. 조합선택자

1-1. 그룹 선택자

그룹 선택자는 서로 다른 선택자가 같은 스타일을 적용할 경우 개별작성하지않고, 선택자를 콤마(,)로 연결하여 한 번에 스타일을 적용하는 방법

h1 {
  color: red;
}
p {
  color: red;
}

위와 같은 입력방식을 그룹으로 묶어 아래와 같이 나타내는 방법

h1, p {
  color: red;
}

1-2. 자식 선택자

CSS 자식 선택자(Child Selector)는 부모 요소 바로 밑에 존재하는 자식 요소를 선택하는 결합자입니다.
부모 요소와 자식 요소를 결합할 때에는 > 기호를 사용합니다.

<div class="son">
  <p>자식</p>
</div>

HTML에서 위와같이 작성시 CSS에서 아래와 같이 작성합니다.

.son > p {
    color : black;
}

1-3. 인접형제 선택자

계층구조에서 요소 바로 다음에 오는 공생 요소를 선택하는 방법입니다.

<body>
    <div class="first">
        <h1>title</h1>
        <p>내용</p>
        
        <h2>title</h2>
        <p>내용</p>
    </div>
</body>

HTML에서 위와 같이 작성시, 첫번째 <P>태그를 불러오고 싶다면

.first h1 + p{
color: black;
}

2. dispaly요소

2-1.

<p> Tag : Paragraph : 단락을 묶어준다.
<div> Tag : Division : 레이아웃을 분할한다.
<span> Tag : Span : 특정 부분만 묶어준다.

2-2.

Display의 요소는 3개의 특징을 가집니다.

Block

가로를 통째로 차지하는 박스형태(width : 100%)
height와 width 값을 지정 할 수 있다.
margin과 padding을 지정 할 수 있다.
예시
<address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>, <dl>, <hr>, <header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <ol>, <video>

Inline

주로 텍스트를 주입할 때 사용하는 형태
block처럼 width값이 100%가 아닌 글자 크기 만큼 자동으로 잡히게 되며 라인이 새로 추가 되지 않는다.
width와 height를 명시 할 수 없다.
margin은 위아래엔 적용 되지 않는다.

<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>