본문 바로가기

분류 전체보기221

css 리스트를 꾸밀 때 사용하는 기본 프로퍼티 알아보기 css 리스트를 꾸밀 때 사용하는 기본 프로퍼티 알아보기 네 안녕하세요, 이번 포스팅에서는 리스트를 꾸미는 방법애 대하여 알아보도록 할 건데, 그중에서 리스트를 꾸밀 때 스는 기본 프로퍼티에 대하여 간략히 알아보는 시간을 가져보려 합니다. 우리가 그냥 html 태그를 이용해서 리스트를 만들면 다소 밋밋해 보일 수 있습니다. 그래서 그럴 때 사용을 합니다. 그러면 그러한 프로퍼티가 어떤 것들이 있는지 한 번 알아보도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 리스트 꾸미기 프로퍼티 알아보기 일단 리스트를 꾸미지 않은 html 태그와, 그걸 작성해서 열어 본 웹을 보여드리도록 하겠습니다. 커피 메뉴 Espresso Cappuccino Cafe Latte 기본적으로 이런 식으로 짭니다. 그럼 결.. 2023. 4. 24.
css overflow 프로퍼티로 콘텐츠 자르기 css overflow 프로퍼티로 콘텐츠 자르기 네 안녕하세요, 이번 포스팅에서는 콘텐츠를 자르는 방법에 대하여 알아보도록 하겠습니다. 우리가 html 문서를 작성을 하다 보면 불가피하게 글을 잘라야 하는 경우가 생깁니다. 그럴 때 쓰는 방법이며, 이걸 어떤 식으로 사용을 하는 지 한 번 알아보도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. overflow : visible|hidden|scroll|auto 사용하여 콘텐츠 절삭 여부 결정하기 우리가 html 태그 내에서 사용하는 컨텐츠 자르기 여부를 결정짓는 프로퍼티는 overflow입니다. overflow 프로퍼티의 각각의 값들은 이러한 기능을 가집니다. overflow : visible /* 컨텐츠가 잘리지 않고 태그 영역을 넘어서 출력.. 2023. 4. 24.
css visibility 프로퍼티로 태그 숨기거나 공개하기 css visibility 프로퍼티로 태그 숨기거나 공개하기 네 안녕하세요, 이번 포스팅에서는 html 태그를 숨기거나 공개하는 방법에 대하여 알아보도록 하겠습니다. 우리가 웹 페이지를 작성할 때 태그를 숨기거나 공개를 할 수도 있습니다. 예를 들어 괄호 채우기 문제를 만든다고 한다면, 이런 걸 적용해서 쓸 수 있습니다. 그래서 이번 포스팅에서는 그러한 방법을 한 번 보도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. visibility : visible|hidden으로 태그 공개하거나 숨기기 기본적으로 html 태그는 공개가 되어있습니다. 그것이 html 태그의 기본 세팅이기도 합니다. 하지만 필요에 따라서 그 기능을 숨김으로 바꿔야 할 때가 있습니다. 앞서 제가 말씀드렸던 괄호나 빈칸 채우.. 2023. 4. 24.
css z-index 프로퍼티 이용하여 html 태그 수직으로 쌓기 css z-index 프로퍼티 이용하여 html 태그 수직으로 쌓기 네 안녕하세요, 이번 포스팅에서는 html 태그를 수직으로 겹겹이 쌓는 방법에 대하여 알아보도록 하겠습니다. 이 방법은 사실 많이 쓰이는 방법은 아니지만, html 태그를 이용하여 간단한 웹 게임을 만들 때 쓰곤 합니다. 그래서 웹의 종류는 다양하며, 일반적인 웹 사이트의 한 종류를 만드실 분들도 계시겠지만, 웹 게임 등을 만드실 분들도 계시리라 생각합니다. 그래서 그런 분들을 위해 어떻게 사용을 하는지 보여드리려 합니다. 그럼 지금부터 시작하도록 하겠습니다. 1. z-index 사용해보기 z-index를 사용할 때는 보통 블록 태그를 이용하여 많이 씁니다. 그중에 가장 대표적인 사례가 바로 div 태그입니다. 사용 방식은 아래와 같습니.. 2023. 4. 24.