24.01.29~30 <css 레이아웃>, <반응형 웹 퍼블리싱>
✅다시 풀기
[flexbox]
15.음악플레이어 실습
16.미니프로젝트: 항공 실습,
19. flexbox 안에서 포지셔닝하기
[반응형 웹 퍼블리싱]
3. 이노
🎁 7. flexbox 총정리
1) 방향
flex-direction의 기본값은 기본축이 ▶이 방향으로 향하는 row이다.
값을 column으로 바꾸면 기본축의 방향이 🔽으로 변한다.
2) 기본축 정렬
justify-content를 사용하며, 기본값은 왼쪽에 배치되는flex-start이다.
3) 교차축 정렬 (*17번째 강의 사진참고)
align-items을 사용하며, 기본값은 늘려서 배치하는 stretch이다.
4) 요소 넘칠 때
flex-wrap:wrap 을 사용해 교차축 방향으로 넘어가서 배치되도록 한다.
5) 간격
gap:0px로 사용하며 숫자를 쓰면, 모든 방향의 간격을 지정 가능하다.
세로,가로 순서대로 숫자를 두 개 쓰면 세로, 가로 간격을 지정할 수 있다.
6) 요소 채우기
-1. flex-grow : 요소를 '늘려서' 채우기
기본값은 0이며, 값이 클수록 많이 늘어난다.
-2. flex-shrink : 요소를 '줄여서' 가득 채우기
기본값은 1이며, 0으로 지정하면 크기가 줄어들지 않는다.
값이 클수록 많이 줄어든다.
🎁 8. 인라인 안에서 flexbox 만들기
.new-link {
display: inline-flex;
align-items: center;
gap: 4px;
}<chapter 3.Grid>
🎁 1. grid란?
1) 정의
한 방향으로만 배치되는 flexbox와 달리, 2차원으로 가로 세로 두 방향 모두 배치할 수 있는 방법으로, 바둑판처럼 나눠놓고 그 안에 요소를 하나씩 배치 가능하다. 요소는 위에서 아래로/ 왼쪽에서 오른쪽 방향으로으로 배치한다.
<용어>
- grid line : 각 칸을 나누는 줄들
- grid cell : 요소를 배치할 수 있는 네모난 칸
2) 배치 가능 종류
-1. 격자 나누기 (grid-template-rows/columns)
-2. 간격 (gap)
-3. 크기 미리 정하기 (grid-auto-rows/columns)
-4. 원하는 위치에, 여러칸에 걸쳐 배치 (grid-row/column, span)
-5. 이름으로 배치 (grid-area, grid-template-areas)
🎁 2. 격자 나누기 (grid-template-rows/columns)
1) 격자를 나누기
.container {
border: 5px dashed #cacfd9;
width: 500px;
height: 500px;
display: grid;
grid-template-columns: 100px 300px 100px;
}- 태그를 그리드로 만들고, (모든 스테이션을 감싸는 클래스에 적용시키기)
- 총 500px을 1:3:1 비율로 columns를 나눈 것이다.
grid-template-rows: 200px 200px 100px;추가하기
2) 줄이는 법
세로 -> 가로 순서 (rows -> columns), 한줄로도 쓸 수 있다.
grid-template:
200px 200px 100px /
100px 300px 100px
}🎁 3. 유연한 크기 & 유용한 함수들
1) 크기를 비율로 지정
전체를 감싸는 container의 너비가 변할 경우? width:100%로 바꾸면, 그리드의 크기는 고정이기에 웹의 크기를 줄여 컨테이너가 작아진 경우 요소가 삐져나오고, 웹의 크기를 늘려 컨테이너가 커진 경우 공간이 남게 된다.
따라서, flexbox처럼 크기를 유연하게 지정하려면 px 대신 fr(fraction, 부분/일부)을 사용해 비율을 정해준다. fr로 지정하면 창의 너비가 바뀌어도 비율을 유지시켜준다. row/columns 모두 가능하다.
.container{
--생략--
grid-template:
1fr 1fr 1fr /
1fr 1fr 1fr;
}
2) 크기에서 최대/최소값 정하는 법
너비를 최소 200px, 최대 300px로 유연하게 하는 코드 작성
.container{
--생략--
grid-template:
1fr 1fr 1fr /
minmax(200px 300px) minmax(200px 300px);
}minmax 안에 fr 사용. minmax에서는 최댓값에서만 fr을 사용 가능.
.container{
--생략--
grid-template:
1fr 1fr 1fr /
minmax(200px 1fr) minmax(200px 1fr);
}3) 너비가 똑같은 column 6개로 나누기
-1. 1fr을 여러번 써서, 코드가 간결하지 않다.
.container{
--생략--
grid-template:
1fr 1fr 1fr /
1fr 1fr 1fr 1fr 1fr 1fr ;
}-2. repeat 함수를 사용해 코드를 줄여 간편하게 만듦.
.container{
--생략--
grid-template:
1fr 1fr 1fr /
repeat(6, 1fr) ;
}4) 예제
1️⃣ 세 번 반복해서 쓴 값을 함수를 활용해서 간단하게 만든다.
.stations {
display: grid;
grid-template: repeat(3, 240px) / repeat(3, 240px);
}2️⃣ 각 셀의 크기를 화면 너비에서 1 : 1 : 1 이 되도록 유연하게 바꾼다.
.stations {
display: grid;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}3️⃣ 셀의 최소 크기는 너비 200px, 높이 200px이 되도록 바꾼다.
.stations {
display: grid;
grid-template: repeat(3, minmax(200px, 1fr)) / repeat(3, minmax(200px, 1fr));
}🎁 4. 간격 (gap)
flexbox의 사용법과 동일하다.
margin 순서와 똑같이 세로/가로 순서로 쓴다.
.container {
border: 5px dashed #cacfd9;
width: 500px;
height: 500px;
display: grid;
grid-template:
repeat(3, 1fr) /
repeat(3, 1fr);
gap: 16px 32px;
}
🎁 5. 크기 미리 정하기 (grid-auto-rows/columns)
상황) row 3개, column 3개로 나눈 후, 간격도 주었는데, 요소가 9개보다 많아 배치가 이상하다.
row, column의 크기를 모두 정하는 것이 아닌, column 3개만 정한 후 row는 알아서 배치되었으면 좋겠는 경우!
1) gird-template에서 row의 크기를 명시적으로 정하지 않았을 때, grid-auto-rows의 정해놓은 크기를 쓴다.
.container {
--생략--
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px ;
gap: 16px 32px;
}
grid-auto-rows: 50px 100px 200px ; 의 값을 여러개 쓰는 경우, 높이를 번갈아가며 적용도 가능.
💨 auto rows 뿐만 아니라 auto columns도 가능하다.
2) 예제
다섯 로우의 크기를 정하지 않고, 기본적으로 로우의 높이가 160px이 되도록 코드를 수정해 주세요.
각 셀 사이의 여백은 32px이 되도록 해 주세요.
1️⃣ 다섯 로우의 크기를 정하지 않고, 기본적으로 로우의 높이가 160px이 되도록 코드를 수정
.chart{
--생략--
grid-template: repeat(5, 48px) / repeat(2, 1fr);
}이 코드에서 row의 크기만 정하지 않는 것이니까 column만 남긴다. 그러면 뒤의 repeat(2,1fr)만 남고, auto 160px를 써준다.
🔽
.charts {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 160px;
}2️⃣ 각 셀 사이의 여백은 32px
gap: 32px 추가하기
🎁 6. 원하는 위치에, 여러칸에 걸쳐 배치 (grid-row/column, span)
상황) row 4개, column 5개를 설정되어있는 상태에서, 그리드 라인으로 위치를 옮겨보기.
그리드에서는 '그리드 라인'(개발자 도구에서 확인 가능)을 기준으로 위치를 정한다. 테두리에 해당하는 맨 첫 번째 라인부터 1번, 2번.. 순이고 테두리에 해당하는 맨 마지막 라인부터 -1번, -2번.. 순이다. 따라서 1번=-6번, 2번=-5번이다.
💨 코드는 개발자도구의 element도 가능하며, css 파일에서 클래스 밑에 써주어도 된다.
1) 그리드 라인으로 단순히 green div의 위치만 바꾸기
-1. green div 클릭 -> element.style 코드 작성 
해석 : 3번째 row라인과 2번째 column 라인이 교차하는 지점에 배치됨.
2) 그리드 라인으로 green div를 여러칸에 배치 
해석 : 3번 row 라인부터 5번 row 라인까지 걸쳐서 배치 / 2번 row 라인부터 -2번(=5번) row 라인까지 걸쳐서 배치 
3) span으로 배치할 크기를 정하기
해석 : 몇 칸 만큼 공간을 차지할지 정해준다. 결과는 위의 '2)'과 같다.
4) 예제
3번 사각형을 밑 부분을 꽉차게 배치하기
-1. 그리드라인으로 배치
.nemo {
grid-column: 1 / 3;
}
.nemo {
grid-column: 1 / -1;
}
-2. 셀의 크기로 배치
.nemo {
grid-column: 1/span 2;
}
🎁 7. 이름으로 배치 (grid-area, grid-template-areas)
위에서와 같이 그리드 라인으로 보는 것이 아닌, 요소 한개마다 이름을 정해주어, 그 이름으로 배치하는 방법이다. 비교적 간단한 배치에서는 라인보다는 이름을 붙이는게 더욱 간편하다.
1) 각각 이름을 붙여주기
.red {
background-color: #e46e80;
grid-area: r;
}
.green {
background-color: #32b9c1;
grid-area: g;
}
.blue {
background-color: #5195ee;
grid-area: b;
}2) 컨테이너에 어떻게 배치할지 코딩하기
.container {
--생략--
display: grid;
grid-template-areas:
"r g"
"r b";
}
- 만약, 칸을 비우고싶다면 이름 대신
.을 쓰면 그 칸은 비워진다. - 같은 것을 또 배치하고 싶다면 위와같이 한번 더 써주면 된다. (중복0)
3) 정리
<반응형 웹 퍼블리싱>
🎉 <chapter 1. 반응형 웹>
1) 정의
반응형 웹 디자인(responsive web design) : 브라우저 사이즈에 맞춰 레이아웃이 바뀌는 것
ex. 웹의 크기가 full이면 가로로 설명을 써놓고, 웹의 크기가 small하면 세로로 설명이 쓰여지는 것.
장점 : 따로 모바일이나 태블릿 버전을 안 만들어도 된다는 장점이 존재.
2) 실습
h1 {
font-size: 24px;
}
p {
font-size: 16px;
}
@media(min-width:768px) {
h1 {
font-size: 36px;
}
p {
font-size: 24px;
}
}해석 : 브라우저의 가로 길이가 768px 이상일 때는(768px가 되는 순간) 이와같은 폰트 사이즈를 따르라는 것.
💨 @media : 미디어 쿼리
🎉 <chapter 2. 부트스트랩>
1) 정의
트위터의 개발자가 오픈소스로 제공해주는 html, css, javascript 즉, frontend framework이다. (미리 만들어져있는 코드)
번역된 부트스트랩 사이트도 존재.
2) 사용법
-1. 웹 상에서 부트스트랩 css 파일을 받아오고, 웹상에서 필요한 자바스크립트 파일들을 받아오기 위해/ style.css 파일을 연결해주는 link 태그 위, body 태그의 끝에 붙여넣어준다.
(혹은 download를 통해 파일들을 직접 연결시켜주어도 된다.)
-2. components 항목에서 넣고싶은 것을 찾고, 코드를 복사해 확인한다.
3) 부트스트랩의 그리드 시스템
-1. 구성원 : 컨테이너, 행(row), 열(column)
-2. 기본 규칙
<div class="row">행은 꼭 컨테이너<div class="container">안에 넣기.<div class="col">열은 꼭<div class="row">행 안에 넣기. 오직 열만 행의 직속 자식이 될 수 있다.- 콘텐츠(우리가 그리드에 넣고 싶은 내용)는 꼭
<div class="col">열 안에 넣기.
4) 사용법
-1. 부트스트랩의 그리드에는 한 줄에 기본적으로 12칸이 존재한다. 만일, 한 줄을 세 등분 하고싶다면, 네 칸을 차지하는 column을 세 개 쓰면 된다. 이는 <div class="col-4"> 로 표현한다.
<div class="row">
<!-- 1:1:1 비율로 3등분 -->
<div class="col-4 first">first</div>
<div class="col-4 second">second</div>
<div class="col-4 third">third</div>
</div>-2. 1:5 비율을 쓰고싶을 경우
<div class="row">
<!-- 1대 5 비율 -->
<div class="col-2 first">first</div>
<div class="col-10 second">second</div>
</div>-3. 12칸을 넘어간다면?
💨 새로운 줄로 넘어가게 된다.
<body>
<div class="container">
<div class="row">
<div class="col-3 first">first</div>
<div class="col-7 second">second</div>
<div class="col-4 third">third</div>
<div class="col-5 fourth">fourth</div>
</div>
</div>
</body>-4. 12칸으로 정한 이유
나눠지는 경우가 여러가지이기 때문에 편리하다.
-5. 💥중첩(nesting)
열을 또 여러 열로 나누는 것이다.
중첩을 하기 위해서는 꼭 <div class="col-6">열 안에 새로운 행<div class="row">을 써야만 한다.
예시) 8칸으로 나누고싶을 경우,처음에는 col-6을 두 개 써 6등분을 하고, 그 안에서 col-3을 하여 4등분을 하면 8칸이 생긴다.
<body>
<div class="container">
<div class="row">
<div class="col-6">
<div class="row"> <!-- 중첩을 위한 새로운 행 -->
<div class="col-3 first">1</div>
<div class="col-3 second">2</div>
<div class="col-3 third">3</div>
<div class="col-3 fourth">4</div>
</div>
</div>
<div class="col-6">
<div class="row"> <!-- 중첩을 위한 새로운 행 -->
<div class="col-3 first">5</div>
<div class="col-3 second">6</div>
<div class="col-3 third">7</div>
<div class="col-3 fourth">8</div>
</div>
</div>
</div>
</div>
</body>💡 실습 해설풀이에서 몰랐던 부분 정리
-
현재 부트스트랩을 많이 사용하지는 않는다.
간단한 웹사이트 제작에는 쓰지만, 정형화될 가능성이 있기 때문이다. -
인라인 블록 사이의 간격 없애는 법
html 코드에서 두 클래스를 한 줄에 붙여 써주면 된다. -
기본적인 margin
모든 p태그가 다 그런지는 모르겠지만, margin-bottom이 설정되어있다. 이것을 없애주려고
margin:0을 주는 것. -
내비게이션바에 로고를 내리고 싶을 때
내비게이션의 높이만큼 line-height: 66px; 를 주니까 로고(텍스트)가 세로로 가운데 정렬이 된다. -
href에 많이 쓰는 a 태그에는 기본적으로 텍스트에 '밑줄'이 그어져 있다.
이것을 지우려면 text-decoration: none을 하면 된다. -
포함된 모든 요소를 '세로 가운데 정렬' 해주기
-1. html 파일에 요소들 바로 앞에class="helper"만들기
<div class="carousel-item item1 active">
<div class="helper"></div><div class="intro">
<h2>음악 배워보세요</h2>
<h3>멋진 뮤지션들이 주변에 있습니다.</h3>
<a href="#">수업 찾기</a>
</div>
</div>-2. css 코드로 가서, .helper 생성 후 .helper 와 원래 클래스인 intro에 코드 작성
<div class="carousel-item item1 active">
<div class="helper"></div><div class="intro">
<h2>음악 배워보세요</h2>
<h3>멋진 뮤지션들이 주변에 있습니다.</h3>
<a href="#">수업 찾기</a>
</div>
</div>.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}.intro {
display: inline-block;
vertical-align: middle;
}-
'가로 가운데 정렬'
intro는 inline 블록이기 때문에 부모인 carousel-item에다가text-align:center을 해주면 된다.첫 번째 버튼 창이 끝났으며, 아래에도 똑같이 helper를 넣어주면
두 번째, 세 번째 창도 똑같이 가운데 정렬이 되어있다. -
이미지는 원래 inline 요소이다.
-
이미지와 이름의 '수직 가운데 정렬'
.course .info .lecture img,
.course .info .lecture .name {
vertical-align: middle;
}✅ 오늘 한 일
css 레이아웃 강의 완료 😍
반응형 웹 퍼블리싱 강의 완료 😍
웹사이트 주제 생각해보기
