3주차 HTML & CSS 기본 (4)

2022. 10. 24. 16:52ㆍ배울수록 연봉은 늘어간다./자바스크립트

728x90

 

  • ▲ 위에 보이는 화면처럼 웹페이지를 만들어 봅니다.
  • 프로그램은 구름 IDE를 사용했습니다.
  • 소프트웨어 스택은 HTML , CSS, JS 선택을 했고 프로젝트는 빈 프로젝트로 시작하였습니다.
  • github 링크 :https://github.com/develup-official/htmlcss-s01e04

1. 터미널에서 깃허브 링크 불러오기

  • 터미널에 git clone 링크 주소를 입력하세요.

2. 파일 만들기

  1. 다운로드한 폴더에 파일을 만들어 줍니다.
  2. 문자는 대소 문자를 구분합니다.
  3. 특수문자는 언더바나 하이픈 정도만 쓰도록 합니다.
  4. 파일명 : index.html
  5. 파일명 : style.css

3. 타이포 그래피

  • 간단히 말해 글자를 디자인한다고 생각하면 됩니다.

4. 기본 세팅

html css
<!DOCTYPE html>
<html>
    <head>
        <title>Wild Animals</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
<div class="wrapper">
<div class="header">
header
</div>
<div class="contents">
contents
</div>
<div class="footer">
footer
</div>
</div>



    </body>
</html>		 body {
background-image:url(images/bg.png);
}

.wrapper {
background-color: #999;
width: 800px;
margin: 0 auto;
}

.header {

}
  • 세팅이 끝난 후 마크업을 잡아 줍니다.

5. header 꾸미기

html 실행화면
<!DOCTYPE html>
<html>
    <head>
        <title>Wild Animals</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
<div class="wrapper">
<div class="header">
<a class="logo" href="#">
wild</a>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="contents">
contents
</div>
<div class="footer">
footer
</div>
</div>



    </body>
</html>
  • 검사키를 눌러 사용자 에이전트 시트를 초기화해줍니다.
css 초기화 세팅 실행화면
body, ul {
margin:0;
padding:0;
}

li {
list-style-type: none;
}

a {
text-decoration: none;
color: inherit;
}

/*위에는 초기화 세팅 입니다.*/

body {
background-image:url(images/bg.png);
}

.wrapper {
background-color: #999;
width: 800px;
margin: 0 auto;
}

.header {

}

6. 이미지의 반복

  • 사용할 이미지입니다.
  • 우리는 이 이미지를 반복을 시켜서 한 줄로 이어지게 만들 겁니다.
.wrapper {
background-color: #999;
background-image: url(images/rope.png);
width: 800px;
margin: 0 auto;

 

=> wrapper에 background 이미지를 적용했더니 각 불록에 이미지가 들어서 실제 붙어 있는 것처럼 보인다.

하지만 왼쪽에 보면 무언가 불편한 여백이 보이는데.....

이미지가 중간으로 정렬이 안돼서 그런 거니 중간으로 옮겨주도록 합니다.

.wrapper {
background-color: #999;
background-image: url(images/rope.png);
background-position: center;
width: 800px;
margin: 0 auto;

7. logo 이미지 만들기

.logo {
background-image: url(images/logo.png);
width: 450px;
height: 140px;
display: block;
}
  • 일단 display: block; 은 앞전 꺼를 실행해 보고 나중에 넣어 주세요.
  • css에 logo 이름을 만들어 주고 실행을 해보면 원하는 이미지가 안 나오게 되는데 a태그는 인라인 요소이기 때문에 너비와 높이가 적용이 안됩니다. 그래서 display 값을 넣어서 블록 요소로 바꾸어 주어야 이미지가 활성화되는 것을 확인할 수 있습니다.
  • 은근히 많이 일어나는 문제이기 때문에 꼭 알고 넘어갑니다.

=>

  • wild 텍스트는 없애기보단 들여 쓰기를 이용해 바깥으로 빼줍니다.
  • 이제 우리는 이미지를 중간으로 옮기기 위해 magin을 쓰게 되는데 여기서 중요한 것은 리스트에 있는 아이들도 같이 옮기는 게 포인트입니다.
  • magin을 쓰게 되면 이미지만 옮겨지고 자식들을 옮겨지지 않기 때문에 할 수 있는 방법은 위에 주었던 display값을 inline-block; 으로 바꾸어 줍니다.
.header {
text-align: center;
}
  • 헤더에는 이 값을 추가해 줍니다.

이미지가 너무 위로 붙은 거 같아 상하단 마진을 줘서 조금 띄어 줍니다.

 

html css
<!DOCTYPE html>
<html>
    <head>
        <title>Wild Animals</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
<div class="wrapper">
<div class="header">
<a class="logo" href="#" title="WILD">
wild</a>
<ul class="menu">
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="contents">
contents
</div>
<div class="footer">
footer
</div>
</div>



    </body>
</html>		 body, ul {
margin:0;
padding:0;
}

li {
list-style-type: none;
}

a {
text-decoration: none;
color: inherit;
}

/*위에는 초기화 세팅 입니다.*/

body {
background-image:url(images/bg.png);
}

.wrapper {
background-color: #999;
background-image: url(images/rope.png);
background-position: center;
width: 800px;
margin: 0 auto;
}


.header {
text-align: center;
}

.logo {
background-image: url(images/logo.png);
width: 450px;
height: 140px;
display: inline-block;
text-indent: -9999px;
margin: 20px 0;
}
/*위에는 wrapper , header 의 작업 영역 입니다.*/

8. menu 만들기 (1)

<ul class="menu">
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
  • html에서 menu라는 이름을 css에 만들어 줍니다.
  • 차지하고 있는 공간을 보기 위해 background 컬러를 줍니다.

  • 그다음은 사이즈를 줄여야 합니다.
.menu {
background-color: orange;
width: 300px;
margin: 0 auto;
}

  • menu의 하위 선택자 li를 만들어 줍니다.
.menu li {
border: 2px solid;
margin-bottom: 5px;
padding: 5px 0; 
}

=> 하나씩 실행을 해보면서 변화되는 과정을 보세요~

.menu {
width: 300px;
margin: 30px auto;
color: #666;
}

=> menu에 있는 속성도 바꾸어 줍니다.

  • background-color: orange; 를 삭제해주세요~
  • margin 값을 바꾸어 주세요.
  • 컬러 값을 넣어주세요.
  • .wrapper에 있는 background-color 값도 삭제해주세요~

9. menu 만들기 (2)

  • 이번에는 마우스를 가져갔을 때 액션이 이루어지는 버튼을 꾸며 봅니다.
  • hover는 우리가 가상 클래스라고도 합니다.
  • 우선은 이러한 기능이 있다고만 생각하고 넘어가도록 합니다.
  • 공식문서도 한번 봐보세요~
.menu li a:hover {
color: orange;
}

https://www.w3schools.com/cssref/sel_hover.php

 

CSS :hover Selector

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

  • 마우스를 가져다 대면 색상이 바뀌는 것을 확인할 수 있습니다.
  • 하지만 우리는 박스의 영역까지 색상이 바뀌는 것을 원하기 때문에 코드를 다시 추가해 봅니다.
css 실행화면

=> .menu li a 를 추가 했고  .menu li 에 있던 border와 padding을 복붙 했습니다. 

  • 이제  .menu li 에 있던 border와 padding은 삭제를 해줍니다.
  • 이미지를 보면은 박스의 크기가 줄어 있는 것을 확인할 수 있는데 계속 나오는 내용이지만 a태그는 인라인 요소이기 때문에 텍스트의 크기에 따라 줄어든 것이고 display 속성을 사용해 블록으로 바꾸어 줍니다.

10. footer 만들기 (1)

  • html에서 p태그를 하나 만들어 주고 css에서는 background color를 줍니다.
  • 여기서 키 포인트를 하나 주자면 background color의 색상을 쉽게 보는 방법이 있는데 검사기를 통해 가능합니다.

=> 위 이미지를 보게되면 우측에 컬러를 볼 수가 있는데 색상표를 직관적으로 확인이 가능하니 참고해 주세요.

 

11. footer 만들기 (2)

  • 위에 있는 이미지를 추가합니다.
  • 하는 방법은 div 속성을 주어서 이미지를 사용하는 방법도 있지만 간단히 하기 위해 새로운 방법으로 태그를 추가해 봅니다.
  • 우리는 before 라는 가상 요소를 사용합니다. 
  • 공식문서도 확인을 해봅니다.
.footer:before {
content: 'wow';
background-color: red;

https://www.w3schools.com/cssref/sel_before.php

 

CSS ::before Selector

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

=> 위에 이미지를 보면 배경색이 텍스트 크기만큼만 적용이 된 것을 볼 수 있는데 이는 바로 인라인 요소라는 것을 알 수 있습니다.

이제 배경이미지를 넣어 꾸며 봅니다.

.footer:before {
content: '';
background-image: url(images/ground.png);
display: block;
height: 50px;
  • content 속성은 빈칸으로 놓습니다.
  • 인라인 요소를 display를 사용해 블럭으로 바꾸어 줍니다.
  • height 값을 주어 잔디를 위아래를 크게 만들어 줍니다.

=> footer의 텍스트 영역을 바꾸어 봅니다.

.footer {
background-color: #875d24f5;
color: white;
text-align: center;
border-bottom: 10px solid rgba(0,0,0,0.4);
border-radius: 10px;
}
  • 글자의 색상은 흰색을 주었습니다.
  • 인라인 요소이기 때문에 text-align을 통해 글자를 중간으로 옮겨 주었습니다.
  • border-bottom 값을 주어 아래쪽 테두리가 삐져나오게 했습니다.
  • border-radius 값을 주어 모서리를 둥글게 만들었습니다.

하지만 여기서 중요한 포인트가 있는데 빨강색 동그라미를 보면 모서리가 적용이 안된 것을 확인할 수 있습니다.

이거 왜 그런 걸까요???

이러한 경우를 넘쳐 흐른다고 표현을 하는데 여기서 새로운 속성인 overflow: hidden; 이란 속성을 사용하게 되면 

모서리 부분이 적용된것을 확인할 수 있습니다.

 

적용화면!!

12. contents만들기(1)

<div class="contents">
<div class="section">
a
</div>
</div>
  • html content 클래스 아래 section이란 클래스를 만들어 줍니다.
.section {
background-color: #875d24f5;
background-image: url(images/wood.png);
margin: 50px 0;
padding: 30px;
border: 10px solid hsl(47deg 54% 46%);
border-radius: 10px;
box-shadow: 0 0 10px 10px rgba(0,0,0,0.6);
}
  • css에 section 이라는 이름을 만들어 줍니다.
  • 위 태그의 속성은 지금까지 계속 사용했던 태그 입니다.
  • 새로운 태그는 box-shadow 라는 태그가 추가 되었는데 공식문서를 통해 확인을 해봅니다.

https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow

 

box-shadow - CSS: Cascading Style Sheets | MDN

box-shadow CSS 속성은 요소의 테두리를 감싼 그림자 효과를 추가합니다. 쉼표로 구문해서 여러 그림자 효과를 입힐 수 있습니다. 박스 그림자는 요소에서의 수평수직 거리(오프셋), 흐릿함과 확산

developer.mozilla.org

12. contents만들기(2)

html css
<!DOCTYPE html>
<html>
    <head>
        <title>Wild Animals</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
<div class="wrapper">
<div class="header">
<a class="logo" href="#" title="WILD">
wild</a>
<ul class="menu">
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="contents">
<div class="section">
<h1>Squirrel</h1>
<p>
Squirreldolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient 
montes, nascetur ridiculus mus. Donec quam felis, 
ultricies nec, pellentesque eu, pretium quis, sem. 
Nulla consequat massa quis enim. 
Donec pede justo, fringilla vel, aliquet nec, 
vulputate eget, arcu. In enim justo, rhoncus ut, 
imperdiet a, venenatis vitae, justo. Nullam dictum 
felis eu pede mollis pretium. Integer tincidunt. 
Cras dapibus. Vivamus elementum semper nisi. 
Aenean vulputate eleifend tellus. Aenean leo ligula, 
porttitor eu, consequat vitae, eleifen
</p>
</div>
</div>
<div class="footer">
<p>
https://goldmodu.tistory.com
</p>
</div>
</div>



    </body>
</html>		 body, ul, p, h1 {
margin:0;
padding:0;
}

li {
list-style-type: none;
}

a {
text-decoration: none;
color: inherit;
}

/*위에는 초기화 세팅 입니다.*/

body {
background-image:url(images/bg.png);
}

.wrapper {
background-image: url(images/rope.png);
background-position: center;
width: 800px;
margin: 0 auto;
}


.header {
text-align: center;
}

.logo {
background-image: url(images/logo.png);
width: 450px;
height: 140px;
display: inline-block;
text-indent: -9999px;
margin: 20px 0;
}
/*위에는 wrapper , header 의 작업 영역 입니다.*/

.menu {
width: 300px;
margin: 30px auto;
color: #666;
}

.menu li {
margin-bottom: 5px;
}

.menu li a {
border: 2px solid;
padding: 5px 0;
display: block;
}

.menu li a:hover {
color: orange;
}

/*위에는 리스트의 작업 영역 입니다.*/

.section {
background-color: #875d24f5;
background-image: url(images/wood.png);
margin: 50px 0;
padding: 30px;
border: 10px solid hsl(47deg 54% 46%);
border-radius: 10px;
box-shadow: 0 0 10px 10px rgba(0,0,0,0.6);
color: white;
}

.section h1 {
margin-bottom: 20px;
font-size: 50px;
line-height: 174px;
background-image: url(images/animal01.png);
background-repeat: no-repeat;
background-position: right center;
}


/*위에는 contents 의 작업 영역 입니다.*/

.footer {
background-color: #875d24f5;
color: white;
text-align: center;
border-bottom: 10px solid rgba(0,0,0,0.4);
border-radius: 10px;
overflow: hidden;
}
.footer:before {
content: '';
background-image: url(images/ground.png);
display: block;
height: 50px;
}/* => 이것은 가상요소입니다. 요소는 생성되는 개념 입니다.*/
.footer p {

}

/*위에는 footer 의 작업 영역 입니다.*/
  • font-size 와 line-height 는 영상으로 대체합니다.
  • background-repeat는 반복되는 이미지를 하나만 나오게 합니다.
  • background-position 은 이미지의 위치를 변경합니다.

https://drive.google.com/file/d/1Br4DFvSg7xvMyEuMOHH-44cS5shnbGtT/view?usp=sharing 

 

Google Drive: 로그인

이메일 또는 휴대전화

accounts.google.com

 

실행화면▼

=> 글자의 크기가 커져도 폰트가 바뀌어도 이미지에는 영향을 받지 않습니다.

13. 폰트의 종류를 바꾸어 보기

https://fonts.google.com/

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

  • 이곳에서 구글폰트의 종류를 알아볼 수 있습니다.
  • 폰트를 적용시키려면 아래의 그림과 같이 html 과 css에 복붙하면 됩니다.

  • 변경된 폰트를 확인할 수 있습니다.
  • 이번에는 첫 글자에 강조를 주고 싶습니다.
  • html에 강조하고 싶은 텍스트를 strong 으로 묶어줍니다.
.section p strong {
background-color: hsl(47deg 54% 46%);
padding: 0 20px;
border-radius: 5px;
}

  • 변경된 폰트를 확인해 주세요!
  • 나머지는 노가다에 가깝기 때문에 영상으로 대체 합니다.

https://drive.google.com/file/d/1I7U1aL3QdJxCXug5LG2Lb3Z15wQRMY5P/view?usp=sharing 

 

Google Drive: 로그인

이메일 또는 휴대전화

accounts.google.com

14. 정리 영상

https://drive.google.com/file/d/1t2UCMENaCHw-PFrPPFxl8FQ8y6NNw6jZ/view?usp=sharing 

 

Google Drive: 로그인

이메일 또는 휴대전화

accounts.google.com

 

관련글

Total : Today : Yesterday :

티스토리툴바