(5) CSS3 기본 문법

*Udemy의 "The Complete Web Developer in 2019 : Zero To Mastery" 강의에서 학습한 내용을 정리한 포스팅입니다.

*https://soldonii.github.io에서 2019년 7월 5일(금)에 작성한 글을 티스토리로 옮겨온 포스팅입니다.

*자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :)

1. CSS란?

CSS = Cascading Style Sheet

Cascading이란, 위에서부터 아래로 순차적으로 정보를 읽는다는 의미이다. 예를 들어 동일한 tag에 대해서 CSS 파일의 위쪽과 아래쪽에서 각기 다른 서식을 설정할 경우, 아래쪽의 서식을 적용하게 된다. 작성하는 위치 뿐만 아니라, 작성하는 단위도 의미를 가진다. 따라서 CSS를 작성할 때에는 큰 단위 ⇒ 작은 단위로 내려오도록 작성한다.

아래와 같이 HTML 파일의 <head> tag 내에 <link> tag를 통해 CSS를 HTML에 적용할 수 있다.

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

# html, css, javascript 파일을 따로 관리하는 이유?

separation of concerns : CSS 담당자는 CSS만, 개발자는 Javascript 파트만 담당하여 역할 충돌을 줄이기 위함이다.

2. CSS 속성

CSS의 property를 모두 공부하거나 정리하는 것은 HTML tag를 다 정리하고 외우는 것과 다를 바가 없다. 자주 쓰이는 것만 잘 알아두면 되며, 이 또한 여기에 정리하기 보다는 잘 정리된 website에서 가져다 쓸 수 있으면 된다. 좋은 website에 대한 link로 대체한다.

☞ CSS Tricks : CSS 관련 정보가 잘 정리되어 있는 website.

☞ Specificity Calculator : selector의 구체성에 대해 계산할 때 사용하는 website.

☞ Paletton : 색상을 정할 때 유용한 website.

3. CSS 선택자

HTML 문서를 작성할 때, 각 tag에 class, id 등을 설정한다. 그리고 CSS 파일에서 해당 selector들을 선택하여 CSS Styling을 적용하게 된다.

.class이름 : HTML에서 지정한 class를 선택할 때는 .을 붙여 class명을 선택한다.
#id이름 : id를 선택할 때는 #을 앞에 붙여 id명을 선택한다. id는 중복이 불가능하다.

<p class="webtext active">Lorem ipsum.</p>
<p class="webtext" id="nonclickable">Lorem ipsum.</p>

.webtext {
  color : red;
}
.active {
  background-color : blue;
}
#nonclickable {
  text-decoration : none;
}

# CSS Selector 선택 방법

* : 모든 element를 의미한다. 문서 전체에 공통 서식을 적용할 때 사용할 수 있다.
element : selector 한개를 선택한다.
element, element : 여러 selector에 동일한 css를 적용할 때 사용한다.
element element : 첫번재 element 안에 있는 모든 두번째 element에 대해서 적용.

// element element 예시
h2 p {
  background : blue;
}
/* h2 안에 있는 모든 p 태그에 대해 배경을 blue로 적용하라는 의미이다. */

element > element : 바로 상위에 첫번째 element를 부모로 가지고 있는 두번째 element에 대해서만 적용.

// element > element 예시
h2 > p {
  background : blue;
}
/* h2를 부모로 가지고 있는 p 태그에 대해서만 배경을 blue로 적용하라는 의미이다.
바로 상위에 h2가 있는 형태가 아니고서는 적용되지 않는다. /*

element + element : 첫번째 element 바로 뒤에 두번째 element가 동등한 위계로 등장했을 때, 두번째 element에 대해서만 적용.

// element + element 예시
h2 + p {
  background : blue;
}
/* h2 바로 뒤에 p태그가 동등한 위계로 등장했을 때, 이에 해당되는 p 태그에 대해서 배경을 blue로 적용하라는 의미이다. /*

:hover : 마우스를 해당 element 위에 올렸을 때 적용할 서식을 설정할 수 있다.
:last-child : 선택한 부모 element의 마지막 child에 대해서만 서식을 적용한다.
:first-child : 선택한 부모 element의 첫번째 child에 대해서만 서식을 적용한다.
!important(not recommended) : 모든 css를 override해라. 규칙을 무시하기 때문에 권장되지 않는다.

# CSS에서의 우선 순위

Specificity : selector의 깊이가 깊을수록, 즉 구체적일수록 CSS를 우선순위로 적용한다. (Specificity Calculator 참고)
Importance : !important를 우선으로 적용한다.(권장되지 않음)
Source Order : html의 <head> tag에서 <link> tag를 통해 CSS 파일을 불러오는 순서. 다른 파일에서 동일한 element에 대해 다른 서식을 적용했다면, 뒤에 불러온 파일의 CSS styling을 적용한다.

4. CSS에서 글자 서식 적용하기

Text, Font에 대한 자세한 내용은 본 글의 앞부분에서 링크한 website를 참고한다. :)

특정 font를 사용하고 싶다면?

HTML 파일의 <head> tag 내에 참고할 대상이 있는 <link> 를 걸고, CSS 파일에서도 font-family 를 통해 원하는 selector에 해당 font를 적용한다.

☞ Google Font

5. CSS에서 이미지 다루기 및 박스 모델(Box Model)

이미지를 정렬할 때, text와 조화되어 이미지가 출력되도록 할 수 있다. float : left(또는 right) 를 사용한다. 한가지 문제는, float 서식이 적용된 요소의 바로 다음 요소 또한 마찬가지로 float left 또는 right가 함께 적용될 수 있다는 점이다. 이럴 경우, 해당 요소에 대해서 clear: both 를 적용하면 문제를 해결할 수 있다.

img {
  float : left;
}
footer {
  clear : both;
  text-align : center;
}

padding : 20px ⇒ 박스 안 쪽에 공간 만들기
- padding : 5px 20px 5px 20px ⇒ top right bottom left 순서로 적용된다.
margin : 20px ⇒ 박스 바깥 쪽에 공간 만들기
- margin : 0px 20px 0px 20px
- 또는 margin 0px 20px ⇒ top&bottom은 0px, left&right은 20px을 의미한다.

7. px, em, rem

CSS에서 공간에 여백을 주거나, grid의 크기를 정하거나, font-size 등을 정할 때 px, em, rem 등을 이용할 수 있다.

px :말 그대로 00px 만큼을 할당하는 것인데, 화면 상황과 관계없이 해당 px만큼 사용하기 때문에 responsive하지 못하다.
em : Containing Element. (ex. <p> tag 안의 <span> tag에서 font-size: 5em 을 적용했다면, 이는 <p> tag에 적용된 font-size 의 5배를 하라는 의미이다.) 즉, 바로 위 또는 가장 가까운 부모를 기준으로 적용된다.
rem : Root Element. Root Element는 HTML 자체이므로, 따라서 HTML(전체)을 기준으로 00배가 적용된다.

저작자표시

'Javascript 공부 > Zero To Mastery(-)' 카테고리의 다른 글

(7) 부트스트랩 4(Bootstrap 4) (0)	2019.08.27
(6) CSS3 심화 문법 (0)	2019.08.27
(4) HTML5 심화 문법 (0)	2019.08.27
(3) HTML5 기초 문법 (0)	2019.08.26
(2) 웹의 역사 (0)	2019.08.26