CSS 선택자, 상속, 캐스케이딩 그리고 기본 속성 - 웹사이트 개발

안녕하세요. 솔렐레입니다
오늘은 CSS에 대한 포스팅을 진행하겠습니다. CSS는 웹 사이트에서 디자인을 담당하고 있습니다. CSS를 통해 색상, 글꼴, 레이아웃 변경뿐 아니라 요즘은 기본적인 애니메이션 기능까지 구현이 가능합니다. 웹 사이트 개발에 기본적인 CSS에 대해 기본적인 개념들과 기능들에 대해 정리해보도록 하겠습니다.

---

[CSS 적용 방식]
- 인터널 방식: HTML 내에서 <style> 태그를 사용하여 css를 정의하는 방식
- 인라인 방식: HTML 태그 내에 직접 stlye속성을 통해 css를 입력하는 방식
- 익스터널 방식: .css 파일을 만들어 HTML과 연동하는 방식

[CSS 선택자]
- type 선택자: HTML 태그에 직접 디자인을 적용 ex) h1{ color: red }
- id 선택자: HTML 태그에 이름을 지어서 디자인을 적용. #을 사용하여 속성을 정의함. id 속성은 큰 공간의 개념으로 하나의 속성 값만을 가짐 ex) #bg{ background-color: red }
- class 선택자: HTML 태그에 별명을 지어서 디자인 적용. 복수의 class 속성을 사용할 수 있음. 작은 구역을 만들 때 사용 .(마침표)를 이용해서 속성을 정의함 ex) .col{ font-color: red }

 

[CSS 상속]
- 부모 자식 간의 상속: 부모 태그에 있는 css 디자인 속성을 자식 태그도 이어받아 디자인에 영향을 주는 것을 상속이라 합니다. 부모의 속성 중 margin, padding, position 등의 속성은 자식에게 상속되지 않습니다.
- 캐스케이딩: CSS 디자인을 적용할 때 어떤 디자인을 우선으로 적용하는지를 나타내는 것을 캐스케이딩이라 합니다. 우선순위에 영향을 끼치는 부분은 (1) CSS 속성이 입력된 순서 (2) 구체적으로 속성을 정의했는지 여부 (3) type, id, class 선택자입니다. 속성은 마지막에 작성될수록 구체적으로 작성될수록 우선순위가 높아집니다. 또 인라인 방식> id > class > type 순서로 우선순위가 정해집니다.

* 참고: CSS 주석( /* 주석 내용 */ ) HTML과 마찬가지로 CSS에 대해서 메모할 내용이 있으면 주석 사이에 내용을 작성하여 관리하면 주석을 통해 내용을 참고하기 좋습니다.


[CSS 주요 속성]
- width와 height: 공간에 대한 너비와 높이를 정의
- font: 글꼴, 글자 색깔, 모양, 굵기 등을 변경할 때 사용
- background: 배경색을 지정하거나 이미지의 위치를 변경할 때 사용

[CSS 레이아웃 정의]

- 박스 모델: 위 그림과 같이 HTML은 여러 개의 박스가 겹쳐있는 것 같은 공간 구성을 하고 있습니다. 이를 박스 모델이라고 합니다.
 1. margin 속성: 공간을 배치할 때 좌표를 설정할 때 사용합니다.
 2. border 속성: 공간의 테두리를 의미합니다. 보통 solid 속성과 같이 사용합니다.
 3. padding 속성: border와 content 사이의 간격을 의미합니다. margin과 마찬가지로 좌표를 설정할 때 사용합니다.
 4. content 속성: 내용물을 의미하고 실제 웹페이지에 노출할 정보를 담는 공간입니다.

- 마진 병합 현상: 부모 자식 간에 마진 병합 현상은 margin-top 속성이 부모에 영향이 갈 때를 의미합니다. 형제 속성 간에는 margin-bottom과 margin-top 속성에 영향이 있습니다. 마진 병합 현상을 해결하려면 position 속성을 통해 태그의 성격을 바꾸면 해결이 가능합니다.

- display 속성
 1. Block과 inline: 두 속성에 대한 내용은 HTML 설명 포스팅에 자세히 설명되어 있으므로 참고해주시면 될 것 같습니다. display 속성 사용 중, 줄 바꿈 현상은 일어나지 않고 width, height, margin-bottom 속성 등을 적용하기 위해서는 어떻게 해야 할까? 이럴 경우, inline-block 속성을 사용하면 된다. 이 속성을 이용하면 inline 특징으로 줄 바꿈 현상이 일어나지 않지만 block 요소의 특징인 width, height 속성 사용 또한 가능합니다. 레이아웃을 어떤 요소의 성격으로 정의할 것인지를 먼저 생각하고 css 코드 작성이 필요할 것 같습니다.

 2. position 속성

속성	마진 병합 현상	top, right, bottom, left 적용	자식의 높이 값이 부모에 끼치는 영향
static (2차원)	발생	불가능	있음
fixed (3차원)	미발생	가능	없음
relative (2, 3차원)	발생	가능	있음
absolute (3차원)	미발생	가능	없음

- z-index, float, clear 속성
1. z-index: 3차원 요소를 가진 position은 모두 z 축을 가지고 있습니다. 이에 따라 공간 뒤에 공간들을 배치하여 상위/하위 레이어의 개념이 생기게 됩니다. z-index 값이 높을수록 상위 레이어로 올라오게 됩니다.

2. float: css에서 보통 정렬을 할 때 가장 많이 사용하는 속성입니다.

3. clear: 해당 속성은 float 속성 기능을 제거하는 데 사용합니다. 보통 float 속성이 적용된 태그 다음에 등장하는 태그에 사용하여 세트처럼 사용되는 속성입니다. 속성 값에는 left, right, both 가 있으며 left, right 속성을 모두 제거하는 both 속성 값을 일반적으로 사용합니다.

---

CSS에서 많이 사용되는 주요한 개념 및 레이아웃을 설계할 때 꼭 알아야 하는 내용들에 대해서 정리하였습니다. 레이아웃은 공부를 하면 점점 더 어려워지는 느낌이라 직접 코딩을 하면서 많이 느껴봐야 할 것 같습니다. 다음 포스팅에서는 웹 페이지 기능 구현과 구현에 사용되는 프로그래밍 개념에 대해서 설명하겠습니다. 감사합니다.