분류 전체보기145 CSS 속성 선택자 종류 및 사용법 (Attribute Selectors) CSS 속성 선택자 정리 속성 선택자란CSS 속성 선택자는 HTML 요소의 속성을 기반으로 요소를 선택하는 데 사용됩니다. 이는 HTML 요소의 특정 속성이나 속성 값에 따라 정밀하게 스타일을 적용할 수 있게 해줍니다. 다양한 종류의 속성 선택자와 그 사용 방법은 다음과 같습니다. 기본 속성 선택자 (Attribute Selector)기본 속성 선택자는 특정 속성을 가진 모든 요소를 선택합니다.[element[attribute]] { /* 스타일 규칙 */} 예제: [href]는 href 속성을 가진 모든 요소를 선택합니다.a[href] { color: blue;} See the Pen Untitled by 김성리 (@mkinljed-the-typescripter) on CodePen... 2024. 7. 2. CSS 결합자 종류와 사용법 (Descendant, Child, Sibling Combinators) CSS 결합자 정리 CSS 결합자란CSS 결합자(combinator)는 여러 선택자를 결합하여 특정한 관계에 있는 요소들을 선택하는 데 사용됩니다. 결합자는 요소들 간의 관계를 정의하여 더욱 정밀하고 복잡한 스타일링을 가능하게 합니다. 주요 결합자와 그 사용 방법은 다음과 같습니다. 자손 선택자 (Descendant Selector)특정 요소의 모든 자손 요소를 선택합니다. 공백을 사용합니다. A B { /* 스타일 규칙 */} 예제: div p는 모든 div 요소 내의 모든 p 요소를 선택합니다.div p { color: blue;} See the Pen Untitled by 김성리 (@mkinljed-the-typescripter) on CodePen. 자식 선택자 (Child S.. 2024. 7. 2. CSS 기본 개념, 우선순위와 선택자 사용 방법 CSS (Cascading Style Sheets) 알아보기 CSS 란?CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 정의하고 웹 문서의 외관을 제어하는 언어입니다. HTML이 웹 페이지의 구조와 콘텐츠를 정의한다면, CSS는 이 구조와 콘텐츠의 시각적 표현을 설정합니다. CSS를 사용하면 텍스트의 색상, 글꼴, 레이아웃, 배경 이미지 등 다양한 스타일 요소를 지정할 수 있습니다. CSS 적용 우선순위Cascading 이란 폭포같은, 계속되는 이라는 뜻의 단어인데 이는 CSS가 스타일을 적용하는 우선순위와 관련이 있습니다.CSS가 적용되는 우선순위는 아래와 같습니다.Author Style: css파일에 작성한 스타일User Style: 사이트를 사용하는 유저가 임의로 지정하는 .. 2024. 6. 30. HTML 하이퍼링크 속성과 예제, 문서 내부 링크 걸기 HTML 하이퍼링크웹 페이지 간의 연결을 만드는 데 사용되는 요소입니다. 주로 사용자가 클릭할 수 있는 텍스트, 이미지 또는 기타 요소를 제공하여 다른 웹 페이지로 이동하거나 현재 페이지의 다른 부분으로 스크롤할 수 있도록 합니다. 하이퍼링크는 웹의 기본적인 네비게이션 메커니즘을 제공하며, 웹 문서들 사이의 관계를 정의하는 데 중요한 역할을 합니다. 하이퍼링크 속성href속성href 속성은 태그에서 가장 중요한 속성으로, 하이퍼링크의 대상이 되는 URL을 지정합니다. 이 속성은 절대 URL(https://www.example.com)이나 상대 URL(../index.html)을 포함할 수 있습니다. 또한 href 속성의 값으로 이메일 주소나 페이지 내부의 특정 위치를 가리키는 앵커(#section1) .. 2024. 6. 29. HTML 구조, 시멘틱(Simentic) 요소 알아보기 (header nav section...) HTML 구조, 시멘틱(Simentic)HTML의 시맨틱(Semantic) 요소는 문서의 구조와 의미를 명확히 표현하기 위해 사용되는 태그들을 의미합니다. 시맨틱 태그를 사용하면 웹 페이지의 콘텐츠를 더 잘 설명할 수 있으며, 이는 검색 엔진 최적화(SEO), 접근성, 그리고 코드의 가독성을 향상시키는 데 도움이 됩니다. Simentic 중요성가독성: 시맨틱 태그를 사용하면 HTML 코드를 읽고 이해하기가 더 쉬워집니다. 예를 들어, , , 등을 사용하면 각 부분의 목적과 역할이 명확해집니다.검색 엔진 최적화(SEO): 검색 엔진은 시맨틱 태그를 사용하여 페이지의 구조와 내용을 더 잘 이해하고, 이를 기반으로 검색 결과를 개선할 수 있습니다.접근성: 시맨틱 태그를 사용하면 스크린 리더와 같은 접근성 도.. 2024. 6. 28. HTML 문서의 구조, 요소(Element) 개념과 CSS/JS 스크립트 적용 방법 HTML 시작하기 HTML 이란?HTML(Hypertext Markup Language)는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다. HTML은 elements 로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 합니다. HTML 문서의 구조 This is my page : 해당 문서가 HTML5 표준을 따르는 문서임을 명시합니다. 웹 브라우저에게 문서의 타입과 버전을 알려주는 역할을 합니다. 이를 통해 브라우저는 문서를 올바르게 렌더링할 수 있게 됩니다. first second third fourth f.. 2024. 6. 28. [Git] reset restore 작업 복구 커밋 되돌리기 [Git] reset restore 작업 복구 커밋 되돌리기 git reset (작업 복구, 커밋 단위)git 에서 파일을 수정하고 서버에 등록되기까지 아래와 같은 단계를 거치게 됩니다.작업 디렉토리 (Working Directory): 파일이 수정된 상태스테이징 영역 (Staging Area): 수정한 파일을 커밋전에 임시 저장한 상태로컬 저장소 (Local Repository): 파일을 커밋하여 로컬저장소에 등록원격 저장소 (Remote Repository): 로컬저장소의 커밋을 push 하여 원격 저장소에 등록 이때 커밋단위의 작업사항을 복구하려면 git reset 명령어를 이용할수 있습니다. git reset 명령은 옵션에 따라 여러가지 기능을 수행할수 있습니다. reset / reset HEAD.. 2024. 6. 16. git stash, 작업 변경사항 임시저장 설명 git stash, git 작업내용을 다른 branch로 옮기기 회사에서 다음 신규버전에 들어갈 웹소켓 기반 채팅 기능을 만들다가 프론트 개발 팀원과 협업이 필요하게 되서 현재 작업중인 브랜치말고 새로운 브랜치를 만들어서 작업하기로 했습니다.아직 git이 익숙하지는 않다보니 branch를 새로 만들고 '현재 브랜치의 작업중인 파일을 복사할까?' 라는 생각을 하다가 git에서 좀더 편리한 방법을 제공할것 같아서 찾아보니 git stash 기능으로 변경사항을 일시적으로 보관하는 기능이 있어 사용해보았고 유용한 기능이라 생각되어 이글을 작성하게 되었습니다. git 작업 흐름우선 git의 작업 흐름 간단하게 알아볼 필요가 있습니다. Working Directory(작업 디렉토리)실제로 코드 작업을 합니다. 새로.. 2024. 6. 12. 이전 1 2 3 4 5 6 ··· 19 다음
