HTML | CSS (TIL 2. KEY POINT)

margin, border, padding의 차이점??

처음 HTML을 공부할 때, 가장 먼저 저에게 혼동을 주는 개념은 margin과 padding의 차이였습니다.
언제 margin과 padding을 사용해야 할 지, 헷갈릴 때가 한두번이 아니었습니다. 두 개념을 정확히 이해하지 못한 상태에서 Boder까지 알게되면서 더 이해하기 쉽지 않았습니다.

쉽게 설명하면, "외", "내", "경"으로 설명할 수 있습니다. 컨텐츠(가장 중심?!)를 중심으로 margin은 외부 여백, padding은 내부 여백, border은 이 둘 상이의 경계라고 생각하면 됩니다.

예를 들어 설명을 하면, 초코바이 안에 있는 크림은 컨텐츠(가장 중심?!)이고 그를 덮고 있는 빵은 padding이고 초코부부분은 border 입니다 그리고 봉투와 초코파이 사이의 공간을 margin 이라고 생각하면 됩니다.

Margin과 Padding의 적용순서는 위에서부터 시계방향 입니다.

border

Border의 순서는 "두께 - 스타일 - 색깔" 입니다.

border: 1px dotted #0000ff;

일반적으로 p태그의 밑줄을 넣을 때는 underline 을 사용하기는 하지만, 커스터마이징을 하는데, 어려움이 있어서, Border를 주로 이용한다.

p{ text-decoration: underline; }
p{ border-bottom: 1px solid black; }

box-sizing

box-sizing을 사용하지 않고 박스 형태의 컨텐츠를 만들었을 경우, width와 height 값에 padding과 border의 값을 모두 더해주게 됩니다. 이렇게 될 경우, 코드를 만들때마다, padding과 border값을 항상 염두해 놓고 있어야만 합니다.
이러한 귀찮은 일을 없애기 위해서, box-sizing을 사용합니다. box-sizing을 사용하면, 설정한 width와 height값에 padding과 border의 값이 포함되게 됩니다. 일반적으로 웹페이지에는 box-sizing을 포함합니다. 아래는 포함한 코드 입니다.

* { box-sizing: border-box; }

Inheritance(상속), Grouping(그룹)

Inheritance(상속)은 css가 가진 특성중 하나입니다. 부모의 특성이 자동으로 자식에게 적용이 되는 것을 의미합니다. 하지만 본인(자식)이 갖고 있는 특성과 부모의 특성이 충돌? 할 때는 본인(자식)이 갖고 있는 특성이 나타납니다.

css의 작성법을 살펴보면, 먼져 selector를 선택하고, 속성(property)를 입력합니다. 이 방법이 고정이라면, 같은 속성을 넣고 싶은 selector를 줄줄이 써야하는 불편함이 생길 수 있습니다. 이를 해결하기 위해서 grouping(그룹)이 존재합니다. 2개 이상의 selector에 같은 속성을 넣고 싶을 때는 그냥 나열 하면 됩니다.

.class, #id, span{ color: green; }

css selector

이번에는 selector의 표현방법과 우선순위에 대해서 이야기해보겠습니다. 먼져 class와 id가 태그의 selector 일 경우, 결합해서 표현할 수 있습니다. p태그 안에 p-se라는 selector(class)가 있다고 가정하고, p-se의 폰트사이즈와 칼라를 20px에 gray로 표현하고자 하면, 아래코드로 표현할 수 있다.

p{ font-size: 20px; }
.p-se{ color: gray; }

위와 반대로. 아래처럼도 표현 할 수 있습니다.

p.p-se { 
font-size: 20px;
color: gray; 
              }

그런데, 만약 아래와 같은 코드가 있을 때, p-se의 font-size는 몇 px일까요?

p { font-size: 20px; }
.p-se { font-size: 30px; }
p.p-se { font-size: 10px; }

정답은 10px 입니다. 이유는 css에는 우선순위가 있기 때문엡니다. 위의 3코드보다 강력한 방법은 html에서 바로 style 을 적용하면, 그 값이 바로 적용이 되지만, css 파일에서 위의 3코드 줄줄이 나열되어 있을 때는 우선순위에 따라서 값이 적용이 됩니다. tag에서 id로 갈 경우, 우선순위가 높아집니다.

tag<class<id<inline css(직접적용)

img 태그

이미지를 웹사이트에 넣고 싶을 때, img 태그를 주로 사용합니다. 참고로 img 태그는 종료태그가 존재하지 않습니다.
src는 source의 약자로 이미지 파일을 가져오는 경로를 의미합니다. alt는 지정한 이미지가 뜨지 않았을 때, 이미지 대신에 텍스트를 보여줍니다. alt는 굳이 사용하지 않아도, 태그는 정상적으로 작동합니다.

<img alt = "HTML" src = "https://www.naver.com">

위에 코드처럼 html에서 이미지를 불러오는 방법 뿐만 아니라, css에서도 이미지를 불러올 수 있습니다. 주소부분에 경로를 입력하면 됩니다.

{ background-image: url("주소") }

background-image를 통해서 배경 이미지를 삽있했을 경우, 배경이미지가 반복적으로 적용이 될 경우, background-repeat: no-repeat ; 을 사용해서 이미지가 반복되는 것을 막을 수 있다. 또한, 화면 전체에 배경 이미지를 적용하고 싶을 때는 background-size: cover; 를 사용하면 된다.

li 태그

웹상에 리스트를 나타내고 싶을 때는 어떻게 할까요? li 태그를 사용하면 됩니다. li 태그를 사용할 때는 ol 과 ul에 대해서 알아야 합니다. ol은 ordered list, ul은 unordered list 이빈다. 즉, ol태그 안에 li태그를 사용하게 되면, 앞에 번호가 생성됩니다. 반면, ul 태그를 사용하게 되면 앞에 dot(점)이 생깁니다.
dot(점)을 없애 버리고 싶으면 css에서 아래 코드를 적용하면 됩니다.

ul { list-style: none; }

그렇다면, dot(점)이 아닌 선 또는 점선 등을 만들어서 표현하고 싶으면 어떻게 하면 될까요?
border를 사용하면 됩니다. 엑셀에서 셀에 선을 넣는거랑 비슷하게 생각하시면 편합니다. 이 때 항상 확인해야 할 부분은 padding과 margin 값입니다. 컨텐츠와 border 사이에는 padding이 존재하죠?? 이 때 padding 값을 0으로 주게 되면, 앞에서 만든 border와 컨텐츠가 붙어서 좀더 예쁘게 표현 할 수 있습니다. 위쪽, 오른쪽, 아래쪽, 왼쪽 모두 생각해야 합니다. 왜냐!!! 우린 박스를 만들었으니깐요!! li 태그 간에 간격을 띄울 때도, 아! 박스였지! padding을 쓰자!! 라고 꼭 이해하기를 바랍니다... 이 글을 읽는 분이 있다면요... 그리고 margin 써도 됩니다. 그건 사용자 마음대로~

table 태그

list의 연장선으로, table까지 확인해 보겠습니다. table 태그는 웹상에 표를 보이게끔 도와줍니다. 먼져 우리는 "table은 가로로 정렬이 된다." 라는 인식을 머리에 박고 시작해야 합니다. 그래야 헷갈리지가 않아요.

table 태그를 사용할 때는 먼져 table 태그를 사용하고 안에 th, tr, td 태그들을 사용 하게 됩니다. th은 table heading의 약자입니다. 뭐가 떠오르죠?? 머리?? 머리는 우리 몸에서 가운데 있고, 가장 바로 보이죠?? 억지같지만, th 태그를 사용하게 되면 바~로 가운데 정렬되고! 글씨 두께가 진해진답니다. tr은 table row의 약자입니다. 엑셀에서 row 많이들 사용해 보셨을 것 같아요. row는 행입니다. 제가 앞에서 가로로 정렬이 된다 라는 인식을 왜 넣어두라고 했냐면, tr 때문입니다. tr태그 하나가 한 행이라고 생각하면 됩니다. tr 태그 안에 td태그가 들어가게 되는데, td는 table data의 약자입니다. 즉, 실직적으로 우리가 이야기 하고 싶은 컨텐츠의 내용인거죠. 즉, table, tr, th, td 순으로 외우고 사용 하시면 훨씬 잊어버리지 않고 잘 사용하실 수 있을 거에요.

<table>
 <tr>
  <th><th>
  <td>사과</td>
  <td>바나나</td>
 </tr>
 <tr>
  <td>1번 가계</td>
  <td>1개</td>
  <td>2개</td>
 </tr>

그리고 다들 엑셀에서 "셀 합치기" 를 많이들 사용해 보셨을 거에요. HTML에서도 사용할 수 있습니다. colspan(열), rowspan(행) 속성을 사용하면 됩니다. 아래 숫자는 적용하는 값을 기준으로 몇 행, 몇 열까지 합칠거냐를 의미합니다.

<td colspan="2">""</td>
<td rowspan="3">""</td>

배경색을 변경하고 싶으면 css에서 background-color을 적용해 주면 됩니다.

input 태그

막상 HTML을 배우면, 내가 웹을 만들고 있는건가, 라는 생각을 하게 됩니다. 근데, input 태그를 익히고 사용을 하게 되면, 아! 내가 홈페이지를 만들고 있구나, 라는 생각을 하게 됩니다. 왜 그럴까요? 아마도, 웹 상에 내가 무언가 쓸 수 있는 공간이 생겨서 그런것이 아닐까요? 저는 그랬습니다.

input 태그를 사용할 때 type과 placeholder 속성을 먼져 알고 있어야 합니다.
"너가 쓸 수 있는 공간을 만들 건데, 어떻게 표현이 되었으면 좋겠니?" 에 대한 대답이 될 것 같습니다. input을 쓰고 바로 type을 지정해줘야 합니다. text??, password??, number?? password 딱 보면 감이 오지 않습니까?? 일반적으로 가장많이 사용하는 속성은 text입니다. 아무거나 막쓸수 있으니깐요, password를 사용하면, 입력한 것들이 * 로 나타납니다. number는 당연히 숫자만 가능하구요. placeholder는 도움말이라고 생각하면 됩니다.

textarea 태그에 대해서도 알아보겠습니다. ID나 비밀번호 등은 아무리 길어도 대부분 10자를 넘지는 않습니다. 반면, 방명록이나 댓글을 달 때는 그 보다 많은 경우가 대부분이죠. 이 때 사용하는 태그가 textarea입니다. textarea태그 text입력을 통해서 방명록인지, 댓글인지 나타낼 수 있습니다. 물론 삭제도 되구요.

참고로 input과 textarea는 inline요소를 갖고 있기 때문에 한줄에~ 쫙 표시가 됩니다.
당연히 block요소를 적용해주면 세로로 나열이 되겠죠~