HTML,CSS 기초 공부하기 (테이블 표 만들기, position속성, margin padding, width, height, HTML기본속성 없애기)

안녕하세요 홍가 입니다.

오늘은 HTML로 테이블을 만들고 CSS로 꾸며주는 공부를 해보려고 합니다.

 

HTML기초를 보고 싶으신 분들은 ↓↓↓↓↓↓

https://honggacoding.tistory.com/6

HTML 기초 공부하기 (기본틀 짜기, 주석처리, inline block태그, 제목태그, 입력태그 - form / input, 테이

전 시간에 이렇게 만들어 봤어요 Preview랑 웹 페이지로 보는 거랑 차이가 없죠?

초반 마크업 할 때 정말 편하답니다.

 

우선 CSS 사용방법은 

이렇게 style.css파일을 만들거나 head부분에 stlye을 만들어서 css를 사용할 수 있어요 

css파일이 있어도 css파일을 사용하지 않고 html에서 사용이 되시는 게 보이나요?

 

왼 css파일 사용 X 오 css파일 사용 O

css파일이 있어도 css파일을 사용하지않고 html에서 사용이 되시는게 보이나요?

css파일을 사용할 때는 link태그를 사용하셔야 해요 link:css를 눌러주시면 자동으로 완성이 됩니다. 

 

테이블에 선 표시를 해보려고 해요!

아쉽게도 css파일에 적으면 Preview에는 나오지 않아서 저는 html에다가 적어서 보려고 해요!

어차피 html style부분에 있는걸 css파일에 복붙 하면 똑같답니다.

 

처음 접하시는 분들은 background 랑 color랑 헷갈려하시는데

background는 글자 뒤에 배경이고요 color가 글자색입니다.

 

이런 식으로 table부분과 th td부분에 선 효과를 넣어줬습니다. 다른 방법도 있는데요.

이런식으로 저희 table에는 thead tr th가 있는데 table > thead > tr > th로 해도 잘 먹힙니다.

 

html안에는 기본 속성들이 있어요 제가 이제 하나하나 설명을 해드릴 거예요 다 캡처하면 사진이 너무 많아질 것 같아

캡처를 하고 웹페이지 화면하고 비교를 해드릴게요. 

 

*은 html에 모든 요소 태그를 건들 수 있어요.

border-collapse: collapse; 선을 다 붕괴시키고요

margin은 이윤으로 생각하고 마진이 0이면 안 떨어지고 마진이 10이면 남는 거죠? 그렇게 생각하면 편하더라고요.

padding은 저희도 패딩 입으면 부피가 커지잖아요? 똑같습니다. 0이면 0이고 10이면 10만큼 커집니다.

 

a태그로 하이퍼링크를 달수도 있어요 저렇게 네이버 바로가기 밑에 선이랑 색상을 없애 볼게요.

text-decoration이 글자 밑에 있는 밑줄 제거를 해주고요.

color은 글자색을 말합니다. 

목록 태그인 ul, li 저. 부분은 list-style:none;으로 하시면 사라집니다. 

 

저는 디자인할 때 기본 속성을 다 제거한 뒤에 하고 있어요! 

 

position에 대해 알려드리려고 해요  absolute, relative, fixed을 주로 사용하고 여러 가지 많은데

 

relative는 기본값에서 상하좌우를 움직일 수 있습니다.

 

absolute는 부모 element를 기준으로 이동한며 element가 없을 때 특정 좌표로 이동 가능하다.

 

fixed는 스크롤이 생길 때 고정이 되며 스크롤을 내리면 같이 따라가면서 보인다. 

 

sticky도 fixed랑 같은 원리인데 다른 점은 sticky는 스코롤 내릴 때 내용이 있으면 내용과 겹치지 않는다.

z-index는 position사용 시 박스들이 겹칠 때 숫자를 1,2,3,4,... 정하여 순서로 보여주게 된다. 

 

이 정도로 CSS사용법을 배워봤어요 다음에는 웹 페이지에 연동을 시켜 보도록 할게 요