Devlopment/HTML & CSS2024. 1. 7. 04:09[CSS] 스타일 링크(Style Links)

Style Link - 링크는 CSS 속성(예 : color : font-family, background 등)을 사용하여 스타일을 지정할 수 있다. - Link에 text-decoration(구분선), background-color(배경색)을 지정할 수 있다. - 링크 상태는 다음과 같다. a:link - 방문하지 않은 정상적인 링크 a:visited - 사용자가 방문한 링크 a:hover - 사용자가 마우스를 위에 올려놓았을 때의 링크 a:active - 클릭하는 순간의 링크 [주의사항 1] a:hover는 반드시 a:link 및 a:visited 뒤에 와야 한다. [주의사항 2] a:active는 반드시 a:hover 뒤에 와야 한다. /* unvisited link */ a:link { color..

Devlopment/HTML & CSS2024. 1. 7. 02:57[CSS] 텍스트 서식 (Text)

CSS Text - 텍스트 서식 지정을 위한 속성이다 Text Color - 속성 color는 텍스트 색상을 설정하기 위해 사용한다. - 색상은 다음과 같이 지정된다. 색상 이름 : 빨간색 HEX 값 - 예 : "#FF0000" RGB 값 - 예 : "RGB(255, 0, 0)" This is heading 1 This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector. Another paragraph. HTML 삽입 미리보기할 수 없는 소스 Text 정렬 - text-align 속성은 텍스트의 가로 정렬을 설정하기 위해 사용한다. - ..

[CSS] Box Model - 박스 모델(Margin, Border, Padding, Content)
Devlopment/HTML & CSS2024. 1. 5. 14:16[CSS] Box Model - 박스 모델(Margin, Border, Padding, Content)

CSS Box Model CSS에서 디자인과 레이아웃을 말할 때 사용하는 용어 Box Model은 기본적으로 모든 HTML 요소를 둘러싸는 상자이다. 내용, 패딩, 테두리 및 여백으로 구성. Content : 텍스트와 이미지가 표시되는 상자의 내용 Padding : 콘텐츠 주변 영역을 지운다. Border : Padding과 Content를 둘러싸는 테두리 Margin : 테두리 외부 영역을 지운다. div { width: 300px; border: 15px solid green; padding: 50px; margin: 20px; } 요소의 Width(너비)와 Height(높이) CS 사용하여 요소의 Width와 Height 속성을 설정할 때 Content 영역의 Width와 Height만 설정하면 된..

Devlopment/HTML & CSS2024. 1. 5. 13:53[CSS] Backgrounds - 배경색 설정

CSS Backgrounds body { background-color: lightblue; } - 배경 효과를 추가하기 위해 사용 background-color background-image background-repeat background-attachment background-position background(shorthand property) - CSS에서 색상은 HEX 값과 RGB 값으로 지정한다. HTML 요소마다 배경색 설정 h1 { background-color: green; } div { background-color: lightblue; } p { background-color: yellow; } 투명도 속성 opcacity은 불투명도/투명도를 지정하며 0.0 ~ 1.0 사이의 값을..

[CSS] CSS란, 외부 CSS와 내부 CSS 적용 방법 및 CSS 실습
Devlopment/HTML & CSS2024. 1. 4. 14:20[CSS] CSS란, 외부 CSS와 내부 CSS 적용 방법 및 CSS 실습

CSS란 - Cascading Style Sheets의 약어 - HTML 문서의 스타일을 지정할 때 사용하는 언어 - CSS는 HTML 요소가 화면 또는 미디어에 표시되는 방법을 설명함 - CSS을 사용하면 여러 웹페이지의 레이아웃을 한번에 제어할 수 있어 많은 작업을 줄여준다. - 외부 스타일시트는 .css 파일로 저장 CSS 기본 실습 - basic01.html Hello world! CSS3 스타일을 학습하자. basic01.html 실습 결과 HTML 삽입 미리보기할 수 없는 소스 CSS 기본 실습 - basic02.html ID 선택자 hello world 웹 개발과정... basic02.html 실습 결과 HTML 삽입 미리보기할 수 없는 소스 CSS 기본 실습 - basic03.html cl..

image