개인 자료란 (JE)

  서버 커뮤니티

Profile 주원Love 디벨로퍼 인증 개발자

Yuuma_ 8412166dabab4c20b2c1e415f8e7a9ab

Profile

Html과 css

html과 css연동하여 이것저것 바꿔보기.

2020.08.14 조회 수 147 추천 수 0

안뇽하세용 저는 뭐 접니다. 


html과 css를 연동하여 이것저것 바꾸는것을 강좌해보겠습니당

가자!


폰트강좌를 했던 파일로 가봅시다.

거기선 css를 연동해놨었죠?

css파일로 이동해서, css초기화를 한번 하겠습니다.45ae2f1e118320099894574df841aac5.PNG

css쪽을 보시면 

* {     padding: 0;     margin: 0;     box-sizing: border-box;  }

이런식으로 css초기화를 진행해줍니다.

또한 container 라는 아이디가 담긴 div 를 만들어서, 사이트의 전체 사이즈를 정해주겠습니다.

50d61387739fbc03860131abc55c747d.PNG

이렇게 한 후 기본설정을 위해 

<header> 과 <section> 과 <footer> 로 나눠주겠습니다.

간단하게 <header> 이 상단,

<section> 이 중단,

<footer>가 하단이라고 생각해주시면 되겠습니다.

2f5949f5083ee209d94a7f0a7615cc15.PNG

이렇게 설정해주고,

container 에 사이트의 크기를 정해주겠습니다.

471d7b1310ed1f5008159bac7ec91924.PNG

이런식으로 전체를 감싼 div에 크기를 넣어줬다면, 다음은 header 에 문구를 넣어주겠습니다.

63bf8b2ee43a3e6695167c8261987b6a.PNG

이런식으로 클릭하면 한마포로 이동되게 넣어봤습니다.

사이트로 들어가서 "한마포로 이동" 을 클릭 시 한마포로 이동하게 됩니다.

그 상태에서 밑줄과 파란색의 글씨를 바꿔보겠습니다.

2bdb1d029bb81a9e699b9318909b863a.PNG

이렇게 설정해주면 색깔과 데코레이션이 제거됩니당~

다음편에선 margin 과 padding 을 이용하여 글씨 혹은 사진을 이동시키는 방법에 대해 알아보겠습니다.

Warning
댓글이 없습니다.

새로운 댓글을 등록해 주세요!

뉴스 및 창작물
/files/thumbnails/477/930/003/262x150.crop.jpg?20241201030912

레드스톤

뉴진스 - Super Shy | 마크 노트블럭 커버

노트블럭전문가

2024-12-01

0

/files/thumbnails/483/916/003/262x150.crop.jpg?20241127115329

레드스톤

[노트블럭 커버] 뉴진스 - ETA 3

노트블럭전문가

2024-11-27

1

/files/thumbnails/150/925/003/262x150.crop.jpg?20241123005717

건축

응답하라 1988 ? 1

팀뉴일리시

2024-11-23

5

/files/thumbnails/761/908/003/262x150.crop.jpg?20241025153749

건축

서울 숭례문(崇禮門) 6

KHC

2024-10-25

2

/files/thumbnails/578/899/003/262x150.crop.jpg?20241010142350

건축

경주 월정교 1

KHC

2024-10-10

2