본문 바로가기

전체 글161

CSS FlexBox 사용법: 컨테이너와 아이템 속성 알아보기 CSS FlexBox란? FlextBox 개념FlexBox(Flexible Box Layout)는 CSS 레이아웃 모듈로, 컨테이너 안의 아이템들을 효율적으로 배치하고 정렬하기 위해 사용됩니다. FlexBox를 사용하면 레이아웃을 더 쉽게 구성하고, 다양한 화면 크기나 장치에 맞게 반응형 디자인을 구현할 수 있습니다. Container, ItemFlexBox 는 컨테이너, 아이템에 각각 부여할수 있는 속성들이 있습니다. main axis, cross axis (중심축, 반대축)FlexBox 는 중심축(main axis)과 반대축(cross axis) 개념이 있습니다. 상황에 따라 중심축이 수평선이면 반대축은 수직선이 되고 수직선이 중심축일때는 수평선이 반대축이 됩니다. FlexBox Container 속.. 2024. 7. 7.
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.

티스토리툴바