July, 2 #layout (1)

Jiwon Park·2021년 7월 2일

웹사이트 layout 작업에 필요한 css 주요속성
(css 파트에서 가장 중요)

오늘도 어김없이 이렇게 시작

html 파일 css 파일에 연동 해주고~

<link rel="stylesheet" type="text/css" href="css/style.css">

연동되었는지 확인

주로 body{background-color: red;} 사용

해보면

(눈알주의)

(으악) 잘됐음을 확인 (브라우저 전체영역을 body태그로 생각)

boxmodel : 웹사이트를 만들 때 각 레이아웃의 공백 등
구조를 빠르게 파악할 수 있도록 도와주는 일종의 옵션

구성요소

마진 (margin)
패딩 (padding)
볼더 (border)
콘텐츠 (content)

  html 
  <div class="box-model"></div>
  
  css
  .box-model{ width: 200px; 
height: 200px;
background-color: lightpink ;}

유의
1)

<div>"Hello World"</div>, 즉 div 태그 안의 콘텐츠는 Hello World.

<body> </body> 안쪽에 있는 <div></div> 는, body 태그의 콘텐츠가 됨.

<head></head> 의 콘텐츠는 <meta charset="utf-8">
	
	<link rel="stylesheet" type="text/css" href="css/style.css"> 가 됨

마진과 패딩적용

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

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

검사로 css로 적용했던 값 확인 가능.

padding과 margin은 특정 object를 옮기고자 할 때,
즉 좌표 배치작업을 진행하고자 할 때 사용하는 css의 속성.

margin과 padding을 구분짓는 요소는 border (기준을 border로 확인)
margin은 border를 기준으로 바깥쪽, boder와 content 사이 안쪽이 padding.
border가 보이지 않을 시엔 0

ex) margin-left: 100px -> 왼쪽 공백 100px (새롭게 생성된 공간에 내부 콘텐츠가 타의적으로 밀려남)

ex) padding 사용 시 주의점 -> 공간자체가 벌어지기 때문에,
벌어진 공간 +원래 width값 200px 적용 -> 선택한 영역의 크기가 달라질 수 있다.

tip )

css 주석처리
주석처리 하고자 하는 곳 마지막에 커서 두고 ctrl + /
margin, padding 다음과 같이 반복입력 번거로울 때

margin-left: 100px;
margin-top: 100px;
padding-right: ;
margin-bottom: ;
margin-top: 100px;

padding-left: 100px;
padding-top: 100px;
padding-bottomL; 
padding-right; }

margin: 100px 0 0 100px; / padding: 100px 0 0 100px
(시계방향으로 top-right-bottom-left, 0은 단위 필요없으니 기입 생략 가능)

css의 코드가 길어질수록 브라우저 속도 느려짐 주의.
용량 적게, 한줄로 간단히 작성하도록 하즈아!

덧, 여기서

다음과 같이 해주면

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

요롷게 브라우저와 테두리 사이 틈 사라짐요 / 마진과 패딩 값을 0으로 넣는 걸 디폴트로 잡기루,,

마진 병합 현상

웹사이트 레이어 작업을 할 때 가장 많이 만나게 되는 문제.

1) 형제지간에 발생하는 마진 병합 현상

코드먼저 요롷게 입력

하면 이렇게 나오는데,

여기서 다음과 같이 margin-bottom: 100px; 추가 입력하면,

이렇게 100px 공간이 들어가면서 파란색 박스가 밑으로 밀리게 된다.

여기서 또 다시 코드 입력, margin-top: 50px;}

적용하게 되면 브라우저를 새로고침 했을 때, margin-bottom, margin-top을 적용했기 때문에 공백의 크기는 150이 되어야함, 즉 블루박스가 더 밑으로 내려와야 함.

자, 그리고 새로고침을 해보즈아

짠 아무변화도 없스므니다.

검사 해보면,

margin bottom 정상적으로 적용되어 있고, 파란색영역은 margin bottom 100px의 공백을
margin top이 공유하고있다. 이것을 형제지간 발생하는 마진 병합 현상.

만약 둘중에 margin-bottom, margin-top, 형제지간의 마진에서 공백을 공유하고 있는 상황에서는 숫자가 큰 값의 우선순위가 높다. 즉, 큰값이 작은값을 병합. 공간의 크기 자체는 150이 되는 게 아니라 100px이 되는 것.

2)부모자식지간에 발생하는 마진 병합 현상

웹사이트 레이어 작업을 할 때 가장 많이 만나게되는 현상


입력해보즈아 

<div class="margin-parent">

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

</div>

이렇게 나오는데, 여기서 또 입력 (margin-top: 100px)
하면 상식적으로 파란색부분이 아래로 100px 내려와야하는데

파란색과 핑크박스도 함께 움직이쥬 ?????

이것이 바로,, 부모자식간의 마진병합현상 이라고 합디다,,
웹사이트 만들면서 가장 많이 만나게 될 것 임니다,,
같이 안움직이고싶으면 포지셔닝 써야 해유,, 그건 추후에 다루도록

디스플레이

html의 언어는 크게 2가지 진영으로 갈린다. 한쪽은 block요소 다른 한쪽은 inline요소.
두 요소의 가장 눈에 띄는 차이점은, block은 연속적으로 작성을 했을 때 y축 정렬, 즉 줄바꿈 현상이 일어났고, inline 요소는 줄바꿈 없이 x 축으로 나란히 정렬
나머지 차이점에 대해 더 알아보기루우 -

자, 다시 입력 고고

넣어보면,

block은 y축 정렬, inline은 x축 정렬로 확인됨

이상태에서, css 입력해주고

확인하면, block요소는 공간을 만들 수 있지만 inline요소는 공간을 만들 수 없다.

h1태그(block)에 공백이 생기는 이유는 앞에서, html/body에 margin과 padding을 각각 0으로 주었던 것 처럼, h1도 태생적으로 margin과 padding 값을 갖고 있다.
보다 정확하게 하고싶다면 , h1 태그 아래 margin과 padding 값을 설정
(ex. margin: 0; padding:0;)

but, span 태그를 block 요소로 활용하고 싶을때 혹은 h1 태그를 inline 요소로 바꾸고 싶을 때 활용 할 수 있는 것이 디스플레이.

h1{
	display: inline; 
    
    span{
	display: block;

각각 입력 했을 때

block은 변환 되었기때문에 x 축으로, SPAN 태그는 y축으로 변함

즉, DISPLAY 사용하면 내가 선택한 태그의 진영을 바꿀 수 있다!

버티컬 얼라인(vertical-align)

정리를 깔끔하게 할 때 사용. 크기가 큰 이미지를 기준으로 정리
vertical-align: bottom/middle/top; ///// inline요소에서만 사용 가능함!!!!!!!!!!

ex) 결과

포지션 속성

layout에서 가장 중요하고 가장 어려운 내용

2차원/3차원 으로 만들 속성을 결정하는 값. 차원에 대한 이해 필수
홈페이지는 2차원/3차원을 조합해서 만들어진다는 것 인지.

세가지 경우의 수

포지션 속성값을 갖고 있는 특징

margin-top 사용 시 부모 자식 지간에 발생하는
마진 병합 현상이 일어나는지...
1. top, right, bottom, left 속성을 사용할 수 있는지
2. 자식의 높이 값이 부모에게 영향을 주는지

static

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

css
.static-parent{
	width: 300px;
	height: 300px;
	background-color: pink;
}

.static-child{
	position: static;
	width: 150px ;
	height: 150px;
	background-color: navy;
}

1) margin-top 적용) static 상황에서 magin-top을 사용하면 부모자식지간에 마진병합현상이 일어남

2) top left bottom 사용 해도 변화 없음 : 사용 불가

3) 부모가 높잇값을 갖고 있지 않았을 때, 자식의 높잇값이 부모에 영향을 줄 수 있음.

-> position static은 2차원에 포함하는 속성값
-> 모든 html 태그는 기본적으로 position static, 즉 2차원을 디폴트 속성값.

position fixed

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

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

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


</body>
</html>

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

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

.fixed-child {
	width: 100px;
	height: 100px;
	background-color: blue;
}

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

이후 .fixed- child에 position- fixed 입력하믄

파란색 박스가 고정된채로 뒷배경이 움직임!

ex) 쇼핑몰 페이지 접속했을 때 스크롤 내릴 때 마다 따라다니는 배너광고 등은
모두 position fixed.

-> 마진 탑을 사용했을 때, 부모 자식간 마진 병합현상은 position fixed에서 일어나지 않음
-> top bottom left right 속성 사용 가능. 좌표 기준점이 브라우저 기준으로 바뀜
-> 부모가 높이 값을 갖고 있지 않았을 때 자식의 높잇값이 부모에게 영향을 줄 수 없다.
-> position fixed는 3차원!

relative

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

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



</body>
</html>

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

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

.relative-child {
	width: 100px;
	height: 100px;
	background-color: blue;
}

1) margin-top 100px; 추가

부모자식간의 병합현상이 일어나고 있음

2) top: 100px;

->이전 fixed는 브라우저 기준이였다면, relative는 최초 파란박스 있던 위치기준으로 움직임. 마진과 패딩과는 다르게(공백을 이용해서 밀려서 이동), 자기 주체적으로 움직이는 속성
->최초 있었던 위치를 기준으로 좌표 생성
->부모가 높잇값이 없었을때 자식이 높이값이 부모에게 영향
-> 2차원과 3차원 양쪽 모두의 특징을 갖고 있음. 혼합

*position absolute

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

<div class="absolute-parent">
	<div class="absolute"></div>
</div>

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

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

.absolute-child {

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