미새문지

Front End. Day04 CSS 본문

웹 프론트엔드

Front End. Day04 CSS

문미새 2022. 4. 19. 14:56
728x90

넷째 날은 홈페이지의 디자인을 꾸밀 수 있는 CSS에 대해 공부했습니다

그전에 HTML의 태그 하나를 알아보겠습니다.

 

시맨틱 웹 태그란?

- 전 세계에 만들어져 있는 수많은 웹 문서 갯수가 늘어나면서 정확하고 가치있는 정보탐색을 위해 요구하는 사람들이 점점 늘어나기 시작하며,

- 웹 세상에서 방대하게 퍼져있는 웹 문서를 보다 쉽고 정확하게 구분하고 조합하기 위한 시맨틱 웹 태그를 사용하게 되었다.

시맨틱 태그 구조도

 

< 시맨틱 웹 태그의 사용 이유 >

(1) 웹 접근성

 - 장애를 가진 사람과 장애를 가진 사람 모두가 웹 사이트를 이용할 수 있게 하는 방식을 가리키는 것

 

(2) 검색 엔진

 - 검색엔진의 자체 알고리즘이 키워드를 추출하는데, 이 때 해당 알고리즘이 시맨틱 태그를 읽어 더욱 정확한 내용을 전달해 검색엔진 상위문서에 노출될 수 있도록 해줌

 

(3) 가독성

<!-- 헤더더 부분시작 -->
 <div>
 ...<div>
        <div>
        </div>
    </div>
 </div>

  ( div 태그로만 작성한 경우 )

 <header>
 ...
 </header>
 <section>
    <article>
    </article>
    ...
</section>
<footer>
...
</footer>

  ( 시맨틱 웹 태그로 작성한 경우 )

 

div태그로 작성한 코드는 직접 주석을 달아주지 않으면 뭐가 뭔지 알기 어렵습니다.

하지만 시맨틱 웹 태그로 작성한 코드는 각 코드별로 분류되어있어 알아보기도 쉽고 주석이 없어도 코드의 위치로 예측할 수 있습니다.

아무의미 없는 div, span 태그들 보단 검색 잘되고 접근성 좋은 시맨틱 태그가 더 유용하다★(가독성은 덤)

 

 

< 시맨틱 웹 태그의 종류 >

header : 웹사이트의 제목, 로고, 검색 폼, 작성자 이름 등의 요소 등을 담는 태그

hgroup : 다수의 h1~h6을 묶을 때 사용하는 태그

 - ex) <hgroup> <h1></h1><h2></h2>...</hgroup>

nav : 다른 페이지로의 링크를 보여주는 태그, 목차, 메뉴, 색인 등에 사용

section : 한 문서의 구간을 나타내며, 적합한 뜻을 가진 요소가 없을 때 사용하는 태그

article : 문서, 페이지, 애플리케이션 또는 사이트 안에서 독립적으로 구분해 재사용할 수 있는 구간

 - ex) 게시판, 블로그 글, 매거진이나 뉴스 기사

aside : 문서의 중 내용과 간접적으로 연관된 부분을 나타내는 태그, 주로 사이드바에 사용

footer : 일반적으로 웹페이지 제일 아랫부분에 위치, 작성자, 저작권 정보, 관련 문서 등의 내용을 담고있는 태그

이 외에도 time, figure, details.. 등등 다양한 시맨틱 웹 태그들이 존재합니다.

 

시맨틱 웹 태그는 여기까지이고 이제 CSS로 넘어가겠습니다.

 

CSS란?

종속형 시트(Cascading Style Sheets)의  약자이며, 마크업 언어가 실제 표시되는 방법을 기술한 스타일 언어이다.

HTML 문서를 시각적으로 꾸며주는 역할을 하는 언어이며 웹페이지의 디자인을 담당한다.

 

기본 CSS 문법

선택자 {
	속성명: 속성값;
    속성명2: 속성값2;
    ...
    }

예시)

p {
     text-align: center;
     color: blue;
}

(p의 문단을 중앙정렬하고 색은 파란색으로 적용)

 

다음은 CSS에서 사용하는 스타일 선택자 입니다. 종류가 10가지 이상으로 많습니다

 

< CSS의 선택자 >

 

1. 전체 선택자

 : 스타일을 모든 요소에 적용하며, 디테일한 스타일은 전체 선택자와 body에 적용한 스타일보다 우선시 된다.

 : *{

       CSS문법

   }

-------------------------------------------------------

2. 태그 선택자, 요소 선택자

 : 특정 태그가 쓰인 모든 요소에 스타일을 적용한다.

 : 태그이름{

        CSS문법

   }

-------------------------------------------------------

3. id 선택자

 : 웹 문서 안에 특정한 부분에 스타일을 적용한다.

 : #기호로 사용해 id속성을 가진 요소에 스타일을 적용한다.

 : #아이디명{

       CSS문법

   }

-------------------------------------------------------

4. class 선택자

 : 특정 집단의 요소에 한번에 스타일을 적용할 때 사용한다.

 : .기호를 사용해 같은 class 속성을 가진 요소에 스타일을 적용한다.

 : .클래스명{

      CSS문법

   }

-------------------------------------------------------

Q) 여기서 id와 class속성에는 태그에 이름은 지어주는데, 왜 지어주는가?

 이름을 불러와 정확히 해당 부분을 선택해 CSSJS를 사용할 수 있기 때문이다.

 

id 선택지는 문서 안에 단 하나의 요소에 스타일을 적용(중복 사용X)시키는데,

class 선택지는 문서 안 복수요소에 스타일을 적용(중복 사용O)하는 경우에 사용하기 때문이다.

 

id의 속성이 class의 속성보다 우선순위가 높다

--> 즉, id의 속성은 해당 요소에 부여된 class 속성에 관계없이 적용한다.

-------------------------------------------------------

5. 그룹 선택자

 : 여러개의 요소를 나열하고 ,로 구분해 스타일을 적용한다

 : 여러 선택자들을 동시에 선택해 올 때 사용한다.

 : 선택자1, 선택자2{

      CSS문법

   }

-------------------------------------------------------

CSS는 불필요한 CSS코드의 중복과 코드가 길어지는 것을 방지하기 위해 가족 스타일의 선택자들이 있습니다.

 

6. 자손 선택자

 : 부모 요소 하위의 모든 요소에 스타일을 적용한다.

 : 자손에는 자식, 손자, 후손을 모두 포함

 : 조상요소선택자 자손요소선택자{

       CSS문법

   }

 

ex) p.tx(클래스명) : p태그들 중에 tx클래스를 가진 요소를 선택 p class="tx"

    p. tx : p태그 안에 tx클래스를 가진 요소 전부를 선택 <p><span=class="tx"></span></p>

-------------------------------------------------------

7. 자식 선택자

 : 부모의 요소 하위 자식의 요소에만 스타일을 적용한다.

 : 부모선택자 > 자식선택자{

      CSS문법

   }

-------------------------------------------------------

8. 인접 형제 선택자

 : 동일한 부모 요소를 갖는 자식 요소들의 관계-형제

 : 선후 관계를 따진다면 형-동생 관계

 : <ul> <a></a> <li></li> </ul>

 : 형선택자 + 동생선택자{

      CSS문법

   }

 

ex) a + li       

      (앞에 a태그가 있는 가장 가까운 li태그만 선택)

      CSS문법

    }

-------------------------------------------------------

9. 일반 형제 선택자

 : 형제 관계를 갖는 요소 중에서 형 요소 다음에 나오는 <모든> 동생 요소를 선택해 스타일을 적용한다

 : <ul> <a></a> <li></li>...<li></li> </ul>

 : 형선택자 ~ 동생선택자{

       CSS문법

   }

 

ex) a ~ li{

      (앞에 a태그가 있는 모든 li태그 선택)

      CSS문법

    }

-------------------------------------------------------CSS 족보는 여기까지

10. 속성 선택자

 : HTML 요소에서 src, href, type, name...과 같은 속성을 선택자로 지정해 스타일을 적용한다

 (1) 속성을 가지고 있는 요소를 선택할 때

 : [속성명]{

      CSS문법

   }

 

(2) 특정 속성값을 가지고 있는 요소를 선택할 때

 : [속성명="속성값"]{

      CSS문법

   }

-------------------------------------------------------

 

 

<!-- 넷째 날에는 HTML의 시맨트 웹 태그와 CSS의 스타일에 대해 공부했습니다.

지금까지 배운 걸로도 간단한 홈페이지 틀을 만들고 꾸밀 수 있습니다만, 좀 더 깊게 들어가서 기업홈페이지같이 세련된 스타일로 꾸밀 수 있을 때까지 계속 공부해야겠죠. -->

728x90

'웹 프론트엔드' 카테고리의 다른 글

Front End. Day06 CSS(3)  (1) 2022.04.26
Front End. Day05 CSS(2)  (1) 2022.04.25
Front End. Day03 HTML(2)  (1) 2022.04.18
Front End. Day02 HTML  (1) 2022.04.17
Front End. Day01 프론트엔드 첫걸음  (1) 2022.04.16