본문 바로가기

전체 글221

css id 셀렉터에 대하여 알아보기 css id 셀렉터에 대하여 알아보기 네 안녕하세요, 이번 포스팅에서는 id 셀렉터에 대하여 알아보도록 하겠습니다. id 속성은 class 속성 만큼이나 자주 쓰이는 속성입니다. 그리고 html에서 기능적인 부분을 구현할 때 자주 쓰이는 속성이기 때문에 매우 중요합니다. 이번 시간에는 이 id를 이용하여 css를 적용시키는 방법에 대하여 알아보도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. id 셀렉터 id 셀렉터는 class 속성과 같은 기능을 하기는 하지만, 앞에 붙이는 것이 다릅니다. 셀렉터를 작성할 때 '#'을 붙여서 작성을 합니다. id 셀렉터는 class 셀렉터를 쓰는 것과 같이 '#' 뒤에 본인이 명명하고자 하는 id명을 적고 쓰시면 됩니다. 이에 대한 간단한 코드도 준비를 해봤.. 2023. 3. 13.
css 클래스 셀렉터에 대하여 알아보기 css 클래스 셀렉터에 대하여 알아보기 네 안녕하세요, 이번 포스팅에서는 클래스 셀렉터에 대하여 알아보도록 하겠습니다. html에서 클래스는 id와 함께 기능적인 부분을 구현할 때 자주 쓰이는 기능입니다. 이번 시간에는 그러한 기능을 가진 클래스를 이용하여 스타일을 적용하는 방법에 대해 알아볼 것입니다. 그럼 시작하도록 하겠습니다. 1. class 셀렉터 : '.' 이용 class 셀렉터는 html 태그에서 사용하는 class 속성과 연결을 합니다. 그래서 class 속성을 사용해서만 연결을 지을 수 있다는 특징이 있습니다. 그리고 class 속성 셀렉터를 작성을 할 때는 본인이 작성하고자 하는 클래스의 이름 앞에 '.'을 붙여서 짓습니다. 그럼 간단한 예제와 함께 같이 봅시다. Web Programmi.. 2023. 3. 13.
css 태그 이름 셀렉터에 대하여 알아보기 css 태그 이름 셀렉터에 대하여 알아보기 네 안녕하세요, 이번 포스팅에서는 태그 이름 셀렉터에 대하여 알아보도록 하겠습니다. 셀렉터는 html을 꾸밀 때 사용하는 기능인데, 저번에 했던 포스팅에서 스타일 시트를 작성하면서 봤던 것들이 셀렉터 입니다. 그래서 이번 시간에는 그러한 셀렉터 중 하나인 태그 이름 셀렉터에 대하여 알아보려 합니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 태그 이름 셀렉터 태그 이름 셀렉터는 우리가 쓰는 html 태그의 이름이 그대로 셀렉터로 쓰이는 경우를 이야기합니다. 이를테면 h3, img, label 등 우리가 사용하는 html 태그라면 전부 다 쓸 수 있습니다. 그러면 이러한 예시를 하나 간단히 보여드리도록 하겠습니다. Web Programming 2학기 학습 내용 H.. 2023. 3. 13.
css 규칙에 대하여 알아보기 css 규칙에 대하여 알아보기 네 안녕하세요, 이번 포스팅에서는 css 규칙에 대하여 알아보도록 하겠습니다. css도 프로그래밍 언어의 일부로써, 일련의 규칙이 존재합니다. 그래서 그 규칙을 지켜서 작성을 해야 제대로 된 기능을 발휘할 수 있습니다. 그럼 지금부터 이 규칙들에 대해 알아보도록 하겠습니다. 1. css 규칙 css 작성 시 지켜야 할 규칙들은 아래와 같습니다. css 스타일은 부모 태그로부터 상속이 된다. 스타일 합치기가 가능하고, 오버 라이딩(덮어쓰기)가 가능하다. 1 - 1. css 스타일의 상속 모든 프로그래밍 언어가 그렇듯이, html에서도 상속이 존재합니다. 언제나 부모 태그에 상속이 됩니다. 이걸 좀 더 쉽게 말씀을 드리자면, a라는 태그가 있습니다. 이 a 태그를 p 태그로 감.. 2023. 3. 13.
css link 태그 이용하여 외부 스타일 시트 불러오는 방법 알아보기 css link 태그 이용하여 외부 스타일 시트 불러오는 방법 알아보기 네 안녕하세요, 이번 포스팅에서는 외부에서 스타일 시트를 불러오는 방법에 대하여 알아보도록 하겠습니다. 보통 css 스타일 시트를 적용하는 방법이 크게 2가지가 있습니다. html 본 파일 내부에 style 태그를 써서 직접 입력하기 css 파일을 따로 작성하여 본 html 파일에 호출하기 이번 포스팅에서는 밑에 있는 방법에 대하여 배워보도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 외부 스타일 시트 파일 불러오기 외부에서 파일을 호출하여 쓰는 방법은 실제로 프로그래밍을 할 때 가장 많이 사용하는 방법입니다. 우리가 하나의 본 파일 안에 스타일 시트를 직접 작성하게 되면 필요에 따라서 다시 그걸 똑같이 써야 하는 불편함.. 2023. 3. 13.
css style 태그로 스타일 시트 만들기 css style 태그로 스타일 시트 만들기 네 안녕하세요, 이번 포스팅에서는 css 스타일 시트를 본격적으로 작성을 한 번 해볼 겁니다. css 스타일 시트는 html로 작성한 웹페이지를 좀 더 시각적으로 돋보이게 만들어주는 기능을 합니다. 그래서 정말 빠지면 안 되는 기능 중 하나이죠. 그래서 이번 포스팅에서는 이 스타일 시트를 어떻게 작성을 하는지 한 번 알아보도록 하겠습니다. 그럼 함께 보시죠. 1. 스타일 시트의 구성 : style 태그 이용 제가 이전 포스팅에 작성을 했듯이, 스타일 시트는 이런 식으로 생겼습니다. 이렇게 생겼습니다. 여기에서 괄호 바깥에 빠져있는 것을 우리는 선택자(selector)라고 부르고, 괄호 안에 보이는 것 중에 콜론 양 옆에 글자들이 쓰여 있죠? 여기에서 좌측에 있.. 2023. 3. 13.
css 기초 맛보기 css 기초 맛보기 네 안녕하세요, 이번 포스팅부터는 css를 삽입을 하여 html을 작성하는 법에 대하여 익힐 것입니다. 전 포스팅 까지는 css 없이 순수 html만 사용하여 웹 페이지를 만들었다면, 이번에는 css를 이용하여 살을 붙이는 작업을 할 것입니다. 이번 포스팅에서는 그러한 작업을 돕는 css를 간단히 맛을 보는 시간을 가져보려 합니다. 그럼 지금부터 시작하겠습니다. 1. css란? css는 문자의 색, 모양, 출력 위치 등 외관을 꾸밀 때 사용을 합니다. 그래서 스타일 시트라고 부릅니다. 그리고 css는 style 태그를 이용하여 작성을 하며, head 태그 내에서 작성을 합니다. 그리고 보통 이러한 것을 주로 다룹니다. 색상 및 배경 텍스트 폰트 박스 모델(box model) 비주얼 포.. 2023. 3. 10.
html fieldset, legend 태그 이용하여 폼 요소 그룹핑 하기 html fieldset, legend 태그 이용하여 폼 요소 그룹핑 하기 네 안녕하세요, 이번 포스팅에서는 폼 요소를 그룹핑하는 방법에 대하여 알아보도록 하겠습니다. 폼 요소를 그룹핑 한다는 것은 여러 가지의 폼 요소들을 하나의 설문지와 같은 형태의 양식으로 큰 묶음으로 정리하여 나타내는 것을 말합니다. 이러한 것은 특히 회원 가입 페이지 등을 만들 때 필요한데, 이를 어떤 식으로 만드는 지 한 번 알아보도록 하겠습니다. 1. 폼 요소 그룹핑 하기 : fieldset, legend 태그 이용 그리고 이런 정보 입력 칸을 좀 더 깔끔하게 만드는 방법이 있습니다. 바로 그것들을 그룹핑을 하는 것입니다. 그렇게 되면 좀 더 깔끔한 화면이 만들어지고, 시인성이 좋아지겠죠? 그래서 그럴 때 사용하는 태그는 fi.. 2023. 3. 10.

티스토리툴바