본문 바로가기

전체 글221

css 텍스트 프로퍼티로 텍스트 꾸미기 css 텍스트 프로퍼티로 텍스트 꾸미기 네 안녕하세요, 이번 포스팅에서는 css를 이용하여 텍스트를 꾸며보는 시간을 가져보려 합니다. 우리가 사실 웹에서 가장 많이 보는 건 글입니다. 그래서 글에 특정한 꾸밈을 넣어주는 건 의외로 중요한 기능들을 합니다. 예를 들어 밑줄이라던지, 하이라이팅이라던지, 삭제를 위한 수평선 등이 있죠. 그래서 이번 시간에는 텍스트를 어떻게 꾸미는지 알아보도록 하겠습니다. 그럼 지금부터 같이 보시죠. 1. 텍스트 관련 프로퍼티 : text-indent, text-align, text-decoration css에서 텍스트를 꾸밀 때 역시 색깔을 다룰 때처럼 관련 프로퍼티들이 존재를 합니다. 크게 들여쓰기, 정렬하기, 그리고 꾸미기가 있습니다. 여기에서 들여쓰기와 정렬하기는 큰 틀.. 2023. 3. 13.
css 색 프로퍼티에 대하여 알아보기 css 색 프로퍼티에 대하여 알아보기 네 안녕하세요, 이번 포스팅에서는 색 프로퍼티에 대하여 알아보도록 하겠습니다. 우리가 색깔을 쓰기 위해서는 색 프로퍼티를 이용해서 적용을 시켜야 합니다. 그래서 이번 포스팅에서는 그러한 프로퍼티가 무엇이 있는지 알아보도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 색 관련 프로퍼티 : color, background-color, border-color 그리고 이러한 색을 지정할 때 쓰는 css 프로퍼티가 존재를 합니다. 크게 글자색, 배경색, 경계의 색깔을 나타내는 프로퍼티를 많이 씁니다. 이 프로퍼티들은 이렇게 씁니다. color : 색; // html 태그의 텍스트 글자색 background-color : 색; // html 태그의 배경색 border.. 2023. 3. 13.
css로 색 꾸미는 방법에 대하여 알아보기 css로 색 꾸미는 방법에 대하여 알아보기 네 안녕하세요, 이번 포스팅에서는 css에서 색을 꾸미는 방법에 대하여 알아보도록 하겠습니다. 사실 css의 핵심 요소 중 하나라고 할 수도 있는 색은 우리가 보는 웹페이지를 다채롭게 만드는데 일조를 합니다. 그리고 시인성 측면에서도 큰 기여를 하기 때문에 매우 중요한 요소입니다. 그래서 이번 시간에는 css에서는 색을 어떻게 다룰 수 있고, 어떻게 꾸밀 수 있는지 한 번 알아보도록 하겠습니다. 1. css로 표현하는 색 css에서 색은 크게 3가지 방법으로 표현이 됩니다. RGB RGBA HSL 그중에서 가장 많이 사용이 되는 RGB를 이용을 하여 나타내는 방법을 알아볼 것이고, RGB 표현법만 알아도 css를 자유롭게 사용하는 데는 전혀 지장이 없습니다. 1.. 2023. 3. 13.
css 여러 가지 셀렉터 조합하는 방법에 대하여 알아보기 css 여러 가지 셀렉터 조합하는 방법에 대하여 알아보기 네 안녕하세요, 이번 포스팅에서는 셀렉터를 조합하는 방법에 대하여 알아보도록 하겠습니다. 우리가 셀렉터를 사용할 때는 한 가지만 한 시트에 쓰는 것이 아니라, 여러 가지 셀렉터를 써서 서로 상호 유기적인 연결이 되어 하나의 매끄러운 프로그램을 만듭니다. 그래서 이번 시간에는 그러한 방법에 대하여 알아보도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 셀렉터 조합하기 우리는 css를 정말 많이 쓰기 때문에 사실상 셀렉터가 한 개만 있을 수가 없습니다. 그리고 같은 태그가 여러 개인데, 이들이 어디에 속해 있느냐에 따라서 css를 다르게 적용을 해줘야 할 때가 필연적으로 생깁니다. 그래서 그럴 경우에 셀렉터를 조합을 하곤 합니다. 이를테면 .. 2023. 3. 13.
css 이벤트 속성에 대하여 알아보기 css 이벤트 속성에 대하여 알아보기 네 안녕하세요, 이번 포스팅에서는 이벤트 속성에 대하여 알아보도록 하겠습니다. 이벤트 속성은 자바스크립트에서도 자주 쓰이는데, 어떤 사건, 다시 말해 클릭이라던지, 커서가 위로 올라간다던지 등의 행동을 했을 때 그에 상응하는 무언가가 일어나는 것을 말합니다. 이는 css에서도 사용을 할 수 있고, 무조건 자바스크립트로만 모든 기능을 구현해야 하는 것이 아님을 보여드리기 위해서 작성하게 되었습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 여러 가지 이벤트 속성들 이벤트 속성은 제가 이전에 포스팅했던 가상 클래스 셀렉터와 연관이 되는데, 거기에서 쓰이는 셀렉터 입니다. 이전 포스팅은 아래에 기재를 할 테니, 가상 클래스 셀렉터에 대하여 궁금하신 분들은 같이 보시면 감.. 2023. 3. 13.
css 가상 클래스 셀렉터에 대하여 알아보기 css 가상 클래스 셀렉터에 대하여 알아보기 네 안녕하세요, 이번 포스팅에서는 가상 클래스 셀렉터에 대하여 알아보도록 하겠습니다. 가상 클래스 셀렉터도 id와 class 셀렉터만큼이나 자주 쓰이는 셀렉터라서 되게 중요한 셀렉터입니다. 그래서 이번 포스팅에서는 이 가상 클래스 셀렉터를 사용하는 방법에 대하여 알아보도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 가상 클래스 셀렉터 가상 클래스 셀렉터는 '가상'이라는 말에서 알 수 있듯이, 어떤 일이 일어났을 때에만 적용이 되는 셀렉터입니다. 이 셀렉터를 쓸 때는 ':'를 이용하는데, 우리가 적용하고자 하는 태그 뒤에 ':'를 붙이고, 그 뒤에 그것과 연결을 지을 셀렉터 속성을 입력하면 해당 셀렉터가 실행이 될 때 실행이 됩니다. 제가 간단한 예.. 2023. 3. 13.
css 속성 셀렉터에 대하여 알아보기 css 속성 셀렉터에 대하여 알아보기 네 안녕하세요, 이번 포스팅에서는 속성 셀렉터에 대하여 알아보도록 하겠습니다. 속성도 html 파일을 작성할 때 정말 많이 쓰는 요소입니다. 전체적인 뼈대에 들어가는 부속품의 역할을 속성이 하기 때문입니다. 그래서 이번 시간에는 속성을 이용하여 css를 적용시키는 방법을 알아보도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 속성 셀렉터 속성 셀렉터는 말 그래도 html 태그 내에 쓰이는 속성을 이용해서 적용시키는 셀렉터 입니다. 사용 방법은 아래와 같습니다. input[type=text] {color : red;} 이런 식으로 속성을 대괄호로 묶어서 속성을 표현하며, 이 속성이 들어가 있는 자리들이 전부 저 css가 적용되어 바뀝니다. 그럼 바로 예제 코.. 2023. 3. 13.
css 전체 셀렉터에 대하여 알아보기 css 전체 셀렉터에 대하여 알아보기 네 안녕하세요, 이번 포스팅에서는 전체 셀렉터에 대해 알아보도록 하겠습니다. 우리가 웹 페이지를 작성을 하다 보면 페이지 전역적으로 무언가를 적용시켜야 하는 경우가 있습니다. 그럴 때 우리는 전체 셀렉터를 사용합니다. 그래서 이번 포스팅에서는 전체 셀렉터를 어떤 식으로 사용을 하는지 한 번 알아보도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 전체 셀렉터 전체 셀렉터는 html 페이지 전역적으로 적용되는 셀렉터를 말합니다. 때로는 우리가 css를 전체적으로 균일하게 적용을 시켜야 하는 경우가 생기는데, 그럴 경우에 전체 셀렉터를 이용합니다. 전체 셀렉터를 쓸 때는 에스터리스크(*)를 사용하며, 이때 쓰는 '*'을 와일드카드 문자라고 합니다. 이런 식으로 .. 2023. 3. 13.

티스토리툴바