3주차 HTML & CSS 기본 (2)

3주차 HTML & CSS 기본 (2)

2022. 10. 15. 00:36ㆍ배울수록 연봉은 늘어간다./자바스크립트

728x90

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

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

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

2. 파일 만들기

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

3. index.html에 기본 구조를 작성해 줍니다.

html	css
<!DOCTYPE html> <html> <head> <title>About Me</title> <link rel="stylesheet" href="style.css"> </head> <body> wow </body> </html>	body { background-color: #999; }

index.html 과 style.css가 잘 연결이 되었는지 body에 background-color를 넣어 확인을 해줍니다.

4. 콘텐츠를 확인합니다.

html

<div>
<div>Header</div>
<div>Contents</div>
<div>Footer</div>
</div>

웹이라는 것은 크게 3등분 하는 게 관례입니다.
Header (헤더) : 컴퓨터에서 출력될 때 각 페이지 맨 윗부분에 자동으로 붙는 부분
Contents (콘텐츠) : 내용물
Footer (푸터) : 인쇄 때 문서의 각 페이지 아랫부분에 자동으로 첨가되는 표제, 날짜 등

5. 전체의 공간을 차지하는 곳?

div에 background-color를 css에서 주어서 어떻게 공간을 차지하고 있는지 확인을 합니다.

css

div {
background-color: white;
}

실행화면▼

width를 800px을 주어 크기를 줄여줍니다.

6. 콘텐츠를 중간으로~~~~ margin

css

div {
background-color: white;
width : 800px;
margin: 0 auto;
}

margin: 0 auto; (상하는 안됩니다. 좌우만 가능합니다!!)

7. 3등분의 공간을 알아보자. 자식의 div?

각각의 div에 콘텐츠를 담으려면 class를 활용합니다.
class는 이름표입니다.

html

css에서는???

div.header { }	생략 된것과 안된것을 확인 합니다. 결국 같은 의미 입니다.
.header { }

div 이면서 header라는 이름을 가지고 있는 것!
이것이 클래스 시스템입니다.
사람 이름 부르는 것이랑 비슷합니다. (김,성환 => 김 씨 성을 가졌으면서 성환이라는 이름을 가진 것!)
보통 친구들이 이름을 부를 때 성을 빼고 부르는데 성을 생략하는 경우도 많이 있습니다. (div 생략)
이곳에 배경 이미지를 넣어서 잘 들어가는지 확인을 합니다.
div.Header {
background-image: url(images/halloween-header-bg.png);
}
엄밀히 따지면 .header에 *(별표)가 생략되어 있는 것을 알 필요가 있습니다. *는 모든 태그를 선택합니다. 동일한 이름을 만나게 되면 모두 적용이 됩니다.
div의 부모는 보통 wrapper or container라고 적는 경우가 있는데 동네마다 다르니 참고하세요.
background-image를 준 경우 글자색도 같이 바꾸어 줍니다.

html	css

지금까지 만든 것!!!

실행화면▼

8. header를 꾸며 봅니다.

h1 : Jack-O’-Lantern
h1 태그 위에 <img src="images/halloween-profile.png">
<p>A jack-o'-lantern is a carved pumpkin,
turnip, or other root vegetable lantern associated with Halloween.
Its name comes from the phenomenon of a strange light flickering over peat
bogs, called will-o'-the-wisp or jack-o'-lantern.
</p>

실행화면▼

여기서 중요한 포인트는 우리가 지정하진 않았지만 검사를 통해 h1과 p 태그에 상하단 마진이 생긴 것을 확인할 수 있습니다. 우리가 지정하지 않은 영역은 삭제를 해야지 나중에 우리가 원하는 디자인을 할 수가 있습니다.

style.css에 초기화를 해줍니다.
맨 위에 첫 번째에 넣어 주는 게 관례입니다.
h1, p {
- magin: 0;
}

=> 브라우저에서 제공하는 마진을 없애겠다는 뜻입니다.

입력 후 마진 영역이 사라진 것을 확인합니다.

이제는 가운데 정렬을 해봅니다.

우리가 지금까지 배운 가운데 정렬은??? magin : 0 auto; 를 떠올릴 것입니다.

하지만 실행을 해보면 가운데 정렬을 할 수가 없습니다.

마진은 바깥쪽 영역이고 텍스트는 안쪽 영역이기 때문에

텍스트를 가운데 정렬을 하려면 css 영역에

text-align이라는 속성을 사용하면 가운데 정렬을 할 수가 있습니다.

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_text-align

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

실행화면▼

=> 이제 우리는 호박 머리를 조금 아래로 내리고 싶습니다.

호박 머리를 내리려면 두 가지 속성을 생각할 수 있는데

바로 padding과 magin-top을 떠올리게 됩니다.

하지만 여기서 중요한 포인트는 padding을 적용시킬 경우 "height+padding=높이" 라는 공식이 성립되기 때문에

magin을 사용하는 게 올바릅니다.

이미지에 클래스 값을 넣어서 만들어 봅니다.

html	css

실행화면▼

하위 선택자 : 부모에 속해있는 자식들을 선택하는 방법

css에서 실행합니다
div.header h1 {
}
이 뜻은 div에서 header에 있는 h1을 선택하겠다는 뜻입니다.
쉽게 말해 필터링을 한다고 생각하면 됩니다.
아래 내용을 추가해 줍니다.

css

.header h1 {
color: violet;
margin : 10px 0;
}

.header p {
background-color: black;
color: #888;
width: 450px;
margin: 0 auto;
padding: 10px;
border-radius: 5px;
}

실행화면▼

9. footer를 꾸며 봅니다.

https://goldmodu.tistory.com ( 이름은 자신의 사이트나 회사명 등을 적어주면 됩니다.)
이번 예제에서는 크게 중요한 것은 아니기 때문에 간단히 넘어가겠습니다.

css

실행화면▼

letter-spacing

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_letter-spacing

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

text-indent

들여 쓰기인데 여기서는 굳이 사용하지 않아도 됩니다.

10. contents를 꾸며 봅니다.

예제를 보면 두 개의 콘텐츠가 있는 것을 확인할 수 있습니다.
두 개의 div를 만들어 줍니다.
이름은 section 1 , section 2라고 써줍니다.
클래스명은 두 개의 콘텐츠가 거의 비슷하기 때문에 통일해서 section이라고 써줍니다.

html	css

실행화면▼

여기서 중요한 포인트 하나!!!!
magin을 보면 상 하단 20px을 주었는데 section1과 section2 사이를 보게 되면 magin이 40px이 되어야 하는데 20px만 적용된 것을 확인할 수 있습니다. 이러한 현상을 마진 겹침 현상이라고 하는데 css는 목적이 안정적인 디자인을 하는데 목표로 하고 있습니다. 그렇기 때문에 이러한 현상은 버그가 아니라 의도된 동작이라고 보면 됩니다. 그래서 하나로 합쳐진 화면을 보게 됩니다.
div에 인접해 있는 상하단 마진은 하나로 된다!
section1과 section2를 수정합니다.

html