Dev log - 5, CSS 레이아웃 #1

박강산·2021년 7월 2일

대구AI스쿨 - 개발일지

목록 보기

5/44

학습한 내용

CSS 레이아웃 속성 1 - 박스 모델

margin, border, padding, content
각 레이아웃의 공백이나 구조를 파악할 수 있도록 도와주는 일종의 옵션
margin 은 border 를 기준 바깥쪽 영역
border 는 지정한 영역의 테두리
padding 은 content와 border 사이 영역 공간을 추가
content 는 열린 태그와 닫힌 태그 사이 내용과 태그를 의미
내용물이 움직이는 것이 아닌, 빈 공백이 생겨서 타의적으로 움직임

HTML 문서

<body>
	<div class="box-model">
		Hello World
	</div>	
</body>

CSS 문서

.box-model {
	width: 200px;
	height: 200px;
	background-color: yellow;
	border: solid 10px red;

	margin-left: 100px;
	padding-left: 100px;
}

한번에 여러 방향의 공간을 추가할 때는 축약하면 됨, CSS 분량이 길어지면 로딩이 길어짐
차례대로 top, right, bottom, left 순서

CSS 문서

.box-model {
	width: 200px;
	height: 200px;
	background-color: yellow;
	border: solid 10px red;

	/*margin-left: 100px;
	padding-left: 100px;*/

	margin: 100px 0 0 100px;
	padding:  100px 0 0 100px;
}

숫자 하나만 입력시 모든 방향을 숫자 만큼 적용
기본적으로 html, body 태그는 여백이 있기에 0 적용 해줘야 함.

CSS 문서

html, body {
	margin:  0;
	padding:  0;
}

.box-model {
	width: 200px;
	height: 200px;
	background-color: yellow;
	border: solid 10px red;
}

box-sizing 을 이용하면, 레이아웃 영역의 크기를 고정, padding 으로 영역이 커지지 않음

CSS 문서

html, body {
	margin:  0;
	padding:  0;
}

.box-model {
	box-sizing: border-box;
	
	width: 200px;
	height: 200px;
	background-color: yellow;
	border: solid 10px red;
    
    padding:  100px 0 0 100px;*/
}

CSS 레이아웃 속성 2 - 마진 병합

margin 끼리 같은 여백을 공유함
형제 간 마진 병합(숫자가 큰 값이 우선 순위가 높음)

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 문서

<body>
  <div class="margin-parent">
      <div class="margin-child"></div>
  </div>
</body>

CSS 문서

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

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

	margin-top: 100px;
}

CSS 레이아웃 속성 3 - 디스플레이

display 를 통해 inline 과 block 속성을 부여할 수 있음
예시로 block 속성인 h1 태그를 inline 으로 속성 변경 가능

HTML 문서

<body>
	<h1>Block</h1>
	<h1>Block</h1>
	<h1>Block</h1>

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

CSS 문서

h1 {
	display: inline;

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

	margin-top: 100px;
}

span {
display: block;

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

	margin-top: 100px;
}

block, inline 두개의 속성을 부여할 때는 inline-block 사용

CSS 문서

h1 {
	display: inline-block;

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

	margin-top: 100px;
}

CSS 레이아웃 속성 4 - vertical-align

vertical-align 을 통해 inline 레이아웃의 위치를 정렬(block 레이아웃은 안 됨)
top 은 제일 큰 이미지 위 기준, bottom 은 제일 큰 이미지 밑 기준, middle 은 제일 큰 이미지 중간 기준

HTML 문서

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

CSS 문서

.inline-block {
	display: inline-block;

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

}

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

CSS 레이아웃 속성 5 - position

레이아웃 부분에서 가장 중요한 내용
3차원 속성을 지님 / X, Y, Z축을 사용함
3가지를 고려해야함
static 속성 (모든 HTML 태그의 기본 설정, 2차원)

margin-top 마진 병합 현상 일어남
top, right, bottom, left 속성 사용 불가
자식의 높이 값이 부모에게 영향 줌

HTML 문서

<body>
	<div class="static-parent">
		<div class="static-child"></div>
	</div>	
</body>

CSS 문서

.static-parent {
	width: 300px;
	/*height: 300px;*/
	background-color: yellow;
}

.static-child {
	position: static;

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

	/*margin-top: 100px;*/
	top: 100px;
}

fixed 속성 (레이아웃을 화면에 고정, 3차원)

margin-top 마진 병합 현상 일어나지 않음
top, right, bottom, left 속성 사용 가능 (브라우저 왼쪽 상단 기준)
자식의 높이 값이 부모에게 영향을 주지 않음

HTML 문서

<body>
	<div class="box1"></div>

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

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

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;

	/*margin-top: 100px;*/
	top: 100px;
}

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

relative 속성(자기가 주체, 2차원 + 3차원)

margin-top 마진 병합 현상 일어남
top, right, bottom, left 속성 사용 가능(최초 위치 기준)
자식의 높이 값이 부모에게 영향 줌

HTML 문서

<body>
	<div class="box1"></div>
	<div class="relative-parent">
		<div class="relative-child"></div>
	</div>
</body>

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;

	/*margin-top: 100px;*/
	top: 100px;
}

absolute 속성(3차원)

margin-top 마진 병합 현상 일어나지 않음
top, right, bottom, left 속성 사용 가능 (브라우저 왼쪽 상단 기준, 부모가 position 속성 중 static 속성을 제외한 다른 속성을 지니면 부모 기준)
자식의 높이 값이 부모에게 영향 주지 않음

HTML 문서

<body>
	<div class="box1"></div>
	<div class="absolute-parent">
		<div class="absolute-child"></div>
	</div>
</body>

CSS 문서

.box1 {
	width: 300px;
	height: 200px;
	background-color: gray;
}

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

.absolute-child {
	position: absolute;

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

	/*margin-top: 100px;*/
	top: 100px;
}

CSS 문서 (부모 position 변경)

.box1 {
	width: 300px;
	height: 200px;
	background-color: gray;
}

.absolute-parent {
	position: absolute;

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

.absolute-child {
	position: absolute;

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

	/*margin-top: 100px;*/
	top: 100px;
}

학습한 내용 중 어려웠던 점 또는 해결못한 것들

margin, padding 의 축약 크기 순서를 조금더 기억해야겠음
position 속성에 대한 여러 경우의 수에 대해 스스로 정리를 해야될 것 같음

해결방법

멘토님의 설명대로 축약 크기 순서는 시계 방향으로써 12시를 기준으로 삼는다는 것을 잘 기억하도록 노력함.
position 속성 중 fixed를 제외한 나머지 속성의 경우를 실험해보고, 익숙해지기 위해서 실제 웹사이트들의 여러 경우의 수를 확인해보고 기입해봄.

학습 소감

오늘은 CSS 레이아웃 속성들을 배웠는데, position 에 대한 부분에서 경우의 수가 48가지나 있다는 얘기를 듣고 좀 놀랐지만, 경우의 수를 잘 이해하고 쓸 수 있다면 레이아웃을 완벽하게 마스터할 수 있다는 것이기 때문에 앞으로 있을 CSS 공부를 위해 혼자 복습을 좀 해봐야될 것 같음

박강산

안녕하세요. 맡은 업무를 확실하게 수행하는 웹 개발자가 되기 위하여 끊임없이 학습에 정진하겠습니다.

Dev log - 5, CSS 레이아웃 #1

대구AI스쿨 - 개발일지

학습한 내용

CSS 레이아웃 속성 1 - 박스 모델

CSS 레이아웃 속성 2 - 마진 병합

CSS 레이아웃 속성 3 - 디스플레이

CSS 레이아웃 속성 4 - vertical-align

CSS 레이아웃 속성 5 - position

학습한 내용 중 어려웠던 점 또는 해결못한 것들

해결방법

학습 소감

Dev log - 4, CSS 기초 #2

Dev log - 6, CSS 레이아웃 #2

0개의 댓글