[부스트 코스] CSS 기초 문법 (우선순위, 선택자, 레이아웃 구성)

* 이 글은 부스트코스의 웹 프로그래밍 강좌를 수강하고 작성되었습니다.

 

https://www.edwith.org/boostcourse-web/joinLectures/12952

[부스트코스] 웹 프로그래밍 강좌소개 : edwith

 

1. CSS 선언 방법

CSS 선언방법은 다음과 같다.

 

괄호 { } 는 객체를 표현한다. 그 안에 따옴표 없이 프로퍼티 이름을 쓰고 값을 준다. 

 

스타일을 HTML 페이지에 적용하는 세가지 방법이 있다.

• inline : HTML 태그 안에다가 넣는 방법
• internal : head 안에 바로 style 태그로 지정한다. 구조와 스타일이 섞이게 되므로 유지보수가 어렵다. 별도의 CSS파일을 관리하지 않아도 되며 서버에 CSS파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없다.
• external : 외부파일(.css)로 지정하는 방식

같은 선택자로 동일한 프로퍼티에 다른 값을 넣었을 경우 inline > internal = external 의 우선순위로 속성값이 반영된다.

 

2. 상속과 우선순위 결정

상속이란, 상위에서 적용한 스타일을 하위에서도 쓴다는 의미다. 

이는 중첩된 엘리먼트마다 매번 같은 색상과 글자크기 등을 지정하지 않아도 돼서 좋다.

 

* 단, box-model 이라고 불리는 속성들( width, height, margin, padding, border ) 과 같이 크기와 배치 관련된 속성들은 하위 엘리먼트로 상속이 되지 않는다. 

 

CSS 는 여러가지 스타일정보를 기반으로 최종적으로 경쟁에 의해서 적절한 스타일이 반영된다. 다른 선택자를 썼지만 같은 노드를 가리킬수도 있어서다. 브라우저가 처리할 수 있도록 규칙(우선순위)을 정해놓았고, 그 규칙에 따라 반영될 스타일이 결정되는데, 이런 성질을 cascading 이라고 한다.

 

그 규칙을 살펴보자.

• 우선, 선언방식에 따라서는 inline > internal = external
• 구체적으로 표현되어 있는 것이 먼저 적용되도록 하고,
• id > class > element 순에 따라 점수를 부여하고, 점수가 높은 것이 반영된다.

참고 자료 : https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Specificity

 

3. CSS 선택자

 

CSS 선택자란, HTML 요소를 tag, id, class, html 태그 속성들을 통해 쉽게 찾아주는 방법이다. DOM 트리 구조로 되어있는 HTML 데이터를 빠르게 찾아간다.

 

기본적인 선택자 문법을 살펴보자.

 

CSS 에는 자식선택자와 자손선택자가 있다. 

 

자손 선택자	E F	요소의 자손에 지정	1
자식 선택자	E > F	요소의 자식에 지정	2

 

자손은 자식, 손자, 후손을 모두 포함한다. 반면 자식은 직계자식만을 의미한다.

 

엘리먼트에 스타일을 지정하기 위해서는 3가지 기본 선택자를 사용한다.

tag	태그이름 { ... }
id	.id이름 { ... }
class	#class이름 { ... }

 

그룹으로 묶을 때는 쉼표를 사용해 h1, span, div { ... } 이런식으로 쓴다.

하위 요소를 선택할때는 공백으로 한다. #jisu span { ... } 이라 하면, jisu 라는 id 를 가진 선택자 아래 span 자손들을 말한다.

자식을 선택할 때에는 #jisu > span { ... } 

N 번째 자식요소를 선택할 때는 #jisu > p:nth-child(N) { ... } 라 한다.

 

** nth-child 와 nth-of-child 의 차이점은 다음과 같다.

E:nth-child(n) 은 부모의 n 번째 자식이면서 E 요소
E:nth-of-type(n) 은 같은 유형의 n 번째 형제인 E 요소 

여기서 : 는, 가상클래스 선택자이다.

5. 엘리먼트가 배치되는 방법 (CSS 레이아웃)

중요하게 이해해야 할 속성들은 다음과 같다.

• display (block, inline, inline-block)
• position(static, absolute, relative, fixed)
• float(left, right)

블록으로 쌓이는 엘리먼트 display : block

display 속성이 block 이거나 inline-block 인 경우, 그 엘리먼트는 블록을 가지고 아래로 쌓인다.

옆으로 흐르는 엘리먼트 display : inline

display 속성이 inline 인 경우에는 우측으로 그리고 아래쪽으로 빈자리를 차지하며 흐른다. 고로 inline 속성의 엘리먼트는 높이와 너비를 지정해도 반영되지 않는다.

 

좀 다르게 배치시키기, position 속성

엘리먼트 배치가 순서대로만 위아래로 또는 좌우로 흐르면서 쌓이기만 하면, 다양한 배치를 하기 어렵다. position 속성을 사용하면 상대적/ 절대적으로 어떤 위치에 엘리먼트를 배치하는 것이 수월하다.

 

1. position 속성의 기본은 static. 그냥 순서대로 배치
2. absolute 는 기준점에 따라서 특별한 위치에 설정. top/left/right/bottom 으로 설정 ( absolute 같은 경우에는 top/left 같은 속성을 꼭 주는것이 좋다.) 기준점을 상위 엘리먼로 단계적으로 찾는데 static 이 아닌 position 이 기준점이 된다. 기준점을 찾면 그 것의 top, left 값의 주어진 만큼 떨어져서 값이 설정된다.
3. relative 는 원래 자신이 위치해야 할 곳을 기준으로 이동한다. top/left/right/bottom 으로 설정한다.
4. fixed 는 viewport (전체화면) 좌측, 맨위를 기준으로 동작한다.

간격을 다르게해서 배치하기 ( margin : 10px )

margin 으로 배치가 달라질 수 있다. margin 은 위/아래/좌/우 엘리먼트와 본인간의 간격이다. 따라서 그 간격만큼 내 위치가 다라진다.

 

기본 배치에서 벗어나서 떠있기 ( float : left )

float 속성으로 원래 flow 에서 벗어날 수 있고 둥둥 떠다닐 수 있다. 일반적인 배치에 따라서 배치된 상태에서 float 는 벗어난 형태로 특별히 배치된다. 따라서 뒤에 block 엘리먼트가 float 된 엘리먼트를 의식하지 못하고 중첩되서 배치됩니다. 실제로 레이아웃 구성할때 좌우영역으로 많이 쓰이게 된다.

 

하나의 블록 엘리먼트는 box 형태 ( box-model )

블록 엘리먼트의 경우 box 의 크기와 간격에 관한 속성으로 배치를 추가 결정합니다. margin, padding, border, outline 으로 생성되는 것이다.

 

box-shadow 속성도 box-model 에 포함지어 설명할 수 있다.

box-shadow 는 border 밖의 테두리를 그릴 수 있는 속성이다.

 

box-sizing : border-box 라고 지정해주면 padding 을 늘려도 박스크기가 커지지 않음. Box-sizing 이 content-box 일때는 padding 키우면 박스크기도 커진다.

 

그래서, 레이아웃 구현 방법은?

• 전체 레이아웃은 float 를 잘 사용해서 2단, 3단 컬럼배치를 구현한다. 최근엔, css-grid 나 flex 속성 등 layout 을 위한 속성을 사용하기 시작했으며, 브라우저 지원범위를 확인해서 사용하도록 한다.
• 특별한 위치에 배치하기 위해서는 position absolute 를 사용하고, 기준점을 relative 로 설정한다.
• 네비게이션과 같은 엘리먼트는 block 엘리먼트를 inline-block 으로 변경해서 가로로 배치하기도 한다.
• 엘리먼트 안의 텍스트의 간격과, 다른 엘리먼트간의 간격은 padding과 margin 속성을 잘 활용해서 위치시킨다.

 

6. float 기반 샘플 화면 레이아웃 구성

이 장에서는 실습을 하며 진행했다.

 

특히 기억하고 싶은 내용은,

 

** 자식이 float 인 경우 둥 떠있기 때문에 자식으로 인정하지 않는다. 그럴때, overflow 속성을 주었을 때 그 자식을 인식하게 된다. ( overflow : auto )
** 2단 칼럼으로 레이아웃 구성할때 float 로 주고, width 를 20%, 80% 등으로 지정한다.

 

이었다.

7. HTML 디버깅

 

이클립스에서 jdk 와, WAS 는 아파치 톰캣 버전 8.5 로 자바 웹 애플리케이션 환경설정을 하였다.

 

웹 애플리케이션을 구성하기 위해서는 다음과 같은 파일들과 디렉토리등이 필요하다.

 

서블릿은 URL 요청을 처리하는 프로그램이다. 

이클립스는 runtime 으로 설정된 WAS 에, 다음과 같은 규칙의 URL 로 서블릿을 실행하도록 설정한다. 

 

규칙은 다음과 같다.

http://localhost:8080/{프로젝트 이름}/{URL Mapping 값}