프로그래밍 공부 노트

텍스트 또는 이미지를 수직으로 정렬하는 속성으로 vertical-align 속성을 사용한다. block요소에서는  사용이 불가하며 inline과 inline-block에서만 사용가능한 속성이다.  왜냐하면 vertical-align은 행 방향으로 나열된 요소들을 수직정렬하는 속성이기 때문이다. 즉 inline과 inline-block 소형제 태그끼리 수직정렬하는 속성이다. 그래서 줄바꿈을하는 <div>태그에는 사용이 불가하다.  vertical-align속성의 값들은 다음과 같다. /* keyword values */ vertical-align: baseline; => 부모요소 기준 정렬 vertical-align: sub; =>아래첨자 기준 정렬 vertical-align: super; => 위첨자 기준 정렬 vertical-align: text-top; => 요소 상단을 부모 font의 상단에 맞춰 정렬 vertical-align: text-bottom; => 요소 하단을 부모 font의 상단에 맞춰 정렬 vertical-align: middle; => 부모 요소의 중앙에 맞춰 정렬 vertical-align: top; => 부모 요소의 상단에 맞춰 정렬 vertical-align: bottom; => 부모 요소의 하단에 맞춰 정렬 /* <length> values */ vertical-align: 10em; vertical-align: 4px; => 0px은 baseline과 같은 값이다. 0px을 기준으로 위 아래로 위치를 조절 /* <percentage> values */ vertical-align: 20%; => 0%는 baseline과 같은 값이다. 0을 기준으로 위 아래로 위치를 조절 /* Global values */ vertical-align: inherit; 부모 요소로부터 해당 속성의 계산값을 받아 사용 vertical-align...

inline display 속성이 inline으로 지정된 엘리먼트는 줄 바꿈 없이 컨텐츠가 옆으로 나란히 나열된다. 대표적으로 <span> 태그가 inline 속성을 가진 태그이다. display: inline 속성을 사용할 때 주의할점이 있는데 width와 height 속성을 적용하더라도 무시된다. inline  속성은 무조건 해당 컨텐츠 크기만큼 width와 height가 고정이기 때문이다. 또한 margin과 padding 속성운 좌우에만 적용이 가능하고 상하에는 적용하더라도 무시된다. block display 속성이 block으로 지정된 엘리먼트는 해당 컨텐츠가 한줄을 모두 차지해 다른 컨텐츠가 줄바꿈이 되도록한다. 대표적으로 <div> 태그가 block 속성을 가진 태그이다. display: block 속성을 사용할 때는 inline 속성과 달리 width, height 그리고 margin, padding 속성이 좌우상하 모두 적용 가능하다. inline-block display 속성이 inline-block으로 지정된 엘리먼트는 위 두 속성(inline, block)을 하이브리드한 속성이다. 외부적으로 보여지는 표현되는 방식은 inline 속성과 같이 동작하지만 block 속성에서만 적용할 수 있었던 witdh, height, margin, padding 속성 적용이 가능하다. 즉, 외부적으로는 inline 속성처럼 동작하지만 내부적으로는 block 속성처럼 동작한다. 대표적으로 <button>, <input>, <select> 태그 등이 있다.

display 속성을 이용하면 블록 레벨 요소도 인라인 레벨 요소로 변경이 가능하며 반대로도 변환이 가능하다. display 속성의 경우 여러 경우에 사용되지만 일반적으로 세로로 출력되는 목록을 가로 네비게이션 메뉴로 바꿀때 사용한다. { display : block; } 블록 레벨 요소는 해당 컨텐츠의 크기가 아닌 해당 컨텐츠가있는 해당 행을 모두 차지하며 다른 컨텐츠가 추가되면 줄바꿈이 발생하게 된다. { display : inline; } 인라인 레벨 요소는 해당 컨텐츠의 크기 만큼만 화면에서 차지한다. 그래서 추가적으로 컨텐츠가 추가되어도 같은 행에 출력될 수 있다. 예시로 보면 <! DOCTYPE html > < html lang = "ko" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < title > Document </ title > < style > #block img { display : block ; margin : 5px ; } </ style > </ head > < body > < p > inline 방식 </ p > < div id = "inline" > < img src = "./images/pic.png" alt = "초록색 사진" /> < img src = "./images/pic.png" alt = ...