2021.07.02 css 주요속성

오늘의 강의 내용

웹사이트 레이아웃에 필요한 css의 주요속성

box model 이란 웹사이트를 만들때 각 레이아웃의 공백이라던지 구조를 빠르게 파악할수있게 해주는 일종의 옵션이다.
box model 의 구성요소 : 패딩(padding), 테두리(border), 마진(margin), 내용(content)

margin : 특정 object를 옮기고자 할때 좌표배치작업 을 설정. 위 이미지를 참고하여 border을 기준으로 바깥쪽을 말한다.

padding : 특정 object를 옮기고자 할때 좌표배치작업 을 설정. 위 이미지를 참고하여 border 와 content 사이를 말한다.
padding 사용시 주의할점으로 border 와 content 영역을 확장하는 개념이기에 내가 설정한 영역의 크기가 달라질수 있다.

위 이미지 를 참고하여 margin 과 padding 작성시 주석처리 된 부분으로 작성할수 있지만, 주석 윗 줄의 작성법으로(순서는
top, right, bottom, left 순이다.)간단히 나타내는 것이 좋다. 이유로는 줄이 길어질수록 웹사이트의 로딩시간은 길어지기 때문, 용량을 줄이는 방법이라 보면 좋다

태생적으로 html,body 태그에도 공백이 존재 한다. 그래서 기본적으로 웹사이트를 만들때

<!-- css언어 -->
html, body {
	margin: 0;
	padding: 0;
}

위소스 코드를 넣어주는것 이 좋다. 위 속성값은 모든공백을 0으로 한다는 뜻이다.

box-sizing: border-box; 을 사용 하면 margin 과 padding 을 사용하더라도 내가 설정한 영역이 달라지지 않고 설정한 값 안에서 margin 과 padding 값이 적용 된다.

마진병합 현상

마진병합 현상으로는 형제간의 마진병합 현상과 부모 자식간의
마진 병합 현상이 있다.

형제간의 마진병합 현상 예제

<!-- html언어 -->
<body>
<div class="margin-one"></div>
<div class="margin-two"></div>
</body>

<!-- css언어 -->
.margin-one {
	width: 100%;
	height: 100px;
	background-color: yellow;

	margin-bottom: 100px;
}

.margin-two {
	width: 100%;
	height: 100px;
	background-color: blue;

	margin-top: 50px;
}

위 이미지와 소스코드를 보자. 우선 소스코드를 보면 노랑색영역과 파랑색영역 각각의 여백을 준것을 볼수있다.
그런데 이미지를 보면 두공백이 따로 들어간것이 아니라 서로 공유하고 있는것을 볼수있다. 이것을 형제간의 발생하는 마진병합 현상이다.
이렇게 공유하고 있는 상황에서는 숫자가 큰값이 우선순위가 높다

부모자식간의 마진병합 현상 예제

<!-- html언어 -->
<div class="margin-parent">
	
	<div class="margin-child"></div>
	
</div>

<!-- css언어 -->
.margin-parent {
	width: 300px;
	height: 300px;
	background-color: yellow;
}

.margin-child {
	width: 150px;
	height: 150px;
	background-color: blue;

	margin-top: 100px;
}

위 이미지와 소스코드를 보자. 우선 소스코드를 보면 파랑색영역인 margin-child 만 공백을 준것을 볼수있다. 그럼 간단히 생각하면 파랑색영역만 밑으로 100px 내려온다고 생각할수있는데, 결과물을 보면 노랑색 영역하고 같이 100px 밑으로 내려온것을 볼수있다. 이같은 현상을 부모자식간의 마진병합 현상이다.
웹 사이트 제작시 가장많이 만나게 되는 현상중 하나이다.

display 속성 : 내가 선택한 태그의 진영을 바꿀수가 있다
(inline 또는 block)

위 이미지는 display 속성을 하기전 평범한 inline, block 이다

display 속성을 적용하고 나서의 모습이다.
또한,

display 속성 으로 inline, block 을 혼합하여 사용할수도 있다.

<!-- html언어 -->
<h1>Block</h1>
<h1>Block</h1>
<h1>Block</h1>

<span>Inline</span>
<span>Inline</span>
<span>Inline</span>

<!-- css언어 -->
h1 {
	display: inline-block; //inline-block 를 혼합하여 사용한것

	width: 100px;
	height: 100px;
	background-color: yellow;

	margin-top: 100px;
}

span {
	display: block;


	width: 100px;
	height: 100px;
	background-color: pink;

	margin-top: 100px;
}

주로 메뉴버튼을 만들때 사용한다.

vertical-align 속성 : 뒤죽박죽 으로 나온 결과물을 수직정렬 한다. 그러나 반드시 inline 요소에서만 사용 가능하다

위 이미지는 vertical-align 속성 적용전의 정렬이 되지 않은모습이다.

vertical-align 속성의 middle로 적용한 모습이다.

<!-- html언어 -->
<span class="inline">Inline</span>
<span class="inline-block">Inline-Block</span>
<img src="https://via.placeholder.com/200">

<!-- css언어 -->
.inline-block {
	display: inline-block;

	width: 100px;
	height: 100px;
	background-color: yellow;
}

.inline, .inline-block, img {
	vertical-align: middle;
}

vertical-align 속성을 적용한 예시의 소스코드 이다.

position 속성 : 내가 설정한 영역을 2차원으로 만들것인지,
3차원으로 만들것인지 결정하는 속성값
홈페이지는 2차원과 3차원을 조합하여 만들어진다는것을 인지 하고있어야 한다.
position 속성값으로는 static, relative, absolute, fixed 이렇게 4가지가 있다. 각속성값의 특징을 알아보자
static 의 특징 (2차원의 포함되는 속성값)

위 이미지는 static속성값이 적용되기전 모습이다

static속성값을 적용한 모습이다.

<!-- html언어 -->
<div class="static-parent">
	<div class="static-child"></div>
</div>

<!-- css언어 -->
.static-parent {
	width: 300px;
	height: 300px;
	background-color: yellow;
}

.static-child {
	position: static;

	width: 150px;
	height: 150px;
	background-color: blue;

	margin-top: 100px;
}

static속성값을 적용한 소스코드이다.
첫번째 특징으로 static속성 에서 margin-top을 사용하면
부모자식간 의 마진병합 현상이 나타난다.

두번째 특징으로 top, bottom, left, right 사용할수 없다

세번째 특징으로 부모가 높이값을 가지고 있지 않았을때 자식의 높이값이 부모에게 영향을 줄수있다

부모인 노랑색영역의 높이값이 자식의 높이값에게 영향을 받은 모습이다.

그러나 모든 html태그는 기본적으로 position-static 상태이다. 즉 모든 html태그는 2차원으로 시작한다는 뜻이다.

fixed 의 특징 (3차원 영역을 포함되는 속성값)

위 이미지는 fixed속성값을 적용하지않은 모습이다.

fixed속성값을 적용한후의 모습이다.

<!-- html언어 -->
<div class="box1"></div>

<div class="fixed-parent">
	<div class="fixed-child"></div>
</div>

<div class="box2"></div>

<!-- css언어 -->
.box1 {
	width: 300px;
	height: 200px;
	background-color: gray;
}

.fixed-parent {
	width: 300px;
	height: 300px;
	background-color: yellow;
}

.fixed-child {
	position: fixed;

	width: 100px;
	height: 100px;
	background-color: blue;
}

.box2 {
	width: 300px;
	height: 2000px;
	background-color: green;
}

fixed속성값을 적용한 소스코드이다.

첫번째 특징으로 fixed속성은 화면에 고정하는 역활을 한다. fixed속성이 적용된 이미지를 보면 화면을 드래그를 하여도 파랑색 box의 위치는 변함이없다

두번째 특징으로 fixed속성은 top, bottom, left, right 사용할수 있다. 단, 움직이는 top, left 를사용시 기준점을 브라우저 왼쪽 상단으로 한다.

세번째 특징으로 fixed속성에서 margin-top을 사용하면
부모자식간 의 마진병합 현상이 나타나지 않는다.

relative 의 특징 (2차원의 특징과 3차원의 특징을 모두 가지고있다)

relative 속성값이 적용된 모습 육안으로는 원본과 달라진것이 없다

<!-- html언어 -->
<div class="box1"></div>

<div class="fixed-parent">
	<div class="fixed-child"></div>
</div>

<!-- css언어 -->
.box1 {
	width: 300px;
	height: 200px;
	background-color: gray;
}

.relative-parent {
	width: 300px;
	height: 300px;
	background-color: yellow;
}

.relative-child {
	position: relative;

	width: 100px;
	height: 100px;
	background-color: blue;
}

relative 속성값이 적용된 소스코드 이다.

첫번째 특징으로 relative속성에서 margin-top을 사용하면
부모자식간 의 마진병합 현상이 나타난다

두번째 특징으로 relative속성은 top, bottom, left, right 사용할수 있다. 단, 원래있었던 위치를 기준으로 움직인다.

세번째 특징으로 부모가 높이값을 가지고 있지 않았을때
자식의 높이값이 부모에게 영향을 준다.

absolute 의 특징 (3차원적인 특징을 가지고있다)

absolute 속성값이 적용된 모습 육안으로는 원본과 달라진것이 없다

<!-- html언어 -->
<div class="box1"></div>

<div class="fixed-parent">
	<div class="fixed-child"></div>
</div>

<!-- css언어 -->
.box1 {
	width: 300px;
	height: 200px;
	background-color: gray;
}

.absolute-parent {
	width: 300px;
	height: 300px;
	background-color: yellow;
}

.absolute-child {
	position: relative;

	width: 100px;
	height: 100px;
	background-color: blue;
}

absolute 속성값이 적용된 소스코드 이다.

첫번째 특징으로 absolute속성에서 margin-top을 사용하면 부모자식간 의 마진병합 현상이 나타나지 않는다.

두번째 특징으로 absolute속성은 top, bottom, left, right 사용할수 있다. 단, 브라우저 을 기준으로 움직인다.

그리고 absolute속성은 top값은 부모가 어떤 position 상태인지에 따라서 좌표기준점이 달라진다.
ex) 부모 position이 3차원일때 혹은 고정 되어 있을때 좌표기준점이 부모를 기준으로 형성된다.

첫번째 특징으로 부모가 높이값을 가지고 있지 않았을때
자식의 높이값이 부모에게 영향을 주지 않는다.

위에 모든 position속성의 속성값을 한 이미지로 나타내면 아래와 같다.

< honey tip >

html파일과 css파일이 제대로 연동이 되었는지 간단히 확인 하는 방법으로

<!-- html언어 -->
<head>
	<meta charset="utf-8">
	
	<link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<!-- css언어 -->
body {
	background-color: red;
}

body 태그를 선택후 배경 컬러를 넣어 확인한다.

윈도우 기준 내가 주석 처리를 하고 싶은 줄에 가서
ctrl + / 하면 그줄은 바로 주석 처리가 된다
각각의 position 특징을 확인 할려면 부모, 자식 관계를 만들어 자식에게 position 속성값을 적용 하여 특징을 확인
top, bottom, left, right 은 margin과 다르게 자기자신이 주체가 되어 움직인다.

강의 끝난후 힘든점, 소감

이번 강의가 이번주 마지막 강의이자 제일 어려웠던 강의 같았다.
촉박한 시간에 많은 정보를 익히려고 하니 과부하 올정도였다.
오늘은 정말 특히 몸도 감기 걸렸는지 제일힘든 일정이였다. 그래도 끝마치고 나니 80%이상은 다 이해한것 같다. 나머지는 주말 내내 복습과 반복 작업을 하여야 겠다. 배우면서 느끼지만 정말 반복과 연습만이 정답인거 같다.

Author And Source

이 문제에 관하여(2021.07.02 css 주요속성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dogyeomyeo/2021.07.02-css-주요속성

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)