BLOCK8 css text-indent 속성 이번 글은 텍스트의 들여쓰기, 내어쓰기를 할 수 있는 css 속성인 text-indent에 대해서 알아보도록 하겠습니다. - text indent란? 텍스트의 들여쓰기, 내어쓰기를 하는 속성값으로, 값이 양수이면 들여쓰기, 값이 음수이면 내어쓰기가 됩니다. 기본값은 0으로, 내어쓰기를 할 때에는 해당 영역 밖으로 텍스트가 나갈 수 있으니 내어쓰기를 할 때에는 왼쪽에 여백을 적절히 줘야 합니다. - 예제 코드 HTML is the standard markup language for Web pages. With HTML you can create your own Website. HTML is easy to learn - You will enjoy it! In this HTML tutorial,.. 2021. 12. 26. css text-align 속성 이번 글에서는 텍스트의 정렬 방향을 나타내는 css 속성인 text-align에 대해서 다뤄보도록 하겠습니다. text-align은 문서를 수평으로 정렬할 때 쓰이는 것으로, 전에 한번 다뤘었던 수직 정렬에 대한 속성인 vertical-align과 비슷하고, 수평과 수직에서 차이점이 있다고 보시면 됩니다. (https://begindevelop.tistory.com/38) - 속성값 및 특징 1. block요소에만 text-align 속성을 적용할 수 있습니다. 2. 정렬되는 것은 block 안의 inline 요소만 가능합니다. (텍스트, 이미지 등도 포함) 속성값 설명 text-align: left 왼쪽 정렬 text-align: right 오른쪽 정렬 text-align: center 중앙 정렬 .. 2021. 12. 23. css block, inline, inline-block 속성 이번에는 웹페이지 상에서 html 태그들이 어떻게 보여지고 다른 태그들과 어떻게 상호 배치되는지 결정하는 display의 속성값 중 가장 기본적이라고 할 수 있는 block, inline, inline-block에 대해 알아보는 시간을 갖도록 하겠습니다. - display: inline 먼저 inline 속성부터 보겠습니다. display가 inline으로 지정된 태그는 줄바뀜 없이 다른 태그들과 나란히 배치됩니다. (span, a, em과 같은 태그들이 inline 속성입니다.) span a em 이렇게 나란히 배치되는 것을 볼 수 있습니다. 하지만 inline 속성은 width와 height 값을 지정해도 무시되고, margin과 padding 속성은 좌우 간격만 반영이 되고 상하 간격은 .. 2021. 12. 22. css margin:0 auto 오늘은 제 포스팅에서도 가운데 정렬을 하기 위해 종종 썼었던 margin:0 auto의 쓰임새에 대해서 알아보도록 하겠습니다. - margin:0 auto의 쓰임새는? margin:0 auto는 이 속성값이 들어가는 html 요소에게 가운데 정렬을 시켜주고 싶을 때 사용하게 됩니다. 근데 가운데 정렬을 하려고 하는데 왜 margin값을 저렇게 주는 것인가 궁금증이 생길 수 있습니다. 그것에 대해서 알기 위해서는 먼저 margin의 속성에 대해서 좀 알아야 합니다. (참고 자료 : https://begindevelop.tistory.com/28) margin값은 해당 요소와 주변의 요소 사이에 여백을 주는 css 속성입니다. 간단하게 하나 예시를 들어보면, 안녕 하세요. 첫 번째 div는 위아래 1.. 2021. 12. 20. display flex 속성 이번 시간에는 grid 속성에 앞서 display flex 속성에 대해 알아보겠습니다. (grid와 flex는 겹치는 부분이 있어, flex를 보고 grid를 보면 수월하게 이해할 수 있을 것입니다.) - flex란? flex는 레이아웃 배치 전용으로 고안된 css 속성입니다. 그래서 비슷한 배치 속성인 float이나 inline-block과 같은 속성보다 훨씬 배치에 있어 강력한 성능을 보여주기도 합니다. helloflex abc helloflex 이렇게 전체를 둘러싼 div class="container"가 flex container가 되고, 그 안에 있는 자식들은 flex item이 되어 container의 영역 안에서 자신의 가로 길이만큼 가로로 배치가 되는 것입니다. 여기서 부모 co.. 2021. 12. 17. 공지, 뉴스 영역 마무리&footer 영역 제작(1) 지난번에는 여기까지 했었습니다. 오늘은 컨텐츠 영역에서 공지와 뉴스 영역을 마무리 짓고, 원본 페이지의 마지막 단계인 이 부분까지 최대한 건드려 보는 것으로 하겠습니다. (지난번 글들에서 설명했었던 개념들 같은 경우는 간략한 설명만 하고 넘어갈 수 있습니다.) 현재 남은 부분은 공지와 뉴스의 아래 텍스트들을 리스트 형태로 적용을 시켜야 하는데, 원본 페이지는 이렇게 생겼습니다. 보면 class left에 속해 있는 좌측은 리스트들이 좌우로 배치되어 있고, class right에 속해 있는 우측은 일반적인 리스트의 형태처럼 세로로 정렬이 되어 있습니다. 먼저 공통되는 부분부터 보면 텍스트들의 css가 동일하다는 것을 알 수 있습니다. (일반 텍스트와 날짜를 표시하는 텍스트의 css) 그럼 이 부.. 2021. 12. 15. 이전 1 2 다음
