[HTML, CSS] HTML 태그 몇 가지, CSS 속성 몇 가지

[HTML, CSS] 오늘 배우고 주로 사용한 태그

HTML : div, span, a, img, ol, ul

CSS : display, float, position (배치, 위치)

margin, padding (간격 조절)

 

[CSS] display의 대표적인 속성과 특징

display에서 사용할 수 있는 것들은 inline, block, inline-block이 있다고 한다.

block의 특징 (대표적인 태그 : div)

-가로, 세로 크기 적용 가능

-세로 배치

inline의 특징 (대표적인 태그 : span, a)

-가로, 세로 크기 적용 불가능

-가로 배치

inline-block의 특징

-가로, 세로 크기 적용 가능

-가로 배치

여기서 알 수 있었던 건 'block'의 특징을 갖게 되면 가로, 세로 크기를 적용할 수 있다.

반대로 'inline'의 특징을 갖게 되면 가로, 세로 크기 적용이 불가능하고 기본적으로 가로로 배치된다.

 

[CSS] 와이어 프레임에 적합한 속성

block을 가로로 배치하고자 할 때, display:inline-block을 사용하게 되면 가로로 배치는 가능하지만,

사이에 간격이 생기거나, 총합이 부모 요소보다 더 길 경우에는 가로로 배치가 되지 않게 된다.

이와 같은 경우에 사용할 수 있는 건 float:left이다. 그렇게 되면 왼쪽을 기준으로 정렬하게 된다.