개발자의 개발 블로그

일단, 인라인 element과 블록 element가 존재한다.

블록 엘리먼트는 컨텐츠의 너비와 무관하게 전체를 차지하기 때문에, 수평으로 다른 엘리먼트를 같이 사용할 수 없다.

1. display:block;

위와 같이 div 3개를 만들고, display를 block으로 한다면, width가 150px임에도 불구하고 모두 세로로 정렬된다.

블록은 페이지 전체 너비를 혼자 사용한다고 볼 수 있다.

2. display: inline-block;

이 경우, 블록은 유지되지만, 인라인 형태로 보여지게 된다.

즉, 너비를 해당 엘리먼트의 너비만큼만 사용하고 나머지 공간을 다른 엘리먼트들과 나눠쓰게 된다.

따라서, 다음과 같은 모습이 나온다.

3. display: inline;

이렇게하면, 블록 속성이 전부 무효화된다. 즉, 내부 요소 텍스트만큼만 차지하게 된다.

블록에서 width와 height를 선언했지만, 이것들은 모두 무시된다.

따라서, 다음과 같은 모습이 나온다.

 그리고, 아래와 같이 divbox 속성에 경고가 표시된다.

내용은 위 설명한 것과 같다.

display를 inline으로 하면서, 블록이 아닌게 되어버렸기 때문이다.

태그를 직접 입력하면, 시간도 오래 걸리고 오타 확률이 늘어난다.

자동으로 태그를 생성하는 방법은 다음과 같다.

1. 가장 간단히, div 입력 후, 자동완성을 이용해서 태그를 선택한다.(HTML Snippets 이 깔려있어야 한다)

2. 태그와 함께 id나 class 바로 만들기

p.className를 입력하면, p 태그에 className이라는 class 속성이 들어간채로 생성된다.

a.uniqueValue를 입력하면, a 태그에 uniqueValue라는 id 속성이  들어간채로 생성된다.

3. div 만들기 

태그를 입력하지 않고 하면, 기본적으로 div 태그가 만들어진다.

.name 입력한 뒤, 엔터를 입력(아래와 같이 하단에 Emmet Abbreviation) 이 나와야 함.

결과

<div class="name"></div>

#name 입력한 뒤, 엔터를 입력.

결과

<div id="name"></div>

id와 class를 여러개 만들고 싶다면?

.className#idName

결과

<div class="className" id="idName"></div>

.className#idName.dekek.ekek

결과

<div class="className dekek ekek" id="idName"></div>

하지만, id는 한개만 생성할 수 있으므로,

.className#idName.dekek.ekek#lastID

결과

<div class="className dekek ekek" id="lastID"></div>

와 같이 마지막 #값이 id 값이된다.

¡No te vayas!

이것이 가지마! 이다.

재귀동사 irse(가버리다, 떠나다) 의 tú에 대한 부정명령으로  "가지마" "떠나지마" 라는 뜻이다.

반대로, "가버려" 혹은 "꺼져" 라고 말할때는 

¡Vete!

라고 한다.

Vete라는 말을 들었다면 다른곳으로 가면 된다. ㅎㅎㅎ