개인 자료란 (JE)

  서버 커뮤니티

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

Yuuma_ 8412166dabab4c20b2c1e415f8e7a9ab

Profile

Html과 css

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

2020.08.14 조회 수 139 추천 수 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/115/774/003/262x150.crop.jpg?20240424234825

업데이트

마인크래프트 1.20.5 정식 업데이트

학교가기싫다

2024-04-24

0

/files/thumbnails/762/770/003/262x150.crop.jpg?20240418073724

레드스톤

T.B.H (고민중독) | 노트블럭 버전 | NoteBlock Cover [한국어 영어 중국어 가사 추가]

노트블럭전문가

2024-04-18

0

/files/thumbnails/218/767/003/262x150.crop.jpg?20240412130213

레드스톤

우리의 꿈 - 원피스 오프닝

노트블럭전문가

2024-04-12

0

/files/thumbnails/505/766/003/262x150.crop.jpg?20240411122306

레드스톤

기동전사 건담 수성의 마녀 | 노트블럭 커버 1

노트블럭전문가

2024-04-11

1

/files/thumbnails/932/765/003/262x150.crop.jpg?20240410124459

레드스톤

마인크래프트 노트블록으로 만든 『 밤양갱 (Bam Yang Gang) 』

노트블럭전문가

2024-04-10

0