웹 프로그래밍 #11
💻 학습 내용
💛 pc버전 x축 정렬, 모바일 버전 y축 정렬 되는 메뉴버튼 만들기
.media-menu{
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
align-items: center;
width: 700px;
background-color: pink;
}
.media-menu a{
text-decoration: none;
color: black;
}
.media-menu li {
width: 150px;
background-color: yellow;
border: solid 5px red;
padding: 5px 15px;
text-align: center;
}
display : flex ;
: 무조건 1행 수평으로 정렬
justify-content : space-between;
:시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬
align-items
:축이 크로스 축이면 사용가능함
.intro{
display: flex;
position: fixed;
width: 100%;
height: 80px;
background-color: #ffffff;
}
.intro h1{
margin: 0;
padding: 0;
width: 50%;
height: 80px;
background-color: black;
}
.intro nav{
width: 50%;
height: 80px;
background-color: yellow;
}
.intro nav ul{
list-style: none;
margin: 0;
padding: 0;
}
.intro nav ul li{
width: 33.33%;
height: 80px;
}
.intro nav ul {
display: flex;
}
.intro nav ul li:nth-child(1){
background-color: blue;
}
.intro nav ul li:nth-child(2){
background-color: dimgray;
}
.intro nav ul li:nth-child(3){
background-color: green;
}
display:flex;
:박스 모델이 플렉스가 되면 플렉서블하게 요소를 배치할 수 있음
nth-child(n)
:부모의 n번째 위치에 있는 자식을 선택하는 가상선택자
main{
width: 100%;
height: 20000px;
background-color: gold;
padding-top: 80px;
}
@media (min-width: 320px) and (max-width: 767px){
.intro{
position: static;
flex-direction: column;
height: 160px;
}
.intro h1{
width: 100%;
}
.intro nav{
width: 100%;
}
}
/*
.container{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 1140px;
margin: 0 auto;
background-color: yellowgreen;
}
flex-direction: column;
: 요소들이 세로방향으로 정렬
flex-wrap: wrap;
: 플렉스 항목을 한줄 또는 여러줄 배치되는데 wrap은 자동으로 여러행에 걸쳐 배치되게 함
공백을 없애려면 vertical-align : middle; 작성해줘야함
💛 미디어쿼리 작성 방법
- css파일에
@media (min-width:) and (max-width:)
를 pc,모바일 한번에 입력하기
- 모바일 버전용을 새 파일로 만들어 사용 mobile.css만든 후
@media(min-width:) and (max-width:)
작성
<style media ="(min-width:300px) and (max-width:700px)"
스타일 태그에 media값을 입력
📝 마무리
.media-menu{
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
align-items: center;
width: 700px;
background-color: pink;
}
.media-menu a{
text-decoration: none;
color: black;
}
.media-menu li {
width: 150px;
background-color: yellow;
border: solid 5px red;
padding: 5px 15px;
text-align: center;
}
display : flex ;
: 무조건 1행 수평으로 정렬
justify-content : space-between;
:시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬
align-items
:축이 크로스 축이면 사용가능함
.intro{
display: flex;
position: fixed;
width: 100%;
height: 80px;
background-color: #ffffff;
}
.intro h1{
margin: 0;
padding: 0;
width: 50%;
height: 80px;
background-color: black;
}
.intro nav{
width: 50%;
height: 80px;
background-color: yellow;
}
.intro nav ul{
list-style: none;
margin: 0;
padding: 0;
}
.intro nav ul li{
width: 33.33%;
height: 80px;
}
.intro nav ul {
display: flex;
}
.intro nav ul li:nth-child(1){
background-color: blue;
}
.intro nav ul li:nth-child(2){
background-color: dimgray;
}
.intro nav ul li:nth-child(3){
background-color: green;
}
display:flex;
:박스 모델이 플렉스가 되면 플렉서블하게 요소를 배치할 수 있음
nth-child(n)
:부모의 n번째 위치에 있는 자식을 선택하는 가상선택자
main{
width: 100%;
height: 20000px;
background-color: gold;
padding-top: 80px;
}
@media (min-width: 320px) and (max-width: 767px){
.intro{
position: static;
flex-direction: column;
height: 160px;
}
.intro h1{
width: 100%;
}
.intro nav{
width: 100%;
}
}
/*
.container{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 1140px;
margin: 0 auto;
background-color: yellowgreen;
}
flex-direction: column;
: 요소들이 세로방향으로 정렬
flex-wrap: wrap;
: 플렉스 항목을 한줄 또는 여러줄 배치되는데 wrap은 자동으로 여러행에 걸쳐 배치되게 함
공백을 없애려면 vertical-align : middle; 작성해줘야함
- css파일에
@media (min-width:) and (max-width:)
를 pc,모바일 한번에 입력하기 - 모바일 버전용을 새 파일로 만들어 사용 mobile.css만든 후
@media(min-width:) and (max-width:)
작성 <style media ="(min-width:300px) and (max-width:700px)"
스타일 태그에 media값을 입력
미디어쿼리를 활용하여 메뉴버튼을 pc버전과 모바일 버전 둘다 만드는 연습을 했다.
flex 개념이 헷갈려 인터넷으로 서치하며 제대로 된 개념을 잡아나갔다. display:flex는 큰 덩어리들을 block처럼 수평으로 쌓을 때 사용되는 속성이다.
또 코드 복습을 하는데 main태그에서 css설정이 되지 않아 오탈자가 있는지 처음부터 끝까지 검수하였는데 오탈자가 없어서 당황했다.
다시 살펴보니 .main으로 class를 호출하는 형식으로 css에 작성해서 css값이 적용되지 않은 거였다. class를 호출할 때만 . 을 쓰도록 주의를 해야겠다.
미디어 쿼리를 작성하는 방법은 총 3가지 방법이 있는데 선생님께서 우리는 1번과 2번 방법만 기억하고 있으면 된다고 하셨고, 코드가 길어지면 유지보수가 힘들어지기 때문에 css파일을 pc와 모바일 두개로 나눠서 관리하는게 더 효율적이라고 말씀하셨다.
이미지 크기를 width크기에 꼭 맞추고 싶으면 img width=100%로 설정하면
꽉 맞게 설정이 된다.
Author And Source
이 문제에 관하여(웹 프로그래밍 #11), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@heo_jeongmin/웹-프로그래밍-11저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)