Frontend/HTML, CSS5 [CSS] 케스케이딩 스타일 시트 알아보기 CSS란 Cascading Style Sheet의 약어로, 스타일 시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용된다는 의미 입니다.CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정합니다.Cascading(케스케이딩)은 스타일끼리 충돌하지 않도록 막아 주는 중요한 개념 입니다. 스타일 우선 순위위로 갈 수록 중요도가 더 높습니다.1. 사용자 스타일컴퓨터 사용자가 지정한 스타일2. 제작자 스타일웹 문서를 제작한 제작자의 스타일3. 브라우저 기본 스타일웹 브라우저가 기본으로 정해 놓은 스타일 중요도가 같은 스타일이라면 스타일 적용 범위에 따라 우선순위를 정할 수 있습니다.1. !important2. 인라인 스타일3. id 스타일4. 클래스 스타일5. 타입 스타.. 2024. 8. 27. [CSS] CSS 기본 선택자 선택자는 웹 문서에서 어느 부분에 스타일을 적용할지 알려 주는 것이며, 선택자를 사용하는 방법은 미리 약속되어 있습니다. 전체 선택자스타일을 모든 요소에 적용할 때 사용합니다. 또한, 전체 선택자는 웹 브라우저의 기본 스타일을 초기화 할 때 자주 사용합니다. ‼️ 태그와 요소 구분하기 ‼️HTML에서 태그(tag)와 요소(element) 라는 용어를 자주 만납니다.태그는 말 그대로 태그 자체를 가리키는 반면, 요소는 태그를 적용한 것을 가리킵니다.텍스트 단락 지정하기여기서 태그는 와 를 말하는 것이고 텍스트 단락 지정하기 이것을 '요소'라고 부릅니다. 타입 선택자특정 태그를 사용한 모든 요소에 스타일을 적용합니다. 레드향 비타민 C와 비타민 P가 풍부해 클래스 선택자위에서 살펴본 타입 선택자를 지.. 2024. 8. 26. [CSS] 스타일과 스타일 시트 과거에 공부했던 CSS를 다시 복습하는 차원에서 스타일과 스타일 시트에 대해서 정리하고자 합니다. 스타일 시트웹 문서 안에서는 스타일 규칙을 여러 개 사용합니다. 이런 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한군데 묶어 놓은 것을 스타일 시트라고 합니다.스타일 시트의 분류는 다음과 같습니다.스타일 시트브라우저 기본 스타일사용자 스타일인라인 스타일내부 스타일 시트외부 스타일 시트 1) 인라인 스타일따로 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시레드향껍질에 붉은 빛이 돌아 레드향이라 불린다. 2) 내부 스타일 시트웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것 ... 3) 외부 스타일 시트웹 사이트를 만들 때 하나의 웹 문서로 끝나는 경우는 거의 없습니.. 2024. 8. 26. [CSS] CSS를 활용한 로그인 페이지 꾸미기 HTML로 만든 로그인 페이지를 CSS를 활용하여 꾸며보도록 하겠습니다. 1. 태그를 사용하여 구역을 나눕니다.HTML의 로그인 페이지 아이디, 비밀번호를 입력해주세요 ID: PW: 로그인하기 2. class 속성을 사용하여 스타일 적용하기클래스 선택자는 특정 부분만 선택해서 스타일을 적용할 수 있습니다.우선 로그인 페이지 먼저 스타일을 적용해보겠습니다.가장 중요한 것은 브라우저에서 보여질 때 어디까지가 스타일 적용 구간인지 확인하기 위해서 backgroud-color를 사용하여 구분을 지어놓은 다음 차차 스타일을 적용해 나가는 것이 편리합니다. .. 2024. 8. 7. [HTML] 로그인 화면 만들기 HTML 태그를 활용하여 아래와 같이 간단한 로그인 페이지를 만들어 보겠습니다. 로그인 페이지 ID: PW: 로그인하기 이 때 중요한 것은 태그입니다. 태그는 텍스트 단락(Paragraph)의 약어로 태그 없이 작성할 경우 ID와 PW input 박스가 하나의 행으로 보여집니다. 태그를 사용하지 않은 경우 로그인 페이지 ID: PW: 로그인하기 간단한 HTML 태그들 나는 구역을 나누죠 나는 문단이에요 bullet point!1 bullet point!2 h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요. .. 2024. 8. 7. 이전 1 다음
