CSS코딩 - 생활코딩 8 ~ 9강

주제 : CSS
 
교재 : 생활코딩
 
내용
 
8강 박스모델
 
1. border를 통해 태그의 부피감 확인 및 설정하기

h1태그는 화면전체를 쓰고 있음(줄바꿈)
a태그는 줄바꿈이 되지 않고 다른 컨텐츠들과 같은 라인에 위치
why? 왜 어떤 태그는 자동으로 줄바꿈이 되어 구현되는데, 어떤 태그는 그렇지 않은걸까?
- h1태그는 제목태그이기에 화면전체를 쓰는게 더 편리함
-반대로 a(링크)태그가 화면 전체를 쓴다면 링크 앞뒤에 있는 컨텐츠가 줄바꿈이 되면 불편함. 따라서 줄바꿈이 되지 않고 딱 자기 콘텐츠 크기 만큼만 쓴다.
 
이러한 개념을 시각적으로 더 확인해보자! 테두리를 그려서 태그의 부피감을 확인해볼까?
style태그와 border효과를 이용해서 확인해보자!
*border 효과 및 사용법
border효과 = 테두리
border-width:5px; = 테두리의 두께(너비)가 5픽셀
border-color:red; = 테두리의 색이 빨간색
border-style: solid; = 테두리의 스타일이 단선(일반적인 선)

h1태그는 화면전체에 걸쳐 테두리가, a태그는 정해진 부분만 테두리가 표시된다. (/* */ = 주석)

 
<h1>처럼 화면전체를 쓰는 태그 = block level elemment
<a>처럼 자기 자신의 부피, 콘텐츠크기 만큼을 갖는 태그 = inline element
 
화면전체나 콘텐츠크기만큼만 쓰는 것은 어디까지나 해당 태그의 기본값일 뿐, css를 통해서(display효과 등) 바꿔줄 수 있다!

 
*display효과 및 사용법
diplay:inline; = 해당 태그가 콘텐츠크기에 맞게 화면을 쓰도록 설정 
display:block; = 해당 태그가 화면전체를 쓰도록 설정
display:none; = 해당 태그가 화면을 쓰지 않도록 설정(화면에서 사라짐.. ㄷㄷ)

display:none;을 써봤는데...h1태그야 어디갔니.. ㄷㄷㄷ...

 
나아가 중복된 효과들을 한 방에 정리할 수 있는 두 가지 방법이 있다면?!

코드가 이렇게 많았는데(border을 몇번이나 치는겨..!!)

 

깔끔!

 
1)콤마(,)를 통해 적용되는 효과가 중복되는 태그 통일하기
2)뛰어쓰기를 통해 같은 종류의  중복되는 효과를 하나로 통일하기 (border을 한 개만 써도 돼!)
 
2.테두리 간격 조정하기

1)padding 효과를 이용해서 테두리 안 콘텐츠와 테두리 사이에 간격 조정하기
2)margin 효과를 이용해서 테두리와 테두리 사이에 간격 조정하기
3)width,height 효과를 이용해서 콘텐츠의 영역 조정하기
 
3. 웹페이지에서 css스타일 확인하기
웹페이지의 오른쪽버튼 클릭해서 검사라는 항목에 들어가보면 적용된 css 스타일을 더 자세하게 확인가능하다!

상단에 h1태그를 선택하면 하단에 어떤 css 효과가 적용되었는지 확인가능!

하단에서 스크롤을 내리면 박스 구조도 그림으로 확인할 수 있다!

 
* css박스 - html태그 하나하나를 박스로 설정해서 부피감을 조정할 수 있다는 점에서 중요함! 
 
9강 박스모델 써먹기
 
1.박스모델 밸런스 맞춰보기
이제 HTML코딩할 때 만들었던 파일 다시 소환! 해서 h1태그에 언더바를 하나 그어줄 것임!

border-bottom : border가 테두리 전체를 의미하니 아래 테두리만 하고 싶다면 bottom을 추가시키자 

그런데 뭔가 간격이 일정하지 않음! 엠비탸J들의 마음에 스크래치를 내는 그런 간격!

무엇이 문제인고? 하니 일단은 h1태그의 테두리와 다른 태그 사이의 간격 margin이 큰 것 같다 이말씀!
바로 0으로 바꿔버렷! 그리고 web과 테두리 사이의 간격 padding도 좀만 늘려주자구~

요렇게~

그러면 이렇게 밸런스 잡힌 언더라인이 그어졌다!
 
 
2.이번에는 ol태그를 구분해주는 선을 그어보자

오른쪽 구분선을 그렸지만

저 끝에 선이 생긴다..

잉 선이 ol태그 텍스트의 바로 옆에 생길 줄 알았는데, 왜 저 끝에 가 있지?
->ol태그는 화면 전체를 쓰는 block level element이기 때문
-->이럴 때는 width 값을 지정해서 ol태그의 폭을 설정해주자고!

ol태그의 범위를 지정해주자고~

 

그러면 원하는 위치에 선이 배치된다!

 
3. 여백 줄이기

요 사이의 여백은 어떻게 줄일까?

검사 도구를 통해 확인해보니 ol태그의 margin이 있었구나

0으로 만들어주면 사라진다!

그러고보니 목록이 너무 위쪽에 붙어 있네, 패딩 값을 제대로 설정해줘서 가운데 위와 옆에 여백이 고르게 오도록 해보자

패딩값을 설정해주니

골고루 여백이 생긴걸 볼 수 있다!

그 다음은 전체적인 여백을 줄여볼까? 검사도구를 보니 body태그의 여백이구만!

body태그의 margin을 0으로 만들어주면

깔끔!!
 
이렇게 박스모델을 활용하는 다양한 방법을 알아보았다.
박스모델을 활용할 때는
1)웹페이지의 검사도구를 통해 내가 조절하고 싶은 태그가 어디인지, 어떤 값을 조정해야 하는지(padding, margin등) 확인해보기!
2)각 태그별로 block혹은 inline이 기본적으로 설정되어 있다. width같은 태그의 크기를 정해주는 효과를 이용하면 태그의 크기를 변경시켜서 내가 원하는 효과를 줄 수 있다는 사실!