본문 바로가기

HTML + CSS23

HTML/CSS - 13. List 1. List 목록을 표현하는 태그는 이다. List Set HashMap (Dictionary) Queue Stack Tree Sorting Search 목록에서 List, Set, HashMap, Search까지 목록 아이템 하나하나를 태그로 감싸주고 목록 전체를 태그로 감싸준다. 은 ordered list라는 의미이다. 을 쓸 경우 안에 있는 목록들 앞에 자동으로 numbering을 해준다. 그 반대인 태그도 있다. 태그는 unordered list라는 의미로, 숫자 없는 목록(굵은 점)을 표현해준다. 여기서 주의할 점은 아무 스타일도 넣고 싶지 않다고 태그만 사용해서는 안된다. 목록은 항상 이나 태그로 감싸야한다. ul의 굵은 점이 마음에 들지 않는다면 css를 적용하여 삭제할 수도 있다. 삭제하.. 2020. 6. 15.
CSS - 12-1. margin auto 1. 레이아웃 div { background-color: yellow; margin-bottom: 20px; } .has-width { width: 150px; } inline, block 성질을 앞에서 다뤘는데 거기에 더해 margin의 값(설명)을 하나 더 추가하겠다. block 속성은 원래 좌우 끝 다 차지하는데 width가 부여되면 늘어나지 않게 된다. 이때 margin에 auto로 설정하면 가로 중앙에 오게 할 수 있다. .center { margin: 20px auto; } 이렇게 2개의 값만 있을 때의 의미는 첫 번째는 위, 아래의 margin이고 두 번째는 왼쪽, 오른쪽에 주는 margin이라는 뜻이다. 위 코드에서 처럼 왼쪽, 오른쪽을 auto로 설정할 경우 좌우의 나머지 공간을 균등하게.. 2020. 6. 14.
CSS - 12. Block vs Inline 1. Block vs Inline 대부분의 HTML element(이하 요소)는 block 요소이다. 예를 들어, , , , , , , 등이 모두 block 요소에 해당하는 태그들이다. block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여 넣을 수 없다는 뜻이다. block 요소와 성질이 반대인 inline 요소도 있다. , , 태그 등이 inline 요소이다. inline은 말 그대로 inline요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻이다. 첫 번째부터 네 번째까지는 태그 같은 block 요소이다. 노란색 영역이 해당 요소가 차지하는 영역이다. 텍스트는 짧은데 그 이상으로 영역을 차지하고 있는 걸 볼 수 있다. block 요소들은 이런 식으로 항상 새 줄에서 .. 2020. 6. 14.
HTML/CSS - 11. 이미지 1. 태그로 이미지 넣기 이미지를 웹 사이트에 추가하는 방법이 여러 가지 있는데, 가장 많이 쓰이는 방법은 img 태그를 사용하는 것이다. alt: 이미지가 뜨지 않았을 때(서버에서 이미지가 삭제됐거나 잘못된 이미지 주소일 때..), 이미지 대신 보여줄 텍스트 src: 이미지 파일 경로 or 이미지 url 주소 img 태그의 속성(attrubute)에는 width, height가 있어서 html에서 이미지 크기를 조정할 수 있다. 하지만 유지보수나 좋은 코딩 습관을 위해 css는 항상 index.css에서 작성하는 것이 좋다. img { width: 150px; } 위 코드처럼 css에 가로만 지정해주어도, 가로의ㅏ 150px 비율에 맞춰 세로도 알맞게 바뀐다. 즉, 가로/세로 중에서 하나의 값만 입력해.. 2020. 6. 14.

티스토리툴바