본문 바로가기
반응형

전체 글22

CSS 표현 방식 정읭 CSS(Cascading Style Sheets)는 웹 페이지의 시각적 표현을 담당하는 스타일링 언어입니다. HTML이나 XML로 작성된 문서의 레이아웃, 색상, 글꼴 등을 정의할 수 있습니다. CSS는 여러 가지 방식으로 웹 페이지에 적용될 수 있습니다.인라인 스타일(inline style): HTML 요소 내에 직접 스타일을 작성하는 방식입니다. 예를 들어, 파란색 텍스트와 같이 사용할 수 있습니다. 그러나 유지보수가 어렵고 코드의 가독성을 떨어뜨리기 때문에 권장되지 않습니다.내부 스타일(internal style): HTML 문서의 외부 스타일(external style): 별도의 CSS 파일을 작성하고 HTML 문서에서 이를 링크하여 사용하는 방식입니다. 예를 들어, styles.css라는 파일을.. 2024. 6. 25.
CSS 박스 모델 이해하기 CSS 박스 모델은 웹 페이지 레이아웃을 설계할 때 매우 중요한 개념입니다. 모든 HTML 요소는 박스(box) 형태로 구성되며, 이 박스는 콘텐츠(content), 패딩(padding), 보더(border), 마진(margin)으로 이루어져 있습니다. 이를 통해 요소 간의 간격, 크기, 테두리 등을 조절할 수 있습니다.박스 모델의 각 구성 요소에 대해 자세히 알아보겠습니다.콘텐츠(Content): 콘텐츠는 박스 모델의 중심 부분으로, 텍스트나 이미지와 같은 실제 내용이 들어가는 영역입니다. width와 height 속성을 사용하여 콘텐츠 영역의 크기를 조절할 수 있습니다.패딩(Padding): 패딩은 콘텐츠와 보더 사이의 내부 여백을 의미합니다. 패딩은 콘텐츠 주위에 투명한 공간을 추가하여 콘텐츠와 보.. 2024. 6. 25.
CSS의 상속과 우선순위 CSS를 사용하다 보면 같은 요소에 여러 스타일이 적용될 때가 있습니다. 이때 어떤 스타일이 적용될지 결정하는 것이 CSS의 상속과 우선순위입니다. 이번 글에서는 CSS의 상속과 우선순위에 대해 알아보겠습니다. 상속(Inheritance): CSS에서는 부모 요소에 적용된 스타일이 자식 요소에 자동으로 적용되는 경우가 있습니다.예를 들어, 부모 요소에 color 속성을 설정하면 자식 요소들도 그 색상을 상속받습니다.div { color: blue;}  이 텍스트는 파란색입니다. 이 텍스트도 파란색입니다.우선순위(Specificity): 여러 스타일 규칙이 같은 요소에 적용될 때, 어떤 규칙이 우선되는지를 결정하는 것이 우선순위입니다.우선순위 계산 방법:인라인 스타일: 가장 높은 우선순위를 가집니다... 2024. 6. 25.
CSS의 기본 구성 요소 이전 글에서는 CSS가 무엇인지에 대해 알아보았습니다. 이번 글에서는 CSS의 기본 구성 요소인 선택자, 속성, 값에 대해 자세히 알아보겠습니다.선택자(Selector): 선택자는 스타일을 적용할 HTML 요소를 지정합니다.태그 선택자: 특정 HTML 태그를 선택합니다.p { color: blue;}클래스 선택자: 클래스 속성을 가진 요소를 선택합니다. 클래스 이름 앞에 점(.)을 붙입니다..my-class { font-size: 16px;}아이디 선택자: 아이디 속성을 가진 요소를 선택합니다. 아이디 이름 앞에 샵(#)을 붙입니다.#my-id { background-color: yellow;}**속성(Property)**와 값(Value): 속성은 스타일의 종류를, 값은 그 스타일의 구체적인 값을.. 2024. 6. 25.
반응형

티스토리툴바