[부스트코스]{1. 웹 프로그래밍 기초}(3. CSS)_2. CSS style 변경 & element가 배치되는 방법! CSS layout

CSS 기본 스타일 변경 하기

 

font 색상 변경	color : red; color : rgba(255, 0, 0, 0.5); color : #ff0000;   //16진수 표기법으로 가장 많이 사용되는 방법이죠.
font 사이즈 변경	font-size : 16px; font-size : 1em;   (상속 받은 부모의 크기 기준으로 n배)
배경색	background-color : #ff0; background-image, position, repeat 등 background : #0000ff url(“.../gif”) no-repeat center top; //한 줄로 정의도 가능
글씨체/ 글꼴	font-family:"Gulim"; font-family : monospace;

 

 

 

#예시

ID 선택자가 최우선으로 적용된 모습(배경색 violet), 그 다음으로 우선되는 class 선택자에 의한 적용(글자색이 pink) 위에 반영된 것임을 알 수 있음

 

---

 

CSS layout

 

#엘리먼트가 배치되는 방식

엘리먼트를 화면에 배치하는 것을 layout 작업이라고도 하고, Rendering 과정이라고도 한다.

기본 엘리먼트는 위에서 아래로 배치되는 것이 기본이다. 하지만 웹사이트의 배치는 다양하게 표현 가능해야 하므로, 이를 다양한 방식으로 배치할 수 있도록 다양한 속성을 활용한다.

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

 

#display: block

display속성이 block이거나 inline-block인 경우 그 엘리먼트는 벽돌을 쌓는 것 처럼 블록을 가지고 쌓인다.

 

#display: inline

display 속성이 inline인 경우는 우측으로, 그리고 아래쪽으로 빈자리를 차지하며 흐른다.

높이와 넓이를 지정해도 반영이 되지 않는다.

 

div 자식들 모두 블록 처럼 쌓인다.

div 자식들 모두 옆으로 흐르듯 배치된다.

 

#position: static, relative, absolute

1. position 속성으로 특별한 배치를 할 수 있습니다.

position 속성은 기본 static이다. 그냥 순서대로 배치된다.

2. absolute는 기준점에 따라서 특별한 위치에 위치합니다.

top / left / right / bottom 으로 설정한다. 기준점을 상위 엘리먼트로 단계적으로 찾아가는데 static이 아닌 position인 엘리먼트가 기준점이 된다.

3. relative는 원래 자신이 위치해야 할 곳을 기준으로 이동합니다.

top / left / right / bottom로 설정한다.

4 fixed는 viewport(전체화면) 좌측, 맨 위를 기준으로 동작합니다.

각 position 값에 따른 다른 배치 모습

 

#margin

margin으로 배치가 달라질 수 있다.

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

 

#float

float 속성으로 원래 flow에서 벗어날 수 있고 둥둥 떠다닐 수 있게 된다.

일반적인 배치에 따라서 배치된 상태에서 float는 벗어난 형태로 특별히 배치된다.

따라서 뒤에 선언된 block엘리먼트가 float 된 엘리먼트를 의식하지 못하고 중첩돼서 배치되게 된다.

inherit: 부모 요소에서 상속 left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름. right: 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시된다. none - 요소를 부유시키지 않음 left와 right를 통해 부유속성을 지정시 display는 무시된다. (none은 제외) 또한 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라진다.

float의 속성은 이런 특이성 때문에 웹사이트의 전체 레이아웃 배치에서 유용하게 활용된다.

float를 이용하여 웹 페이지 레이아웃을 짠 예시 

 

#box-model

블록 엘리먼트의 경우 box의 크기와 간격에 관한 속성으로 배치를 추가 결정한다.

content<padding<border<margin

CSS box model

 

#엘리먼트의 크기

block엘리먼트의 크기는 기본적으로는 부모의 크기만큼을 가진다.

예를 들어, width:100%는 부모의 크기만큼을 다 갖는 것과 같다.

 

#box-sizing과 padding

box-sizing	박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성
	content-box : 콘텐트 영역을 기준으로 크기를 정합니다. border-box : 테두리를 기준으로 크기를 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다.

padding 속성을 늘리면 엘리먼트의 크기가 달라질 수 있다. box-sizing 속성으로 이를 컨트롤 할 수 있다.

box-sizing 속성을 border-box로 설정하면 엘리먼트의 크기를 고정하면서 padding 값만 늘릴 수 있다.

div 에서 padding 으로 크기를 늘리면 border-box는 원래 정의된 박스크기(100x100)를 유지하지만 content-box로 설정된 박스는 padding에 따라 크기가 커진다.

 

 

#추가 개념: padding과 margin 비교하기

박스의 가로 크기: width/ 세로 크기: height

padding(p) 값과 margin(m) 값을 달리하여 보여주는 예시

 

 

#layout 구현 방법

전체 레이아웃은 float를 잘 사용해서 2단, 3단 컬럼 배치를 구현한다. 최근에는 css-grid나 flex 속성 등 layout을 위한 속성을 사용하기 시작했으며 브라우저 지원범위를 확인해서 사용해야한다.

특별한 위치에 배치하기 위해서는 position absolute를 사용하고, 기준점을 relative로 설정한다. 

네비게이션과 같은 엘리먼트는 block 엘리먼트를 inline-block으로 변경해서 가로로 배치하기도 한다.

엘리먼트안의 텍스트의 간격과 다른 엘리먼트간의 간격은 padding과 margin 속성을 잘 활용해서 위치시키면 된다.

 

 

 

 

#참고 자료

https://ofcourse.kr/css-course/float-%EC%86%8D%EC%84%B1

CSS float 속성 - ofcourse

https://www.w3schools.com/css/css_boxmodel.asp

CSS Box Model

https://ofcourse.kr/css-course/margin-padding-%EC%86%8D%EC%84%B1

CSS margin,padding 속성 - ofcourse

 

 

 

#부스트코스 강의

https://www.edwith.org/boostcourse-web/lecture/16675/

[LECTURE] 4) CSS 기본 Style 변경하기 : edwith

https://www.edwith.org/boostcourse-web/lecture/16677/

[LECTURE] 5) Element가 배치되는 방법(CSS layout) : edwith