웹사이트 레이아웃 작업에 영향을 미치는 다양한 CSS속성들을 알아보자!

임대차법 9개월, 서울 전세 줄고 월세 늘었다.

style.css / float
float : 기본적으로 선택된 영역을 띄운다. 같은 선상에 박스들을 배치하고자 하는 기능 (단점. 브라우저 폭을 줄이면 레이어가 틀어지게 된다.)
clear : 그런 기능을 끄고자 할 때 쓰는 기능

.left-1 {
float: left;
width: 100px;
height: 150px;
background-color: blue;
}
.right-1 {
float: right
width: 100px;
height: 150px;
background-color: green;
}

전통적인 웹사이트 구조
header {
width: 100px;
height: 100px;
background-color: yellow;;
}
.left {
float: left;
width: 100px;
height: 200px;
background-color: pink;
}
.center {
float: left;
width: 300px;
height: 200px;
background-color: blue;
}
플롯을 사용 시 포지션상태는 static, relative를 사용. 순수3차원 포지션 속성값 fixed, absolute 플롯과 사용불가능
.right {
position: relative
float: right;
width: 100px;
height: 200px;
background-color: green;
}
풋터를 세개 박스 밑으로 배치하고싶다. = clear: both;
footer {
clear: both;
width: 100%;
height: 100px;
background-color: black;
}
section width: 플롯을 지정한 그 영역에 세개의 위드값보다 크거나 같아야 한다. 그보다 작으면 레이어가 틀어진다.
*플롯을 사용한 영역은 그 영역의 높이값이 부모에게 영향을 주지 않는다
section (레이어가 틀어지지 않음) {
width: 1400px; (고전값)
height: 100px;
background-color: orange;
}

float 실무팁
.left-2 {
float: left;
width: 100px;
height: 150px;
background-color: yellow;
}
.right-2 {
float: right;
width: 100px;
height: 150px;
background-color: blue;
}
footer {
width: 100%;
height: 100px;
background-color: black;
.clearfix {
clear: both;
}

박스 영역을 벗어난 오브젝트를 감출 때 :overflow: hidden;
벗어난 영역 y축에 어떠한 내용물을 알고 싶을 때 :overflow-y: scroll;
.over-box {
overflow: hidden;
width: 200px;
height: 200px;
background-color: yellow;
}

.left-2 {
float: left;
width: 100px;
height: 150px;
background-color: yellow;
}
.right-2 {
float: right;
width: 100px;
height: 150px;
background-color: blue;
}
footer {
width: 100%;
height: 100px;
background-color: black;
.clearfix {
clear: both;
}
section {
overflow: hidden;
width: 800px;
background-color: orange;
}

진행방향을 바꾸고 싶다 flex-direction: row; / column;
역순 reverse
flex-flow :디렉션과 랩을 동시 입력
x축 정렬작업 justify-content: flex-start;
오른쪽 정렬 justify-content: flex-end;
정가운데 정렬 justify-content: center;
세개 영역에 균일한 간격 justify-content: space-between; / around;
Y축 수직축 영역 align-item: flex-start;
가장 끝으로 align-item: flex-end;
중앙 align-item: flex-center;
flexbox.hlep사이트 다양한 플렉스박스 경우의수 확인

flex
.container {
display: flex;
flex-flow: row wrap
justify-content: space-between;
align-items: flex-start;
width: 1000px;
height; 500px
border: solid 10px red:
}
.item {
width: 200px;
height: 300px;
}
.one{
height: 100px;
background-color: yellow;
}
.two{
height: 200px;
background-color: blue;
}
.three{
width: 900px;
height: 300px;
background-color: orange;
}

실무에서 가장 많이 쓰는 중앙정렬
중앙정렬과 관련 궁금한 점 66 css ceter frick 99
1. x축으로 중앙정렬 margin: 0 (상하) 100px (좌우) /margin: 0 (상하) auto (자동으로 좌우맞춤)
2. 포지션과 결합(공간의 크기가 바뀌면 수정해야함) position: relative; left: 50%; margin-left: -150px;

.center-1{
width: 300px;
height: 300px;
background-color: yellow;
}

.center-1{
width: 300px;
height: 300px;
background-color: blue;
left: 50%
margin-left; -150px;
}

실습
1.(버튼값o)글자간 위아래 영향을 미치는 66 line-height 99 어떠한 폰트 서체를 사용하나에 따라 미세하게다름
2.(버튼값x) li태그와 a태그 사이에 위쪽 아래쪽 공백을 똑같이 생성 padding-top: 15px; padding-bottom: 15px;
html, body {
margin: 0;
padding; 0;
}
ul {
list-style; none;
}
a {
color: #000000;
text-decoration: none;
}
.menu ul {
overflow: hidden;
background-color: pink;
}
버튼값이 있을때
.menu li [
float: left;
width: 100px;
height: 50px;
background-color: yellow;
border: solid 1px red;
text-align: center
line-height: 50px;
}
버튼값이 없을때 (li태그와 a태그 사이에 위쪽 아래쪽 공백을 똑같이 생성)
.menu li [
float: left;
width: 100px;
background-color: yellow;
border: solid 1px red;
text-align: center
padding-top: 15px;
padding-bottom: 15px;
}

여백에 마우스모양이 ㅅ손모양
dorder-top 위쪽영역에 대해서만 박스
.menu li [
float: left;
width: 100px;
height: 50px;
background-color: yellow;
border-top: solid 1px red;
border-bottom: solid 1px red;
border-left: solid 1px red;
}
마지막줄 볼더 줄
.menu li:last-child {
border-right: solid 1px red;
}

.menu li a {
display: block;
text-alian: center;
padding-top: 15px;
padding-bottom: 15px;
}
색깔변경
.menu li a:hover {
color: blue;
}

카카오
초기화작업할때 ul태그에도 마진과 패딩값 0 지정
ul {
list-style; none;
margin: 0;
padding: 0;
}
하나의 리스트 전체를 a태그로 감싸기
.kakao-lists li a {
display: block;
}
.kakao-lists li img,
.kakaio-lists li .kakao-info{
vertical-align: middle;
}
.kakao-lists li img {
border-redius: 20px;
margin-right: 10px;
}
텍스트 이미지 옆으로 옮기기
.kakao-lists li .kakao-info {
display: inline-block;
}
x축 기준으로 정가운데
.kakao-lists li .kakao-info h3 {
margin: 0:;
}
.kakao-lists li .kakao-info spen {
font-size: 14px;
color: #c8c8c8;
}
리스트 줄 공백간격
.kakao-lists li a {
margin-bottom: 20px;
}
이미지 옆 공백
.kakao-lists li a {
display: block;
padding-left: 25px;
}

네이버
.living-lists li {
width: 750px;
background-color: orange;
}
x축정렬
.living-lists .image-link,
.living-lists .info-link {
display: inline-block;
vertical-align: middle;
}
.living-lists .image-link {
margin-right: 21px;
}
.living-lists .info-link {
width: 512px;
}

네이버 뉴스페이지 상단영역 설계도면 레이아웃작업
.title-wrap {
border-top: solid 2px #000000;
border-bottom: solid 1px #000000;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 20px;
}
.title-wrap h3 {
margin-bottom: 20px;
}
버튼영역 레이아웃 작업
.title-wrap .btn-wrap {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-cintent: space-between;
align-itme: center;
aling-content: stretch;
}

2) 학습내용 중 어려웠던 점
플렉스는 또 뭔데요 제가 아는 플렉스는 FLEX해보렸지 모야~~ 이건데

3) 해결 방법
CSS 레이아웃에 좀 공부를 해야할 것 같습니다/

4) 학습소감
집에 가고싶어요 오늘 동아리 하는데 동아리가 이렇게 하고 싶을 줄은 몰랐어요 허구헌날 보석십자수만 하고 있는데 그게 너무 하고싶어요 아 이거 적으면 안되겠죠 레이아웃 너무 어려워요