꾸매코딩

[Nomad coder/코코아톡 클론코딩 3일차(1)] Block구조와 id, class 란 무엇인가? (#3.0 ~ #3.9) 본문

Clone Coding/Kakaotalk [HTML + CSS]

[Nomad coder/코코아톡 클론코딩 3일차(1)] Block구조와 id, class 란 무엇인가? (#3.0 ~ #3.9)

꾸매코더 2021. 5. 4. 15:27
반응형

코코아톡 클론코딩 3일차 (#3.0 ~ #3.9)

CSS 내용은 머릿속에서 정리가 되어있지 않았던 내용이기 때문에 중간에 한번 정리를 하고 넘어가기 위해 나누어놨다.

다행히 얕은 지식은 알고 있어서 이해하는 데는 빨랐던 것 같고 이해가 되면서 작년에 했던 삽질들이 기초적인 지식 조금만 알았더라면 얼마나 쉬웠을까?라는 생각이 들었다. 인터넷에 퍼져있는 방대한 지식을 왜 사용하는지는 상관없이 당장에 문제 해결을 위해 코드를 복붙 했던 나 자신에게 많은 문제가 있었음을 느낄 수 있었다.

div - block / span - inline 속성을 알지 못하여 작년에 2시간 넘게 삽질을 했었다.

1. inline / block

Html 코드의 display는 block과 inline으로 나눌 수 있다.

 

1. inline

inline

inline은 height(높이)와 width(너비)를 가지지 않는다.

따라서 상,하 margin을 가질 수 없다.

 

사진과 같이 옆에 다른 태그가 올 수 있다.

 

 

 

 

 

2. block

 

block은 height(높이)와 width(너비)를 가진다.

magin 또한 상, 하, 좌, 우 모두 사용 가능하다.

 

사진과 같이 다른 태그와 같이 올 수 없다.

 

 

 

2.1 box

block은 box의 형태로 사용된다. box는 3개의 큰 특징을 갖는다.

margin / border / padding

 

1. margin : border(경계) 바깥에 있는 공간

 

2. border : box의 경계

 

3. padding : border(경계) 안쪽에 있는 공간

 

 

2. id / class

id와 class는 Html <tag> 중 어떤 <tag>를 지칭하는지 지정해 줄 수 있다.

 

1. id

<head>
	<style>
		#one { ... }
	</style>
</head>
<body>
	<div id="one"><div>
</body>
  • 하나의 태그에 id 속성은 하나만 가질 수 있다.
  • id는 #id명으로 속성을 지정해줄 수 있다.

 

2. class

<head>
	<style>
		.two { ... }
	</style>
</head>
<body>
	<div class="two"><div>
</body>
  • 하나의 태그에 class 속성은 한 개 이상 가질 수 있다.
  • class는 .class명으로 속성을 지정해 줄 수 있다.

3. 느낀 점

직접 해보는 것이 물론 기억에 잘 남고, 더 많은 것을 배울 수 있다고 생각한다.

하지만 내가 직접 해봤던 행동은 정확한 사용법과, 왜 사용하는지 등을 모른 채로 숫자를 변경해가며 때려 맞추는 식으로 CSS를 사용했던 것 같다. 다시금 왜 사용하는지를 반복해서 생각하는 습관을 가져야겠다고 생각하게 되었다.

약간의 이론을 배우면서 즐거운 점은, 관련 없어 보이던 머릿속에 퍼져있던 얕은 지식들이 하나 둘 연결되어 머릿속에서 정리가 되고 있고, 이래서 이랬구나!?라는 느낌을 받고 있다. 

반응형
'Clone Coding/Kakaotalk [HTML + CSS]' Related Articles more