이제 우리가 배운것 들로 반응형 웹을 만들어 본다고 한다
이러한 형식의 웹 레이아웃을 만들어 본다고 한다
참고로 나는 인프런의 개발자의 품격 분의 강의를 듣고 내가 정리하며 쓴 블로그인걸 참고하길 바란다
우선 해당 웹의 제일 위의 Who Am I를 만들어 보겠다
<div class="header">
<h1>Who Am I</h1>
</div>
<div>태그를 만들고 그안에 <h1>태그로 Who Am I 라는 머릿말을 만들고
<div>태그에 클래스 속성을 header 로 줬다
<style>
.header {
padding: 60px;
text-align: center;
background-color: #f9fc63;
color: black;
}
</style>
그리고 CSS의 클래스 선택자를 이용해 header 클래스의 디자인을 입히자
그러면 이렇게 얼추 비슷하게 만들어 졌다
<style>
* {
box-sizing: border-box;
}
.header {
padding: 60px;
text-align: center;
background-color: #f9fc63;
color: black;
}
</style>
그리고 전체 선택자를 이용해 box-sizing을 border-box를 기준으로 지정하고
<style>
* {
box-sizing: border-box;
}
body {
margin-top: 0;
}
.header {
padding: 60px;
text-align: center;
background-color: #f9fc63;
color: black;
}
</style>
태그 선택자를 이용해 <body> 태그안에 있는 요소들을 전부 마진값을 0으로 지정하면
마진값이 0 이므로 빈공간 없이 딱 붙게 만들었다
그리고 이제 메뉴들을 만들자
<body>
<div class="header">
<h1>Who Am I</h1>
</div>
<div>
<a href="#">메뉴1</a>
<a href="#">메뉴2</a>
<a href="#">메뉴3</a>
<a href="#">메뉴4</a>
<a href="#">메뉴5</a>
</div>
</body>
<div> 태그를 하나 만들고 그안에 <a> 링크 태그로 메뉴를 1~5번까지 만든다
그럼 이렇게 생성이 된다
근데 우리가 만들고자 하는건 검은색 배경에 가운데 정렬된 하얀색 글자이다
<body>
<div class="header">
<h1>Who Am I</h1>
</div>
<div class="navbar">
<a href="#">메뉴1</a>
<a href="#">메뉴2</a>
<a href="#">메뉴3</a>
<a href="#">메뉴4</a>
<a href="#">메뉴5</a>
</div>
</body>
<a>태그의 부모인 <div>태그에 클래스명을 navbar로 지정하고
navbar 클래스 선택자를 만들자
<style>
* {
box-sizing: border-box;
}
body {
margin-top: 0;
}
.header {
padding: 60px;
text-align: center;
background-color: #f9fc63;
color: black;
}
.navbar {
display: flex;
flex-direction: row; /*flex-direction 값을 안넣으면 기본으로 row값이 적용된다*/
background-color: #333;
justify-content: center;
}
</style>
.navbar 인 클래스 선택자에
display 값은 flex
flex-direction 값은 row를 준다 하지만 flex-direction 속성을 안넣으면 기본으로 row값이 적용되어
안넣어도 상관은 없다고 한다
background-color는 완전 검은색이 아닌 헥스 값으로 #333번 색
글자는 가운데 정렬 이므로 justify-content는 center 값
display 속성이기에 justify-content 속성을 줬다
그러면 검은색 배경의 가운데 정렬이 된걸 볼 수 있다
<style>
* {
box-sizing: border-box;
}
body {
margin-top: 0;
}
.header {
padding: 60px;
text-align: center;
background-color: #f9fc63;
color: black;
}
.navbar {
display: flex;
flex-direction: row; /*flex-direction 값을 안넣으면 기본으로 row값이 적용된다*/
background-color: #333;
justify-content: center;
}
.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
</style>
그리고 해당 메뉴 콘텐츠의 디자인 적용을 위해
.navbar a {} 인 하위 선택자를 이용해
navbar 클래스 속성에 들어가있는 모든 <a>태그들에 속성을 지정해 주자
color 는 흰색
padding 은 상하 14px 좌우 20px
text-decoration 은 none 으로 밑줄을 지우고
text-alig 은 center로 가운데 정렬 값을 줬다
그럼 이렇게 만들고자 하는 것과 비슷하게 만들어진걸 볼 수 있다
다음으로 메뉴 밑에 있는 레아웃을 만들어 보자
해당 레이아웃을 가장큰 컨테이너 안에
두개의 작은 컨테이너가 두개 있는 것이다
노란색 줄이 가장 큰 컨테이너
주황색과 하늘색이 각각 작은 컨테이너 이다
그래서 가장큰 <div>태그와 그 안에 작은 <div>태그 두개를 만들어야 한다
<div>
<div></div>
<div></div>
</div>
이렇게 말이다
<div class="row">
<div></div>
<div></div>
</div>
큰 <div>에 클래스명을 row로 주고
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
row 클래스 선택자를 만들어
display: flex 값과
flex-direction: row (안넣어도 기본값으로 row가 적용되지만 넣어보겠다)
flex-wrap은 wrap 값으로 콘텐츠가 부모요소의 크기를 벗어나면 자동으로 다음줄로 넘어가게 지정했다
<div class="row">
<div class="side"></div>
<div class="main"></div>
</div>
그리고 각각 작은 <div>태그 에게도 왼쪽에 있는 작은 콘텐츠는 클래스명을 side
오른쪽에 있는 큰 콘텐츠는 클래스명을 main 으로 줬다
그리고 왼쪽의 About 머릿말의 콘텐츠를 만들기 위해
<!-- 큰 컨테이너 -->
<div class="row">
<!-- 왼쪽 컨테이너 -->
<div class="side">
<!-- about 콘텐츠 -->
<div class="about">
<div class="fakeimg"></div>
</div>
</div>
<!-- 오른쪽 컨테이너 -->
<div class="main"></div>
</div>
클래스명이 side인 <div>태그 안에 다시 <div>태그를 만들고 클래스명은 about
그리고 클래스명이 about인 <div>태그 안에 다시 <div>태그를 만들고
클래스명은 fakeimg
.side {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
클래스 선택자로 side 와 fakeimg 를 만들고
side 는
flex 값은 30% (요기서 flex값은 넓이는 30%로 지정한다는 뜻이다)
백그라운드 컬러는 헥스값으로 #f1f1f1
padding은 20px로 지정
fakeimg 는
백그라운드 컬러는 헥스값으로 #aaa
width는 100%
padding은 20px정도 줬다
그럼 이렇게 내가 만들고자 했던 About 콘텐츠의 배경색이 비슷하게 만들어진다
근데 side 클래스 선택자의 속성값을 flex: 30%로 지정을 했는데
화면에선 100%로 다 채워져있다
이건 main 콘텐츠인 오른쪽 컨테이너를 아직 속성을 지정안해줘서 그런거 같다
.main {
flex: 70%;
background-color: white;
padding: 20px;
}
이렇게 main 클래스 선택자를 만들고
flex 는 70% (넓이 70%)
백그라운드 컬러는 흰색
padding은 20px로 주면
이렇게 side 와 main 이 분리된걸 볼 수 있다
<!-- 큰 컨테이너 -->
<div class="row">
<!-- 왼쪽 컨테이너 -->
<div class="side">
<!-- about 콘텐츠 -->
<div class="about">
<h2>About</h2>
<div class="fakeimg">image</div>
<p>개발자의 품격 님의 강의를 보고 만든 페이지 입니다</p>
</div>
</div>
<!-- 오른쪽 컨테이너 -->
<div class="main"></div>
</div>
그리고 문자를 넣어보았다
side 콘텐츠의 제목격인 About을 <h2>정도 크기의 머릿말 태그로 작성하고
image 부분 <div>태그에 image 문자를 넣고
그 아래 <p>첫 문장 태그로 문장을 작성했다
점점 만들고자 하는것과 비슷해지고 있다
근데 image 콘텐츠의 높이를 좀더 키워야 할 것 같다
<!-- 큰 컨테이너 -->
<div class="row">
<!-- 왼쪽 컨테이너 -->
<div class="side">
<!-- about 콘텐츠 -->
<div class="about">
<h2>About</h2>
<div class="fakeimg" style="height: 200px">image</div>
<p>개발자의 품격 님의 강의를 보고 만든 페이지 입니다</p>
</div>
</div>
<!-- 오른쪽 컨테이너 -->
<div class="main"></div>
</div>
만들어야하는 image가 각각 다른 크기이기 때문에
inline 스타일로 크기를 지정해줬다
이렇게 image 콘텐츠의 크기를 키웠다
<!-- 큰 컨테이너 -->
<div class="row">
<!-- 왼쪽 컨테이너 -->
<div class="side">
<!-- about 콘텐츠 -->
<div class="about">
<h2>About</h2>
<div class="fakeimg" style="height: 200px">image</div>
<p>개발자의 품격 님의 강의를 보고 만든 페이지 입니다</p>
<h3>Skills</h3>
<p>27세, 비전공, 개발자가 될 수 있을까</p>
<div class="fakeimg">image</div>
<div class="fakeimg">image</div>
<div class="fakeimg">image</div>
</div>
</div>
<!-- 오른쪽 컨테이너 -->
<div class="main"></div>
</div>
그리고 About 밑에 Skills 콘텐츠를 만들기 위해
<h3> h2태그 보다 한단계 작은 h3 머릿말 태그로 Skills 문자를 만들고
<p>태그로 내용을 입력했다
그리고 내용 밑에 image 콘텐츠가 있는데
<div>태그로 image 3개를 만들고
클래스 속성은 위에서 만들어 놨던 fakeimg 값을 줬다
그러면 이렇게 만들어 진다
작은 image 들이 붙어 있어서 <br>태그로 띄워주자
<!-- 왼쪽 컨테이너 -->
<div class="side">
<!-- about 콘텐츠 -->
<div class="about">
<h2>About</h2>
<div class="fakeimg" style="height: 200px">image</div>
<p>개발자의 품격 님의 강의를 보고 만든 페이지 입니다</p>
<h3>Skills</h3>
<p>27세, 비전공, 개발자가 될 수 있을까</p>
<div class="fakeimg">image</div>
<br />
<div class="fakeimg">image</div>
<br />
<div class="fakeimg">image</div>
</div>
그럼 side 콘텐츠는 완성이 된 것이다
이제 main 콘텐츠를 만들자
<!-- 오른쪽 컨테이너 -->
<div class="main">
<h2>프로젝트 1</h2>
<h5>2023년 9월</h5>
</div>
오른쪽 컨테이너의 <div>태그 안에
<h2> 정도의 머릿말 태그로 프로젝트 1
그리고 밑에 <h5>정도의 머릿말 태그로 날짜를 입력했다
그러면 해당 머릿말은 만들어 졋고
이제 image 콘텐츠를 넣어야 한다
<!-- 오른쪽 컨테이너 -->
<div class="main">
<h2>프로젝트 1</h2>
<h5>2023년 9월</h5>
<div class="fakeimg" style="height: 200px">image</div>
</div>
</div>
<div> 태그로 fakeimg 클래스 값을 가지고 높이 200px인 image를 만들었다
이렇게 만들고
나머지 문자들을 넣어 보자
<!-- 오른쪽 컨테이너 -->
<div class="main">
<div>
<h2>프로젝트 1</h2>
<h5>2023년 9월</h5>
<div class="fakeimg" style="height: 200px">image</div>
<p>
이 프로젝트는 20대 중후반의 눈물을 머금고 비전공자 개발자의 프로젝트
입니다
</p>
</div>
<div>
<h2>프로젝트 2</h2>
<h5>2023년 9월</h5>
<div class="fakeimg" style="height: 200px">image</div>
</div>
image 밑에 <p>태그로 문자를 입력하고
그 밑에 똑같이 <h2>태그로 프로젝트 2 머릿말을 만들고
<h5>정도 크기의 머릿말 태그로 날짜
그리고 밑에 똑같이 fakeimg 클래스 속성을 가진 높이 200px image 콘텐츠
이렇게 프로젝트 5번까지 만들었다
이렇게 레이아웃은 거의 완성했다
이제는 이때까지 배웠었던 CSS를 이용해 디테일적인 부분을 만들어 보자
.navbar a:hover {
background-color: #f9fc63;
color: black;
}
클래스 선택자 + 가상 선택자로 a:hover 값을 줬다
클래스명이 navbar 요소의 하위 <a>태그들에 hover값(마우스를 올려두면)
백그라운드 색은 헥스값으로 #f9fc63 값
글자 색은 검은색으로 주면
이렇게 메뉴 링크에 마우스를 올려두면 지정한 색으로 바뀐다
그리고 웹페이지 제일 하단에 배너? 를 만들것이다
<!-- 오른쪽 컨테이너 -->
<div class="main">
<div>
<h2>프로젝트 1</h2>
<h5>2023년 9월</h5>
<div class="fakeimg" style="height: 200px">image</div>
<p>
이 프로젝트는 20대 중후반의 눈물을 머금고 비전공자 개발자의 프로젝트
입니다
</p>
</div>
<div>
<h2>프로젝트 2</h2>
<h5>2023년 9월</h5>
<div class="fakeimg" style="height: 200px">image</div>
</div>
<div>
<h2>프로젝트 3</h2>
<h5>2023년 9월</h5>
<div class="fakeimg" style="height: 200px">image</div>
</div>
<div>
<h2>프로젝트 4</h2>
<h5>2023년 9월</h5>
<div class="fakeimg" style="height: 200px">image</div>
</div>
<div>
<h2>프로젝트 5</h2>
<h5>2023년 9월</h5>
<div class="fakeimg" style="height: 200px">image</div>
</div>
</div>
</div>
<div class="footer">
<h2>개발자의 품격님의 강의를 보고 만든 페이지</h2>
</div>
이렇게 맨 밑에 <div>태그를 만들고 클래스명은 footer 로 주고
그 안에 <h2>태그로 하단 배너 문자를 작성했다
이렇게 만들어 진다
이제 CSS속성을 입히자
.footer {
padding: 20px;
text-align: center;
background-color: #ddd;
}
클래스 선택자로 footer 를 만들고
padding 은 20px
text-align은 center 로 가운데 정렬
백그라운드 컬러는 헥스값 #ddd
이런식으로 하단 배너도 만들었다
그리고 이제 스마트폰에서 접속했을때 그 해상도에 맞게 변경되게 반응형 기능을 주자
@media screen and (max-width: 786px) {
.row,
.navbar {
flex-direction: column;
}
}
미디어 쿼리를 사용해서
넓이가 786px 이하일때
클래스명이 row, navbar 인 요소들을 (이런식으로 두개 이상의 클래스명에 적용시킬때 ,(콤마)를 꼭 사용해야 한다)
.row, .navbar {
flex-direction 값을 column 으로 줘서 y축(세로)로 정렬되게 지정했다
그럼 넓이가 786px 이하가 되었을때
세로로 정렬이 되는걸 볼 수 있다
그리고 이 메뉴버튼을 클릭했을때 우리가 만든 프로젝트 1~5번까지 이동할 수 있다
나는 메뉴 5번을 클릭하면 프로젝트 5번으로 이동하게끔 할 것이다
<div id="project5">
<h2>프로젝트 5</h2>
<h5>2023년 9월</h5>
<div class="fakeimg" style="height: 200px">image</div>
</div>
프레젝트 5번이 있는 <div> 태그에 id 값으로 project5 값을 주고
<div class="navbar">
<a href="#">메뉴1</a>
<a href="#">메뉴2</a>
<a href="#">메뉴3</a>
<a href="#">메뉴4</a>
<a href="#project5">메뉴5</a>
</div>
메뉴 콘텐츠를 만들었던 <a>태그에 href속성에 #project5 값을 지정하면
메뉴 5를 클릭했을때 프로젝트 5번으로 이동할 수 있다
근데 이렇게 이동하면 화면이 한번에 이동하게 되서 이질감이 든다
html {
scroll-behavior: smooth;
}
이건 특별한 CSS라서 배운적이 없다고 한다
위의 코드처럼 smooth 값을 주면
메뉴 5번을 클릭했을때
프로젝트 5번으로 부드럽게 이동할 수 있다
그리고 우리가 배웠던 position속성에 sticky 값으로 메뉴들을
스크롤이 내려가도 상단에 고정시킬 수 있다
.navbar {
display: flex;
flex-direction: row; /*flex-direction 값을 안넣으면 기본으로 row값이 적용된다*/
background-color: #333;
justify-content: center;
position: sticky;
top: 0;
}
<nav class="navbar">
<a href="#">메뉴1</a>
<a href="#">메뉴2</a>
<a href="#">메뉴3</a>
<a href="#">메뉴4</a>
<a href="#project5">메뉴5</a>
</nav>
이렇게 클래스 선택자 .navbar 선택자의 속성에
position 속성을 sticky 값과 top : 0 값을 주면
이렇게 스크롤을 내려가도 메뉴바는 상단에 고정되게 되어
조금 더 완벽한 웹을 만들수 있다
우리가 지금까지 <div>태그를 사용해서 웹을 만들었었다
하지만 <div>태그는 아무런 의미가 없는 태그이다
시멘틱 태그를 이용해서 의미있는 태그를 사용하면
화면리더기 같은것이 좀 더 정확하게 인식할 수 있다고 한다
<!-- 레이아웃을 위한 시멘틱 태그 -->
<!-- header -->
<!-- nav(네비게이션) -->
<!-- aside -->
<!-- main -->
<!-- section -->
<div class="header">
<h1>Who Am I</h1>
</div>
header에 해당하는 <div>태그는
<header class="header">
<h1>Who Am I</h1>
</header>
<header> 태그
<div class="navbar">
<a href="#">메뉴1</a>
<a href="#">메뉴2</a>
<a href="#">메뉴3</a>
<a href="#">메뉴4</a>
<a href="#project5">메뉴5</a>
</div>
메뉴에 해당하는 <div> 태그인 navbar(네비게이션)
<nav class="navbar">
<a href="#">메뉴1</a>
<a href="#">메뉴2</a>
<a href="#">메뉴3</a>
<a href="#">메뉴4</a>
<a href="#project5">메뉴5</a>
</nav>
<nav> 태그
<!-- 왼쪽 컨테이너 -->
<div class="side">
side 인 왼쪽 컨테이너는
<!-- 왼쪽 컨테이너 -->
<aside class="side">
<aside> 태그
<!-- 오른쪽 컨테이너 -->
<div class="main">
main인 오른쪽 컨테이너는
<!-- 오른쪽 컨테이너 -->
<main class="main">
<main> 태그
<div>
<h2>프로젝트 1</h2>
<h5>2023년 9월</h5>
<div class="fakeimg" style="height: 200px">image</div>
<p>
이 프로젝트는 20대 중후반의 눈물을 머금고 비전공자 개발자의 프로젝트
입니다
</p>
그리고 반복되는 태그들은
<section>
<h2>프로젝트 1</h2>
<h5>2023년 9월</h5>
<div class="fakeimg" style="height: 200px">image</div>
<p>
이 프로젝트는 20대 중후반의 눈물을 머금고 비전공자 개발자의 프로젝트
입니다
</p>
</section>
<section> 태그
등등
이렇게 의미에 맞는 시멘틱 태그들이 있으므로
레이아웃을 만들때 의미에 맞는 시멘틱 태그들을 사용하면 검색엔진이나 화면리더기에게
훨씬더 많고 정확한 정보를 전달할 수 있다고 한다
